文章目录

• • ⛳️ 选择器
  • • ✨ 属性选择器
    • ✨ 包含选择器
    • ✨ 位置选择器
    • ✨ 过滤选择器
    • ✨ 反向选择器
  • ⛳️ 快速投票

⛳️ 选择器

  本篇重点讲解jQuery中丰富的选择器，以及他们的基本用法。CSS的选择器均可以用jQuery的$进行选择，部分浏览器对CSS3的选择器支持不全，可以用jQuery作为补充，所以本篇重点介绍jQuery扩展的选择器。

✨ 属性选择器

  属性选择器的语法是在标记的后面用方括号[和]添加相关的属性，然后赋予其不同的逻辑关系。jQuery中的属性选择器的用法如下：

【1】追加、移除和切换样式

  追加用法：$(‘p’).addClass(‘test’);

  移除用法：$(‘p’).removeClass(‘demo’);

备注：p为标记，test和demo为标记的class属性值。

段落标签
追加样式移除样式

效果展示：

  以上代码定义了HTML框架，以及相关的CSS类别，供测试使用，此时的显示效果是点击后无任何反应。

  如果希望在页面中选择设置了demo属性的标记，并给标记添加或者移除某个样式，可以使用如下方法实现。

段落标签
追加样式移除样式

效果展示：

  不管是追加还是移除，在实际操作中，都不便于具体得使用逻辑，我们大多数使用逻辑都是喜欢点击一个按钮能喜欢两种样式的切换，所以有toggleClass()方法帮我们实现切换样式的需求。

  切换用法：$(‘p’).toggleClass(‘demo’);

段落标签
切换样式

运行效果：

【2】根据属性值添加样式

案例原始代码：

信息列表
新浪
百度
腾讯
谷歌

原始代码运行效果：

  如果希望在页面中选择设置了title属性的标记，并给这些超链接添加myClass样式，则可以使用如下代码：

运行效果：

  如果希望根据属性值进行判断，例如href属性值为https://***.baidu.com/的超链接添加myClass样式，则可以用如下代码：

运行效果：

  以上两种比较简单的属性选择器，jQuery还可以根据属性值的某一部分进行匹配，例如下面代码选中的href属性值以http://开头的所有超链接。

运行效果：

  既然可以根据属性值的开头来匹配选择，自然也可以根据属性值的结尾$=来匹配选择，如下代码可以选中href属性值以cn/结尾的超链接集合，这种方法通常用于选取网站中的某些资源，例如所有的.jpg图片、所有的.pdf文件等。

运行结果：

  另外，还可以利用*=进行任意匹配，例如下面的代码选中href属性值中包含字符串com的所有超链接，并添加样式：

运行效果：

✨ 包含选择器

  jQuery中还提供了包含选择器，用于选择包含某种特殊标记的元素。

  同样采用上述例子中的HTML框架，下面的代码表示选中包含超链接的所有li标记：

运行效果：

✨ 位置选择器

  CSS3中还允许用过标记所处的位置来对其进行选择，这里的位置是指元素在DOM中所处的位置。页面中几乎所有的标记都可以运用位置选择器，下面的例子展示了jQuery中位置选择器的使用。

注意：nth-child()选择器编号是从1开始，而其他选择器从0开始。

原始案例代码：

1.大礼堂
2.清华学堂
3.图书馆
4.紫荆公寓
5.C楼
6.清清地下

原始代码运行效果：

  如果希望在页面中选择每个div块的第一个p标记，则可以通过：first-child来选择，代码如下：

运行效果：

  如果希望在页面中选择第n个p标记，则可以通过：:eq(n-1)来选择，代码如下：

运行效果：

✨ 过滤选择器

  除了CSS3中的一些选择器，jQuery也提供了很多自定义的过滤选择器，用来处理更复杂的选择问题。例如很多时候希望知道用户所勾选的多选项，如果通过属性的值来判断，那么只能获得初始状态下的勾选情况。

案例代码：

足球
篮球
排球

运行效果：

  以上代码中有3个复选框，通过jQuery的过滤器:checked便可以很容易地筛选出用户选中的复选项，并赋予其特殊的CSS样式。

✨ 反向选择器

  上述过滤选择器中的:not(filter)选择器可以尽享反向选择，其中filter参数可以是任意的其它过滤选择器，例如下面的代码表示input标记中所有非radio元素：
    input:not(:radio)

  反向选择器也可以使用链式编写方式，例如：
    $(‘:input:not:(:checkbox):not(:radio)’).addClass(‘myClass’);
  表示所有表单元素中（input、select、textarea或button）非checkbox和非radio的元素，这里需要注意input与:input的区别。

  此外，在:not(filter)中，filter参数必须是过滤选择器，而不能是其它选择器。下面的代码表示的是典型的错误写法：
    $(‘div:not(p:hidden)’);

  正确写法为：
    $(‘div p:not(:hidden)’);

⛳️ 快速投票