第二章.jquery选择器
一、jquery里面的选择器
1.筛选选择器（过滤选择器）
// : first $(li: first") 获取第一个元素
// : last $(li: last') 获取最后一个元素
// : eq(index) $("li:eq(2)") 获取到的1i元素中，选择索引号为2的元素，引号index从0开始。
// : odd $("li:odd") 获取到的i元素中，选择索引号为奇数的元素
// : even $("li:even") 获取到的i元素中，选择索引号为偶数的元素
案列1：
<body>
<div class="box">
<div class="item active">
<div class="title">标题一</div>
<div class="content">内容一</div>
</div>
<div class="item">
<div class="title">标题二</div>
<div class="content">内容二</div>
</div>
<div class="item">
<div class="title">标题三</div>
<div class="content">内容三</div>
</div>
<div class="item">
<div class="title">标题四</div>
<div class="content">内容四</div>
</div>
</div>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>
<p>你好</p>
</body>
<script>
$(function () {
/*
1.基本过滤选择器
2.可见性过滤选择器
3.表单过滤选择器
4.内容过滤选择器，子元素过滤选择器
*/
//选中第一项，背景色改成pink
$(".item:first").css("backgroundColor", "pink")
//最后一项，改成绿色
$(".item:last").css("backgroundColor", "green")
//偶数个背景色为灰色
$(".item:even").css("backgroundColor", "grey")
//奇数个背景色为黄色
$(".item:odd").css("backgroundColor", "yellow")
//取反
$(".item:not(.active)").css("backgroundColor", "red")
//索引相关的过滤选择
//找到第二个item项
$(".item:eq(1)").css("color", "white")
// 找到索引大于2的项
$(".item:gt(1)").css("color", "blue")
//可见性过滤选择器
//点击按钮的时候，控制p元素的显示和隐藏
$('#showBtn').click(function () {
$('p:hidden').show();
})
$('#hideBtn').click(function () {
$('p:visible').hide();
})
})
</script>
二、jquery里面的方法（晒选方法上）
<body>
<div class="yey">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>你好</p>
<div>
<p>你好吗</p>
</div>
</div>
</body>
<script>
// 语法 用法 说明
// parent() $("li").parent();查找父级
// children(selector) $("ul").children("li") 相当于$("ul>li")，最近一 - 级(亲儿子)
// find(selector) $("u1").find("li");相当于$("ul li"), 后代选择器
// siblings(selector) $(" . first").siblings("li");查找兄弟节点，不包括自己本身
// nextAll([expr]) $(" .first").nextA1l() 查找当前元素之后所有的同辈元素
// prevtAll([expr]) $(" .last").prevA1l() 查找当前元素之前所有的同辈元素
// hasClass(class) $('div').hasClass("protected") 检查当前的元素是否含有某个特定的类,如 果有，则返回true
// eq(index) $("1i").eq(2); 相当于$("li:eq(2)"), index从0开始
$(function () {
// 1.父 parent() 返回的是最近一级父元素
console.log($('.son').parent());
// 2.子
// (1)亲儿子 children() 类似于子代选择器 ul>li
$('.nav').children('p').css('color', 'red');
// (2).可以选择里面的所有元素 find() 类似于后代选择器
$('.nav').find('p').css('color', 'yellow');
})
</script>
方法下：
<body>
<ol>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li class="item">我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ol>
<ul>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ul>
<div class="current">俺有current</div>
<div>俺木有current</div>
<script>
// 注意一下都是方法 带括号
$(function () {
// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
$("ol .item").siblings("li").css("color", "red");
// 2. 第n个元素
var index = 2;
// (1) 我们可以利用选择器的方式选择
// $("ul li:eq(2)").css("color", "blue");
// $("ul li:eq("+index+")").css("color", "blue");
// (2) 我们可以利用选择方法的方式选择 更推荐这种写法
// $("ul li").eq(2).css("color", "blue");
// $("ul li").eq(index).css("color", "blue");
// 3. 判断是否有某个类名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
//4.查找元素前后除自身的所有元素
// 当前元素的后面所有元素
$('ol .item').nextAll('li').css('color','blue');
// 当前元素之前的所有元素
$('ol .item').prevAll("li").css('color','yellow')
});
</script>
</body>
浙公网安备 33010602011771号