<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器基础一</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
*{
list-style: none;
}
</style>
</head>
<body>
----->jquery 选择器
目标：
1.了解jQuery 有哪些选择器
2.熟悉基本选择器、层级选择器和属性选择器的使用
大纲：
1、jQuery 选择器简介
1）jQuery 是一个以CSS选择器为核心的JavaScript库
2）jQuery 支持CSS规范1到3的几乎所有的选择器
3）他降低了学习门槛
4）编码时 我们往往需要首先使用选择器选择元素、然后在对其进行操作
2、jQuery 选择器的分类
1）基本选择器
2）层级选择器
3）属性选择器
4）过滤选择器
5）表单选择器
3、基本选择器
1）#id z这就是id选择器举例：
$('#aa')他将会返回id值为aa 的第一个元素的jQuery 对象
注意：如果文档中包含多个id值为aa的元素、他只会返回第一个
2）element 这就是元素选择器 举例：
$('button') 他将返回文档中所有的button元素的jQuery 对象
3）.class 这就是类选择器 举例;
$('.cc') 他将会返回所有的class属性值为cc 的元素的jQuery 对象
4）* 这就是通配符选择器 举例：
$（'*'） 他将返回文档中所有的元素
5）selector1,selector2,selectorN 这就是群组选择器 举例：
$('#aa,.cc')他将会返回id值为aa 的第一个元素 ，并且会返回class属性值为cc 的元素的jQuery对象
4、层级选择器
1) ancestor descendant 后代选择器 举例：
$('.sport.football') 他将返回class为sport的元素后代中所有的class为football的元素
2)parent > child 子选择器 举例：
$('.sport>li') 他将返回class 为sport的子元素所有的li元素，
3)prev + next 紧接下一个元素 例如：
$('.sport+li') 他将返回class为sports 的紧接着的下一个li 元素
4)prev ~ siblings 选择以后的所有兄弟元素 例如：
$('.sport~li') 他将返回class为sport的兄弟元素中的li 元素
5、属性选择器
1)[attribute] 选取包含某个属性的元素 例如：
$(''[type]) 他将返回包含属性type的所有元素
2)[attribute=value] 选取属性值为特定特定值的元素 例如：
$('[type ="ccc"]') 他将返回属性type 的值为ccc 的所有元素
3)[attribute!=value] 选取属性值不为特定特定值的元素 例如：
$('[type ="aaa"]') 他将返回属性type 的值不为aaa 的所有元素
4)[attribute^=value] 选取属性值以某个值开头的元素 例如：
$('[type^="cc"]') 他将返回属性type 的值以cc 开头的所有元素
5)[attribute$=value] 选取属性值以某个值结尾的元素 例如：
$('[type$="ee"]') 他将返回属性type的值以ee结尾的所有元素
6)[attribute*=value] 选取属性值包含某个值得元素 例如
$('[type*="o"]') 他将返回属性type 的值中包含o的所有元素
7)[attrSel1][attrSel2][attrSelN] 选取同事符合多个条件元素 例如：
$('[class][type^="c"]') 他将返回有class属性 并且type属性的元素
-->
<button>按钮</button>
<ul>
<li>
<ul>
<li id="aa">无腿少女靠“身体”养活自己 月入十万不成问题</li>
<li id="cc">6岁孩子报8个兴趣班 多数家长暑假花费上万元</li>
<li class="joke">台当局再搞“金援外交” 将提供6千万美元给“友邦”</li>
<li class="joke">恐袭后中国游客重返法国 巴黎旅游业乐开花</li>
</ul>
</li>
<li>
<ul>
<li>中国海军“和平方舟”医院船首次停靠斯里兰卡</li>
<li>获八一勋章老兵:对越作战眼球被炸出 用手塞回</li>
<li>江苏省委原书记离世 三任总书记四任总理哀悼</li>
<li>jQuery 2 将不再支持ie6/7/8</li>
</ul>
</li>
</ul>
</body>
<script>
$(document).ready(function () {
$('button').click(function () {
// $('#aa').css('color','blue');
// $('#cc').css('color','red');
// $('.joke').css('color','red');
$('#aa,.joke').css('color','yellow');
});
});
</script>
</html>
网友评论