ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Jquery 选择器

2021-07-04 23:34:14  阅读:181  来源: 互联网

标签:Jquery 所有 标记 元素 child 选择器 属性


1.属性选择器

属性选择器的语法是在标记后面用中括号“ [ ”和“ ] ” 添加相关属性

$("a[title]") 找到设置了title属性的a标签

$("a[href=10-9.html]") 找到href属性值等于10-9.html的a标签

Jquery还可以根据属性值的某一部分进行匹配,如:

$("a[href^=http://]") 找到href属性值以" http:// " 开头的所有超链接

$("a[href$=html]") 找到href属性值以“ html ”结尾的超链接

 

2.包含选择器

Jquery支持的css3最基本的选择器
选择器 说明
* 所有标记
E 所有名为E的标记
EF 所有名称为F的标记,并且是E标记的子标记(包括孙、重孙等)
E>F 所有名称为F的标记,并且是E标记的子标记(不包括孙标记)
E+F 所有名称为F的标记,并且该标记紧接着前面的E标记
E~F 所有名称为F的标记,并且该标记前面有一个E标记
E:has(F) 所有名称为E的标记,并且该标记包含F标记
E.C 所有名称为E的标记,属性类别为C,如果去掉E,就是属性选择器.C
E#I 所有名称为E的标记,id为I,如果去掉E,就是id选择器#I
E[A] 所有名称为E的标记,并且设置了属性A
E[A=V] 所有名称为E的标记,并且属性A的值等于V
E[A^=V] 所有名称为E的标记,并且属性A的值以V开头
E[A$=V] 所有名称为E的标记,并且属性A的值以V结尾
E[A*=V] 所有名称为E的标记,并且属性A的值中包含V

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.位置选择器

Jquery支持的css3位置选择器
选择器 说明
:first 第一个元素,例如 div p:first 选中页面中的所有p元素的第一个,且该p元素是div的子元素
:last 最后一个元素,例如 div p:last 选中页面中的所有p元素的最后一个,且该p元素是div的子元素
:first-child 第一个子元素,例如 ul:first-child 选中所有ul元素,且该ul元素是其父元素的第一个子元素
:last-child 最后一个子元素,例如 ul:last-child 选中所有ul元素,且该ul元素是其父元素的最后一个子元素
:only-child 所有没有兄弟的元素,例如 p:only-child 选中所有p元素,如果该p元素是其父元素的唯一子元素
:nth-child(n) 第n个子元素,例如 li:nth-child(2) 选中所有li元素,且该 li 元素是其父元素的第2个子元素(从1开始计数)
:nth-child(odd|even) 所有奇数号或者偶数号子元素,例如 li:nth-child(odd) 选中所有 li 元素,且这些 li 元素为起父元素的第奇数个元素(从1开始计数)
:nth-child(nX+Y) 利用公式来计算子元素的位置,例如 li:nth-child(5n+1) 选中所有的 li 元素,且这些元素未其父元素的第 5n+1 个元素(1,6,11,16....)
:odd 或者:even 对于整个页面而言的奇数号或者偶数号元素,例如 p:even 为页面中所有排在偶数的p元素(从0开始计数)
:eq(n) 页面中的第n个元素,例如 p:eq(4) 为页面中的第5个p元素 
:gt(n) 页面中的第n个元素之后的所有元素(不包括第n个本身),例如 p:gt(0)为页面中第1个p元素之后的所有p元素
:lt(n) 页面中第n个元素之前的所有元素(不包括第n个元素本身),例如 p:lt(2)为页面中第3个p元素之前的所有p元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意:

:nth-child相关的css选择器是从1开始计数,而其他选择器是从0开始计数;

标签:Jquery,所有,标记,元素,child,选择器,属性
来源: https://www.cnblogs.com/hhkkomg/p/14970374.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有