• jQuery中的选择器


    在jQuery中选择器分为:基本选择器,层次选择器,过滤选择器,表单选择器

    一,基本选择器:

    1,基本选择器是jQuery最常用的选择器,也是最简单的选择器,它是通过元素id,class,标签名称来查找DOM元素(注意:在网页中ID只能使用一次,id是唯一的,但是class允许重复使用的)
    2,id选择器:

    1)根据给定的id匹配一个元素

    2)用法:$("#txt")选取id为txt的元素(返回单个元素)

    3.class(类选择器)

    1)根据给定的类名匹配元素

    2)用法:$(".txt")选取所有class为txt的元素(返回集合元素)

    4、element(标签选择器)
    1)用法:$("span,p,div"); 返回集合元素

    5,*匹配所有元素

    1)用法:$("*") :返回集合元素,匹配所有元素

    二,层次选择器:

    1,先找到元素的父级元素+空格找其子级元素

    2.语法:parent  child;

    例如:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    $(function () {

    var txt = $("#table1 tr");//找到table1中的tr
    var txt = $("#table1 tr td");//找到table1中的tr下的td

    })
    </script>
    </head>
    <body>
    <table id="table1">
    <tr><td></td></tr>
    </table>

    三:过滤选择器:(注意:过滤选择器前以:开头

    1.基础过滤选择器:

    1):first 找到第一个元素

    用法:$("div:first")选取所有<div>元素中第一个<div>元素

    2):last 找到最后一个元素

    用法:$("div:last")选取所有<div>元素中最后一个<div>元素

    3):odd 匹配下标为基数的元素

    用法:$("input:odd")选取索引是奇数的<input>元素(索引从0开始)

    4):even 匹配下标为偶数的元素

    用法:$("input:even")选取索引是偶数的<input>元素(索引从0开始)

    5):eq 匹配指定元素下标的元素(索引从0开始)

    用法:$("input:eq(1)")选取索引等于1的<input>元素(索引从0开始)

    6):gt 匹配比给定下标大的元素

    用法:$("input:gt(1)")选取索引大于1的<input>元素(索引从0开始)

    7):lt 匹配比给定下标大的元素

    用法:$("input:lt(1)")选取索引小于1的<input>元素(索引从0开始)

    8):not(select)

    用法:$(input:not(select)) 返回集合元素

    说明:去除所有与给定选择器匹配的元素。有点类似于“非”

    9):header 匹配标题元素

    用法:$(":header")选取网页中所有的<h1>,<h2>....

    10):animated 选取正在执行动画的所有元素

    用法:$("div:animated")选取正在执行动画的<div>元素

    2,内容过滤选择器:

    1):contains(“文本内容”)匹配元素是否包含指定的文本内容

    2):has(标签元素)匹配含有选择器所匹配的元素的元素

    3):empty 匹配元素内容为空的元素

    4):parent 匹配含有子元素或者文本的元素

    3,属性过滤选择器:

    [attribute=value] :属性过滤选择器就是通过元素的属性来获取相应的元素

    例如:

    <input id="Checkbox1" type="checkbox" name="chk" action="#"/>

    方式一:

    $("input[name='chk']").attr("checked", true);

    方式二:

    $("input[name='chk']").prop("checked", true);

    以上两种方式就是把name为chk的复选框的checked 属性改为true返回的是一个集合;

    强调:

    1.attr()一般推荐元素的非固有属性(用户自定义属性)时使用(如复选框中的”action“属性属于非固有属性)

    2.prop用于元素的固有属性时使用(如复选框中的,id,type,...)不过prop要在jQuery1.6版本以上才有效果

    4,可见性过滤选择器:

    1):hidden 选取所有不可见的元素    筛选隐藏的元素(type="hidden",css: display="none")

    2):visible 选取可见的元素

    5,子元素过滤选择器
    :nth-child(index/even/odd/equation)

    注意:这里的索引值从1开始,而eq是从0开始
    1):first-child 找到第一个子元素

    用法:$("ul li:first-child")选取每个<ul>中第一个<li>元素

    2):last-child 找到最后一个子元素

    用法:$("ul li:last-child")选取每个<ul>中最后一个<li>元素
    3):only-child 匹配只有一个子元素的元素

    用法:$("ul li:last-child")在<ul>中选取是唯一子元素的<li>元素

    6,表单对象属性过滤选择器

    1):disabled 筛选不可用元素

    <input  disabled="disabled">不可用
    2):enabled 筛选可用的元素
    3): checked 筛选被选中的复选框
    4): selected 筛选下拉框被选中的元素

  • 相关阅读:
    扫盲如何在ECLIPSE中使用条件断点
    春困
    气虚咳喘案
    知足老师论糖尿病
    辨痰之病位与寒热
    常用中药功效比较(任之堂)
    女子全身窜痛案
    小儿外感案
    紫斑案
    读任之堂中药讲记笔记
  • 原文地址:https://www.cnblogs.com/qinwenfeng/p/9495086.html
Copyright © 2020-2023  润新知