博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
丰富的jquery选择器
阅读量:6316 次
发布时间:2019-06-22

本文共 1701 字,大约阅读时间需要 5 分钟。

今天抽时间看了下jq,里面的选择器还是很丰富的,下面分别来对他进行分类下:

1)首先是基本的选择器,可选择标签 ,样式,id,通配符4种属性的,

eg:$(div)  是选择dom文档下所有的div元素,$(.class) 是选择所有dom文档下的所有样式为class的元素,id则必须通过$(#id)这种方式来使用,通配符是指 * ,能匹配所有的元素。

2)组合选择器,就是通过各种方法选择的元素组合在一起,返回一个数组元素,各个选择器以,号分隔。

3)层级选择器:

$(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素,即子孙元素,例如:$(“div span.num”);

$(“parent > child”):在给定的父元素下匹配所有的子元素,不包括子元素的子元素,例如:$(“div>span”);
$(“prev + next”):匹配所有紧接在 prev 元素后的 next 元素,即第一个跟着的兄弟元素,例如:$(“p+span”);
$(“prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素,即一群跟着它的兄弟元素(当然也有可能是一个兄弟元素,那就和$(“prev + next”)等价了),例如:$(“p~span”); 

4)过滤选择器:

:animated:匹配所有正在执行动画效果的元素集合;
:eq(index):匹配索引为 index 的一个元素,例如:$(“div:eq(0)”)//第一个div;
:even:匹配索引为偶数(双数)的元素集合,例如:$(“div:even”);
 
:odd:匹配索引为奇数(单数)的元素集合,例如:$(“div:odd”);
:first:匹配找到的第一个元素,等价于:eq(0),例如:$(“div:first”);
:gt(index) :匹配索引大于 index 的 元素集合,例如:$(“div:gt(0)”)//除了第一个div外的所以div;
:lt(index):匹配索引小于于 index 的 元素集合,例如:$(“div:lt(0)”);
:header:匹配h1-h6的所有 元素集合;
:last:匹配找到的最后一个元素,例如:$(“div:last”)//最后一个div;

:not(selector):去除所有与给定选择器匹配的元素,例如:$(“input:not(:checked)”)//除了被选中的所有input

[name=value] 属性选择器,选择所有属性为name,值为value的元素

[name^=value]属性选择器,选择所有属性为name,值为value的开头元素

[name$=value] 属性选择器,选择所有属性为name,值为value的结尾元素

[name~=value]属性选择器,选择所有属性为name,值为空格分隔包含value元素

[name*=value] 属性选择器,选择所有属性为name,值为包含value元素

:button 选择所有button的元素

:checkbox 选择所有为checkbox的元素

:checked 选择所有勾选的元素

:contains(text)选择所有包含指定文本的元素

:disabled,:enabled 选择所有可用和不可用的元素

:empty 选择没有子元素的节点,包括文本节点

5)子元素选择器

:first-child :匹配每个父元素的第一个子元素,相当于E:nth-child(0),例如:$(“ul li:first-child”);
:last-child :匹配每个父元素的最后一个子元素,例如:$(“ul li: last -child”);
:nth-child(index/even/odd/equation):匹配每一个父元素的第N个子或奇偶元素,例如:$(“ul li:nth-child(2)”);
:only-child :如果某个元素是父元素中唯一的子元素,那将会被匹配$(“ul li:only-child”);

 

转载地址:http://fakaa.baihongyu.com/

你可能感兴趣的文章
如何用深度学习推荐电影?教你做自己的推荐系统!
查看>>
英特尔澄清:第一款10nm产品2017年定发布
查看>>
《Android智能穿戴设备开发指南》——第6章,第6.2节使用TCP协议传输数据
查看>>
《Ansible权威指南》一2.7 本章小结
查看>>
一些重要 Docker 命令的简单介绍
查看>>
微服务,微架构[六]之springboot集成mybatis
查看>>
RDS SQL Server - 专题分享 - 巧用执行计划缓存之索引缺失
查看>>
诺奖得主Wilczek:人工智能正在解放我们的大脑
查看>>
C++实践参考——分数类中的运算符重载
查看>>
如何从开发环境直连线上(IPTables)
查看>>
setContentView是如何一步一步被显示出来的?
查看>>
电脑重装计划
查看>>
【肥朝】从JDK中,我们能学到哪些设计模式?
查看>>
RecyclerView综合案例库和系列博客
查看>>
TensorFlow Build from Source for macOS
查看>>
ES5和ES6中对继承的实现
查看>>
Introducting To Siri Shortcuts
查看>>
阻塞同步 异步
查看>>
小程序分页加载
查看>>
JAVA 并发之路 (二) 线程安全性
查看>>