1.jquery的选择器和 css 很相近
css中的选择器是用
.a{}
类选择器
#a{}
是id选择器
a{}
是标签选择器
当然 div a.a{} 也可以使用 div>a{} 来表示
2.选择器的容错性
即使页面没有这个元素,jQuery也不会报错
那么我们可以把一大堆jquery放到页面,减少了开发时间
3.选择器的种类
1.基本选择器
id选择器
$('#p1').css('color','green');
类选择器
$('.p1').css('color', 'red');
标签选择器
$('p1').css('color', 'yellow');
* 选择器
$('*').css('border','10px solid blue' )
*选择器不推荐使用,他会遍历所有的dom节点,然后执行,并且效率低
$('body *') ==> 表示选择 body 下的所有DOM标签
多重选择器
$('#p1, .p2, div').css(xxxxx...)
表示id选择器,类选择器,标签选择器 都执行一个
2.层次选择器
E F
选择E元素的所有后代选择器------------------------叫自己的所有后代们(只能叫自己的)
E>F
选择E的子元素,子选择器--------------------------叫自己的儿子
E+next
选择E的邻居的兄弟元素,等价于.next()-------------叫自己的下一个兄弟 (只能叫下一个)
E~siblings
选择E元素后的所有的指定元素,等价于.nextAll()--叫身后的所有兄弟们(不论大小)
兄弟标签
$('p+span').css('color','red');
$('p').next().css('color','red');
身后标签
$('div~p').css('color','red');
//表示身后所有的P标签
$('div').nextAll('p').css('color','red');
//表示身后所有的P标签
$('div').nextAll().css('color','red');
//表示身后所有的标签
3.过滤选择器
1.基本过滤选择器
1.first
选取第一个元素
$('p:first')
2.last
选取最后一个元素
3.not()
选取除了指定元素之外的
4.even
偶数选择器
5.odd
奇数选择器
6.eq()
选取指定索引的元素 ==> $('p:qu(3)') 表示第四个变化
<--------以上用的是比较多的-------->
7.gt()
选取大于指定索引的元素
8.lt()
选取小于指定索引的元素
9.animated
选取正在执行动画的元素
10.header
选取h1 h2 h3 h4 h5 h6 标签
$(':header')
11.lang()
语言代码选择器,不用!!
12.root
根元素选择器
不用!!
13.target
由文档URI格式化识别代码表示的目标元素
不用!!
2.内容过滤选择器
1.contains()
选取含有文本内容的元素
2.has()
选取指定元素的元素,只能是标签或者属性或者其他
<--------以上用的是比较多的-------->
3.empty()
选取不包含子元素或者文本空元素
$('p:empty')
4.parent
选取含有子元素或者文本的元素
3.可见性选择器
1.hidden
选取所有不可见元素
2.visible
选取所有可见元素
4.属性选择器
1.[attr]
选择有此属性的选择器
2.[attr=value]
选择指定属性值的选择器
3.[attr1][sttr2]
符合型标签 ==>里面两个属性必须全部满足
5.子元素过滤选择器(基本不用)
1.:first-child
选择父元素的第一个子元素
2.:last-child
选择父元素的最后一个元素
3.:only-child
选择元素中只包含一个子元素的元素
4.:nth-child(表达式)
选择父元素中的第X个元素,x由表达式决定
5.:first-of-type
选取所有相同元素的第一个兄弟元素
6.:last-of-type
选取所有相同元素的最后一个兄弟元素
7.:nth-last-child(表达式)
廁所有他们父元素的第N个元素,从后向前数
8.:only-of-type
6.表单选择器
1.:input
2.:text
3.:password
4.:radio
5.:checkbox
6.:submit
7.:image
8.:reset
9.:button
10.:file
11.:hidden
hidden选择器的条件 => 1.肉眼在网页上看不到 2.网页上没有占位置
.hide{
display:none;
//以下这两种都是,肉眼看不到,但是网页上占有位置的
// opacity: 0;
// xisibility:hidden;
}
7.表单属性选择器(全都可以使用属性选择器得到)
1.enabled
选择所有可用元素
2.disabled
选择所有不可用元素
3.checked
选则所有被选中元素
4.selected
选取所有被选种元素
6.focus
选取当前获取焦点的元素 基本没有什么用!
jquery data 选择器 jquery中的选择器类型
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【CSS】第九讲:CSS基本选择器(1)
本文讲了部分CSS选择器
选择器 属性值 基本语法 -
jQuery # 选择器 jquery id选择器
node2:/django/mysite/news/templates#cat displaytestxhr.html Listing 10.3 ...
html django css javascript jquery