jQuery选择器

最新推荐文章于 2023-02-23 22:32:50 发布

原创最新推荐文章于 2023-02-23 22:32:50 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #选择器

偏前端专栏收录该内容

15 篇文章

订阅专栏

一、基本选择器

1，概述

  - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)

2，使用示例

操作区：

<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>

<br>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB(title="hello")</li>
  <li class="box">CCCCC(class="box")</li>
  <li title="hello">DDDDDD(title="hello")</li>
</ul>

需求：

（1）选择id为div1的元素
$(‘#div1’).css(‘background’, ‘red’)

（2）选择所有的div元素
$(‘div’).css(‘background’, ‘red’)

（3）选择所有class属性为box的元素
$(‘.box’).css(‘background’, ‘red’)

（4）选择所有的div和span元素
$(‘div,span’).css(‘background’, ‘red’)

（5）选择所有class属性为box的div元素
$(‘div.box’).css(‘background’, ‘red’)

二、层次选择器

1，概述
层次选择器：查找子元素，后代元素，兄弟元素的选择器

ancestor descendant
在给定的祖先元素下匹配所有的后代元素
parent>child
在给定的父元素下匹配所有的子元素
prev+next
匹配所有紧接在 prev 元素后的 next 元素
prev~siblings
匹配 prev 元素之后的所有 siblings 元素

2，使用示例
操作区：

<ul>
  <li>AAAAA</li>
  <li class="box">CCCCC</li>
  <li title="hello"><span>BBBBB</span></li>
  <li title="hello"><span class="box">DDDD</span></li>
  <span>EEEEE</span>
</ul>

需求：

选中ul下所有的的span
$(‘ul span’).css(‘background’, ‘yellow’)
选中ul下所有的子元素span
$(‘ul>span’).css(‘background’, ‘yellow’)
选中class为box的下一个li
$(‘.box+li’).css(‘background’, ‘yellow’)
选中ul下的class为box的元素后面的所有兄弟元素
$(‘ul .box~*’).css(‘background’, ‘yellow’)

三、过滤选择器

1，概述

在原有选择器匹配的元素中进一步过滤的选择器
* 基本过滤
* 内容过滤
* 可见性过滤
* 属性过滤

2，使用示例
操作区：

<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two">BBBBB</li>
  <li style="display:none">我本来是隐藏的</li>
</ul>

需求：

选择第一个div
$(‘div:first’).css(‘background’, ‘red’)
选择最后一个class为box的元素
$(‘.box:last’).css(‘background’, ‘red’)
选择所有class属性不为box的div
$(‘div:not(.box)’).css(‘background’, ‘red’) //没有class属性也可以
选择第二个和第三个li元素
$(‘li:gt(0):lt(2)’).css(‘background’, ‘red’) // 多个过滤选择器不是同时执行, 而是依次
选择内容为BBBBB的li
$(‘li:contains(“BBBBB”)’).css(‘background’, ‘red’)
选择隐藏的li
console.log( $('li:hidden').length,$ (‘li:hidden’)[0])
选择有title属性的li元素
$(‘li[title]’).css(‘background’, ‘red’)
选择所有属性title为hello的li元素
$(‘li[title=”hello”]’).css(‘background’, ‘red’)

四、表单选择器

使用示例
操作区：

<form>
  用户名: <input type="text"/><br>
  密 码: <input type="password"/><br>
  爱 好:
  <input type="checkbox" checked="checked"/>篮球
  <input type="checkbox"/>足球
  <input type="checkbox" checked="checked"/>羽毛球 <br>
  性 别:
  <input type="radio" name="sex" value='male'/>男
  <input type="radio" name="sex" value='female'/>女<br>
  邮 箱: <input type="text" name="email" disabled="disabled"/><br>
  所在地:
  <select>
    <option value="1">北京</option>
    <option value="2" selected="selected">天津</option>
    <option value="3">河北</option>
  </select><br>
  <input type="submit" value="提交"/>
</form>

需求：

选择不可用的文本输入框
$(‘:text:disabled’).css(‘background’, ‘red’)
显示选择爱好的个数
console.log($(‘:checkbox:checked’).length)
显示选择的城市名称

 $(':submit').click(function () {
    var city = $('select>option:selected').html() // 选择的option的标签体文本
    city = $('select').val()  // 选择的option的value属性值
    alert(city)
  })