细说jQuery的选择器

发布时间：2年前作者：老郭热度： 1400 ℃评论数：

# 细说jQuery的选择器

------------

#### 一、基本选择器

```
    $('#id属性值') ----->document.getElementById()
    $('tag标签名称') ------>document.getElementById()
    $('.class属性值')------>class属性值选择器
    $('*')    通配符选择器
    $('s1,s2,s3')联合选择器
```

```
//1、$(#id属性值)
//$("#useremail").css(样式名称，样式值)；
$("#useremail").css('color','blue');

//2、 $(标签名称)
$('h2').css('background-color','pink');
$('input').css('width','100px');

//3、$(.class属性值)
$('.apple').css('background-color','lightgreen');

//4、$(*)通配符选择器（获得页面全部节点）
$('*').css('background-color','gray');

//5、$(s1,s2,s3) selector选择器联合选择器
//把符合s1 或 s2或s3条件的节点都给找到
$('h2,#usertel,#userqq').css('background-color','blue');
```

#### 二、层次选择器

> $(s1 s2) [父子] 派生选择器
派生选择器：在s1内部获得全部的s2接节点（不考虑层次）

```
    $("div span");   //在div内部获得span节点
    <div>
        <span></span>
        <p><span></span></p>
    </div>
```

> $(s1 > s2) [父子] 直接子元素选择器
直接子元素选择器：在s1内部获得子元素节点s2

```
 $("div > span");   //在div内部获得子元素span节点
    <div>
        <span></span>
        <p><span></span></p>
        <span></span>
    </div>
```

>  $(s1 + s2) [兄弟] 直接兄弟选择器
直接兄弟选择器：在s1后面获得紧紧挨着的第一个兄弟关系的s2节点

```
$("div + span");   //在div后面获得紧紧挨着的第一个兄弟关系的span节点

<div>
   <span></span>
   <p><span></span></p>
    <span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
```

> $(s1 ~ s2) [兄弟] 后续全部兄弟关系节点选择器
后续全部兄弟关系节点选择器：在s1后面获得全部兄弟关系的s2节点

```
 $("div ~ span");   //获得div后边全部兄弟关系的span节点
    <div>
        <span></span>
        <p><span></span></p>
        <span></span>
    </div>
    <span></span>
    <span></span>
    <div></div>
    <span></span>

</script>

</head>
<body>
  <h2>基本选择器</h2>
  <div>
       <span>刘备</span>
     <p><span>阿斗</span></p>
      <span>关羽</span>
 </div>
  <span>吕布</span>
 <span>貂蝉</span>
 <div>董卓</div>
   <span>周瑜</span>
 <p>黄盖</p>
   <span>孙权</span>
 <input type="button" name="" value="触发" onclick="f1()">
</body>

```

------------

#### 三、层次选择器

```
     3.1：first
    用法：$("tr:first");单个元素的组成集合
    匹配找到的第一个元素

3.2：last
    匹配找到的最后一个元素

3.3：not(selector)
    去除所有与给定选择器匹配的元素

3.4：even
    匹配所有索引值为偶数的元素，从0开始计数

3.5：odd
    匹配所有索引值为奇数的元素，从0开始计数

3.6：eq(index)
    匹配一个给定索引值的元素，从0开始计数

3.7：gt(index)
    匹配所有大于给定索引值的元素，从0开始计数

3.8：lt(index)
    匹配所有小于给定索引值的元素，从0开始计数

3.9：header
    匹配h1,h2,h3之类的标题元素
```
> 注意：

```
    ①、并且选择器可以单独使用
    ②、各种选择器都可以构造“并且”关系
    ③、并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”（归零）
    ④、多个并且关系的选择器，没有前后数序要求，但是要避免产生“歧义”
    
    //多个并且关系的选择器，没有前后顺序要求，但是要避免产生‘歧义’
   $('li.pear').css('background-color','orange');
    
    //获得‘标题标签元素’，并且有‘class=pear’属性值
 //$(':header')
    //$(':pear')
  $(':header.pear').css('color','red');
 //$('h1,h2,h3,h4')
    $(':header.pear').css('background-color','yellow');

```

#### 四、内容过滤选择器

```
    4.1 ：contains(内容)

包含内容选择器，获得节点内部必须包含指定的内容
    $('div:dontains(beijing)')
    <div>i like<span>beijing</span></div>//标签不构成影响
    <div>xiaoming like shanghai</div>

4.2 :empty
    获得空元素（内部没有任何元素/文本（空））节点对象
    $('div:empty')
    <div>i like<span>beijing</span></div>
    <div>        </div>
    <div>hello</div>
    <div><img></div>
    <div></div>

4.3 :has(选择器)
    节点内部必须包含指定选择器对应的元素
    $('div:has(#apple)')
    <div><p></p></div>
    <div><span id='apple'></span></div>

4.4 :parent
    寻找的节点必须作为父元素节点存在
    $('div:parent')
    <div></div>
    <div>        </div>
    <div><input type="text"></div>
    <div>sun</div>
```

```
内容选择器的具体使用：

//1、：contains（text）
$('div:contains(beijing)').css('color','red');

//2、：empty 空节点
//console.log($('div:empty'));

//3、：has选择器
$('div:has(p)').css('background-color','pink');

//4、:parent作为父节点存在的节点
//console.log($('div:parent'))
```

#### 五、表单域选中选择器

```
复选框、单选按钮、下拉列表
    $(:checked)复选框、单选按钮 选中选择器
    $(:selected) 下拉列表  选中选择器
获得复选框、单选按钮、下拉列表的元素节点：

<h2>表单域选中选择器</h2>
爱好：
<input type="checkbox" name="hobby[]" class="hby" value="1">篮球
<input type="checkbox" name="hobby[]" class="hby" value="2">足球
<input type="checkbox" name="hobby[]" class="hby" value="3">排球
<input type="checkbox" name="hobby[]" class="hby" value="4">棒球
<hr>

性别：
<input type="radio" name="sex" class="sx" value="a">男
<input type="radio" name="sex" class="sx" value="b">女
<input type="radio" name="sex" class="sx" value="c">保密
<hr>

城市：
<select>
<option value="A">北京</option>
<option value="B">天津</option>
<option value="C">上海</option>
<option value="D">深圳</option>
</select>

```

jQuery,选择器

上一篇：使用Ajax中$.post方法前台获取json数据，将数据转换为对象

下一篇：jQuery的属性操作

栏目导航

Ajax是什么？ 1252 ℃
网站禁止浏览器缓存 1314 ℃
Ajax之get方式请求 2781 ℃
Ajax之post方式请求 2209 ℃
Json使用 1211 ℃
无刷新表单信息提交 1419 ℃
使用Ajax中$.post方法前台获取json数据，将数据转换为... 1803 ℃
细说jQuery的选择器 1400 ℃
jQuery的属性操作 2158 ℃
jQuery快捷操作 1307 ℃
jQuery对象与dom对象关系 3071 ℃
jQuery的事件加载机制 1634 ℃
jQuery属性选择器使用 2231 ℃
jQuery基本动画效果 2574 ℃
利用Ajax技术实现天气预报接口 1471 ℃

细说jQuery的选择器

栏目导航

相关文章

微信小程序

手机扫码访问