1,属性选择器
属性名称选择器 $("A[属性名]") 包含指定属性的选择器
属性选择器 $("A[属性名=' 值']") 包含指定属性等于指定值的选择器
复合属性选择器 $("A[属性名=' 值']") 包含多个属性条件的选择器
2,过滤选择器
:first $("li:first") 获取第一个元素
:last $("li:last") 获取最后一个元素
:eq(index) $("li:eq(2)") 选择索引号为2的元素,索引号index从0开始
:odd $("li:odd") 选择索引号为奇数的元素
:even $("li:even") 选择索引号为偶数的元素
$(function(){
var a1=$("ul>li:last")
a1.css("color","red")
var a2=$("ul>li:first").siblings().css("color","red")
var a3=$("ul>li:even")
a3.css("color","red")
var a4=$("ul>li:odd")
a4.css("color","red")
var a5=$("ul>li:eq(2)")
a5.css("color","red")
})
parent() $("li").parent() 查找父级
childen(selector) $("ul").childen("li") 相当于$("ul>li"),最近一级(亲儿子)
find(selector) $("ul").find("li") 相当于$("ul li") 后代选择器
sibilings(selector) $(".first").siblings("li") 查找兄弟节点,不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr] ) $(".last").prevAll() 查找当前元素之前所有的同辈元素
var a6=$("a[target=_blank]")
a6.css("color","red")
3,表单过滤选择器
可用元素选择器 :enabled 获得可用的元素
不可用元素选择器 :disabled 不获得可用的元素
选中选择器 :checked 获得单选,复选框
选中选择器 :selected 获得下拉框选中的元素
淘宝精品案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}
#count{
width: 300px;
height: 260px;
border: 1px pink solid;
margin: 10px auto;
overflow: hidden;//超出范围隐藏
}
#left{
width: 80px;
float: left;
}
#right{
width: 200px;
float: right;
}
#left ul li a{
display: inline-block;
width: 80px;
text-align: center;
line-height: 28px;
font-family: "楷体";
font-size: 16px;
font-weight: bold;
color: black;
background-color: bisque;
height: 28px;
border: 1px lightpink solid;
}
#left ul li a:hover{
background-color: azure;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
//当鼠标划入某一个菜单项的时候,显示对应的图片
$("#left>ul li").mouseover(function(){
//拿到鼠标划入左菜单项的索引
var index=$(this).index()
//根据索引,让右侧li的图片显示,其他隐藏
$("#right>ul li:eq("+index+")").show().siblings().hide()
});
});
</script>
</head>
<body>
<div id="count">
<div id="left">
<ul>
<li><a href="#">连衣裙</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">女靴</a></li>
<li><a href="#">铅笔裤</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">羽绒服</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><img src="img/连衣裙.jpg"/></li>
<li><img src="img/毛衣.jpg"/></li>
<li><img src="img/男棉服.jpg"/></li>
<li><img src="img/呢大衣.jpg"/></li>
<li><img src="img/牛仔裤.jpg"/></li>
<li><img src="img/女靴.jpg"/></li>
<li><img src="img/铅笔裤.jpg"/></li>
<li><img src="img/雪地靴.jpg"/></li>
<li><img src="img/羽绒服.jpg"/></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>