jQuery选择器
1.学习jQyery选择器的原因
考虑兼容性的话,js里面提供的选择DOM的方法很少,只有两个:
document.getElementById(); | 通过id属性获取指定元素返回唯一的DOM对象 |
---|---|
document.getElementsByTagName(); | 通过标签名获取指定元素返回DOM对象数组 |
2.什么是jQuery选择器
jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。
3.强大的jQuery选择器
强大的原因:jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。
各种选择器之间可以相互代替,所以,平时真正用到的只是最常用的选择器。
4.基本选择器
符号(名称) | 说明 | 用法 |
---|---|---|
# | Id选择器 | $(“#btnShow”).css(“color”, “red”); |
选择id为btnShow的一个元素 | ||
. | 类选择器 | $(“.liItem”).css(“color”, “red”); |
选择含有类liItem的所有元素 | ||
element | 标签选择器 | $(“li”).css(“color”, “red”); |
选择标签名为li的所有元素 |
5.层级选择器
符号(名称) | 说明 | 用法 |
---|---|---|
空格 | 后代选择器 | $(“#j_wrap li”).css(“color”, “red”); |
选择id为j_wrap的元素的所有后代元素li | ||
> | 子代选择器 | $(“#j_wrap > ul > li”).css(“color”, “red”); |
选择id为j_wrap的元素的所有子元素ul的所有子元素li |
6.筛选选择器
符号(名称) | 说明 | 用法 |
---|---|---|
find(selector) | 查找指定元素的所有后代元素 | $(“#j_wrap”).find(“li”).css(“color”, “red”); |
选择id为j_wrap的所有后代元素li | ||
children() | 查找指定元素的直接子元素 | $(“#j_wrap”).children(“ul”).css(“color”, “red”); |
选择id为j_wrap的所有子代元素ul | ||
siblings() | 查找所有兄弟元素 | $(“#j_liItem”).siblings().css(“color”, “red”); |
选择id为j_liItem的所有兄弟元素 | ||
parent() | 查找父元素 | $(“#j_liItem”).parent(“ul”).css(“color”, “red”); |
选择id为j_liItem的父元素 |
综合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
background:black;
}
.box{
width: 630px;
height: 394px;
border: 1px solid white;
padding: 10px 0 0 10px;
margin: 100px auto;
}
.box li{
float: left;
margin: 0 10px 10px 0;
}
img{
display: block;
border: 0;
}
</style>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""></a></li>
</ul>
</div>
<script>
$(function () {
$(".box").find("li").mouseenter(function () {
$(this).css("opacity",1).siblings("li").css("opacity",0.5);
});
$(".box").find("li").mouseleave(function () {
$("li").css("opacity",1);
});
})
</script>
</body>
</html>
源图片:
效果图:
这个是作者自己做的一个简单的小案例,还有更多有趣的案例等着大家去探索