jQuery选择器 :
<body>
<header id="header1" class="header1">我是头部标签</header>
<div class="header1">我是盒子</div>
<p>我是p标签</p>
<ul>
<li>我是li第1行</li>
<li>我是li第2行</li>
<li id="list3">我是li第3行</li>
<li id="list4">我是li第4行</li>
<li>我是li第5行</li>
<div>
<ol>
<li>我是liol第1行</li>
<li>我是liol第2行</li>
<li>我是liol第3行</li>
</ol>
</div>
<p>我是p标签</p>
</ul>
<button id="btn" style="font-size:20px">设置</button>
</body>
一、基本选择器
// 1、Id选择器
$('#btn').click(function () {
$('#header').css('background-color', 'red')
})
// 2、类名选择器
$('#btn').click(function() {
console.log($('.header1'));
$('.header1').css('background-color','red')
})
// 3、标签选择器
$('#btn').click(function() {
$('p').css('background-color','red')
$('p').css('font-size','20px')
})
// 4、并集选择器
$('#btn').click(function() {
// 使用逗号隔开
$('div,p,#header1').css('background-color','red')
})
// 5、交集选择器
$('#btn').click(function() {
$('#header1.header1').css('background-color','red')
})
$('#btn').click(function() {
$('div.header1').css('background-color','red')
})
二、层级选择器
1、子代选择器
2、后代选择器
// 1、子代选择器
$('#btn').click(function () {
$('ul>li').css('background-color', 'red')
})
// // 2、后代选择器
$('#btn').click(function () {
$('ul li').css('background-color', 'red')
})
三、过滤选择器
1、:eq(index) 获取到的li元素中,选择索引号为index的元素,索引号index从0开始
2、:odd 获取到的li元素中,选择索引号为奇数的元素
3、:even 获取到的li元素中,选择索引号为偶数的元素
// 1、:eq(index) 获取到的li元素中,选择索引号为index的元素,索引号index从0开始
$('#btn').click(function () {
$('li:eq(2)').css('background-color', 'red')
})
// 2、:odd 获取到的li元素中,选择索引号为奇数的元素
$('#btn').click(function () {
$('li:odd').css('background-color', 'red')
})
// 3、:even 获取到的li元素中,选择索引号为偶数的元素
$('#btn').click(function () {
$('li:even').css('background-color', 'red')
})
四、筛选选择器
1、children() 相当于子代选择器 没有参数获取所有的子元素 加参数 获取指定选择器的元素
2、find() 相当于后代选择器 必须加参数
3、siblings() 查找兄弟节点,不包括自己本身
4、parent() 查找父亲 parents() 查找祖先
5、eq(index) 相当于 :eq(index)
6、next() 找下一个兄弟
7、prev() 找上一个兄弟
8、not() 方法返回指定元素之外的元素。
// 1、children() 相当于子代选择器 没有参数获取所有的子元素 加参数 获取指定选择器的元素
$('#btn').click(function () {
console.log($('ul').children());
$('ul').children().css('background-color', 'red')
})
// 有参数
$('#btn').click(function () {
console.log($('ul').children('li'));
$('ul').children('li').css('background-color', 'red')
})
// 2、find() 相当于后代选择器 必须加参数
$('#btn').click(function () {
console.log($('ul').find('li'));
$('ul').find('li').css('background-color', 'red')
})
// 3、siblings() 查找兄弟节点,不包括自己本身
$('#btn').click(function () {
console.log($('#list3').siblings('li'));
$('#list3').siblings('li').css('background-color', 'red')
})
// 4、parent() 查找父亲 parents() 查找祖先
$('#btn').click(function () {
$('#list4').parent().css('background-color', 'red')
})
$('#btn').click(function () {
console.log($('#list4').parents());
$('#list4').parents().css('background-color', 'red')
})
// 5、eq(index) 相当于 :eq(index)
$("#btn").click(function () {
console.log($('li').eq(2));
$('li').eq(2).css('background-color', 'red')
})
// 6、next() 找下一个兄弟
$("#btn").click(function () {
console.log($('#list3').next());
$('#list3').next().css('background-color', 'red')
})
// 7、prev() 找上一个兄弟
$('#btn').click(function () {
console.log($('#list4').prev());
$('#list4').prev().css('color', 'red')
})
// 8、not() 方法返回指定元素之外的元素。
console.log($('ul').children('p'));
console.log($('ul').children().not('li'));
原文地址:https://blog.csdn.net/weixin_50370865/article/details/128070814
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_26170.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。