1.jQuery选择器
1.1 jQuery基础选择器
$("选择器") //css怎么写 括号里面就怎么写
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
$(function(){
console.log($(".nav"));
console.log($("ul li"));
})
</script>
2. jQuery隐式迭代
隐式迭代:把匹配的所有元素内部进行遍历循环,给每一个元素添加方法。
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 1.获取四个div元素
console.log($("div"));
// 2.设置div背景色为粉色 jQuery对象不能使用style
$("div").css("background", "pink");
$("ul li").css("color", "red");
</script>
3. jQuery筛选选择器
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function(){
// 选择第一个 last选择最后一个
$("ul li:first").css("color", "red");
// :eq(index) 选择特定的某个 从0开始
$("ul li:eq(2)").css("color", "blue");
// :odd :even 选择奇数行和偶数行
$("ol li:odd").css("color", "pink");
})
</script>
4.jQuery筛选方法(重点)
parent():返回最近一级的父亲元素,不会返回爷爷元素。
children():返回亲儿子,也就是最近一级,相当于css中的 ul>li。
find():返回所有符合的孩子, 相当于css中的ul li。
siblings(): 返回除了自己之外的所有兄弟元素,适用于排除自己的操作。
:eq()和eq()的区别:
当括号内使用变量时:
var index = 2;
$("div:eq("+index+")");
$("div").eq(index);
经常使用eq方法。
<div class="father">
<div class="son"></div>
</div>
<div class="nav">
<p>我是皮</p>
<div>
<p>我是p</p>
</div>
</div>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li class="item">我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<div class="current">current</div>
<div>nocurrent</div>
<script>
// 注意一下 筛选方法都是方法 带括号
$(function(){
// 父 parent() 返回的是最近一级的父级元素
console.log( $(".son").parent());
$(".son").parent();
// 子
// (1)亲儿子
$(".nav").children("p").css("color", "red");
// (2)所有孩子
$(".nav").find("p").css("background", "pink");
// 兄
// (1)选择除了自己之外的其他所有兄弟
$("ol .item").siblings().css("color", "red");
// (2)nextAll 选择当前元素之后的所有兄弟
$("ol .item").nextAll().css("background", "pink");
// (3)prevAll 选择当前元素之前的所有兄弟
// 第n个元素
// (1)使用eq选择器
$("ul li:eq(2)").css("background", "blue");
// (2)使用eq选择方法
$("ul li").eq(2).css("color", "white");
// 判断是否有类名
console.log($("div").eq(4).hasClass("current"));
})
</script>
5.jQuery里的排他思想
用到了siblings()方法的本质:改变除了自己之外的其他所有兄弟。
<button>快捷</button>
<button>快捷</button>
<button>快捷</button>
<button>快捷</button>
<button>快捷</button>
<button>快捷</button>
<script>
$(function(){
$("button").click(function(){
$(this).css("background", "blue");
$(this).siblings().css("background", "");
})
})
</script>