1.什么是JQuery选择器：
JQuery选择器类似于CSS选择器，用来选取网页中的元素。
2.JQuery选择器
（1）类CSS选择器：
基本选择器
层次选择器
属性选择器
（2）过滤选择器
基本过滤选择器
可见性过过滤选择
3.基本选择器：
标签选择器 element 根据给定的标签名匹配元素
类选择器 .class 根据给定的class匹配元素
ID选择器 #id 根据给定的id匹配元素
并集选择器 selector1,selector2 将每一个选择器匹配的元素合并后
一起返回
交集选择器 element，class或element#id 匹配指定class或id的某
元素或元素集合
全局选择器 * 匹配所有元素
4.层次选择器：层次选择器通过DOM元素之间的层次关系来获取元素
（1）后代选择器 选择器1 选择器2 中间用空格隔开 只要是后代都可以
（2）子选择器 选择器1>选择器2 之间用>隔开 两个选择器之间必须是父子关系
（3）相邻选择器 选择器1+选择器2 中间用+隔开 两个选择器必须是同辈相邻
（4）同辈选择器 选择器1~选择器2 中间用~隔开 两个选择器同辈，2在1之后
5.属性选择器：属性选择器同通过HTML元素的属性来选取元素
[attribute] 选取包含给定属性的元素
[attribute=value] 选取等于给定属性是某个特定值的元素
[attribute!=value] 选取不等于给定属性是某个特定值的元素
[attribute^=value] 选取给定属性是以某些特定值开始的元素
[attribute$=value] 选取给定属性是以某些特定值结尾的元素
[attribute*=value] 选取给定属性是以包含某些属性值的元素
[selector][selector2][selectorN] 选取满足多个条件的复合属性的元素
6.过滤选择器：过滤选择器通过特定的过滤规则来筛选元素，语法特点使用“：”
7.过滤选择器的分类：
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器，子元素过滤选择器......
8.基本过滤选择器：
：first 选取第一个元素
：last 选取最后一个元素
：even 选取索引是偶数的所有元素（index从0开始）
：odd 选取索引是奇数的所有元素（index从0开始）
：eq（index） 选取索引等于index的元素（index从0开始）
：gt（index） 选取索引大于index的元素（index从0开始）
：lt（index） 选取索引小于index的元素（index从0开始）
9.基本过滤选择器的特殊应用：
：not（selector） 选取去除所有与给定选择器匹配的元素
：header 选取所有标题元素，如h1-h6
：focus 选取当前获取焦点的元素
10.可见性过滤选择器：可见性过滤选择器可以通过元素显示状态来获取元素
：visible 选取所有可见的元素
：hidden 选取所有隐藏的元素
选择器详述：
（1）6种基本选择器的使用
|
名称 |
语法构成 |
描述 |
示例 |
|
标签选择器 |
element |
根据给定的标签名匹配元素 |
$("h2" )选取所有h2元素 |
|
类选择器 |
.class |
根据给定的class匹配元素 |
$(" .title")选取所有class为title的元素 |
|
ID选择器 |
#id |
根据给定的id匹配元素 |
$(" #title")选取id为title的元素 |
|
并集选择器 |
selector1,selector2,...,selectorN |
将每一个选择器匹配的元素合并后一起返回 |
$("div,p,.title" )选取所有div、p和拥有class为title的元素 |
|
交集选择器 |
element.class或element#id |
匹配指定class或id的某元素或元素集合 |
$("h2.title")选取所有拥有class为title的h2元素 |
|
全局选择器 |
* |
匹配所有元素 |
$("*" )选取所有元素 |
（2）层级选择器
|
名称 |
语法构成 |
描述 |
|
后代选择器 |
ancestor descendant |
选取ancestor元素里的所有descendant（后代）元素 |
|
子选择器 |
parent>child |
选取parent元素下的child（子）元素 |
|
相邻元素选择器 |
prev+next |
选取紧邻prev元素之后的next元素 |
|
同辈元素选择器 |
prev~sibings |
选取prev元素之后的所有siblings元素 |
（3）属性选择器[属性]：!表不等于、^表开始、$表结束、*表包含、多个属性用多个[]
|
名称 |
语法构成 |
描述 |
示例 |
|
属性选择器 |
[attribute] |
选取包含给定属性的元素 |
$(" [href]" )选取含有href属性的元素 |
|
[attribute=value] |
选取等于给定属性是某个特定值的元素 |
$(" [href ='#']" )选取href属性值为“#”的元素 |
|
|
[attribute !=value] |
选取不等于给定属性是某个特定值的元素 |
$(" [href !='#']" )选取href属性值不为“#”的元素 |
|
|
[attribute^=value] |
选取给定属性是以某些特定值开始的元素 |
$(" [href^='en']" )选取href属性值以en开头的元素 |
|
|
[attribute$=value] |
选取给定属性是以某些特定值结尾的元素 |
$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
|
|
[attribute*=value] |
选取给定属性是以包含某些值的元素 |
$(" [href* ='txt']" )选取href属性值中含有txt的元素 |
|
|
[selector] [selector2] [selectorN] |
选取满足多个条件的复合属性的元素 |
$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素 |
（4）过滤选择器【使用：】
1) 基本过滤选择器
2) 可见性过滤选择器
3) 表单对象过滤选择器
4) 内容过滤选择器、子元素过滤选择器……
基本过滤选择器
|
名称 |
语法构成 |
描述 |
示例 |
|
基本过滤选择器 |
:first |
选取第一个元素 |
$(" li:first" )选取所有<li>元素中的第一个<li>元素 |
|
:last |
选取最后一个元素 |
$(" li:last" )选取所有<li>元素中的最后一个<li>元素 |
|
|
:even |
选取索引是偶数的所有元素（index从0开始） |
$(" li:even" )选取索引是偶数的所有<li>元素 |
|
|
:odd |
选取索引是奇数的所有元素（index从0开始） |
$(" li:odd" )选取索引是奇数的所有<li>元素 |
|
|
:eq(index) |
选取索引等于index的元素（index从0开始） |
$("li:eq(1)" )选取索引等于1的<li>元素 |
|
|
:gt(index) |
选取索引大于index的元素（index从0开始） |
$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1） |
|
|
:lt(index) |
选取索引小于index的元素（index从0开始） |
$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1） |
|
|
:not(selector) |
选取去除所有与给定选择器匹配的元素 |
$(" li:not(.three)" )选取class不是three的元素 |
|
|
:header |
选取所有标题元素，如h1~h6 |
$(":header" )选取网页中所有标题元素 |
|
|
:focus |
选取当前获取焦点的元素 |
$(":focus" )选取当前获取焦点的元素 |
可见性过滤选择器
|
名称 |
语法构成 |
描述 |
示例 |
|
可见性过滤选择器 |
:visible |
选取所有可见的元素 |
$(":visible" )选取所有可见的元素 |
|
:hidden |
选取所有隐藏的元素 |
$(":hidden" ) 选取所有隐藏的元素 |
5)
$(document).ready(function(){
//6种基本选择器的使用
//标签选择器
//$(“div”).css(“color”,”#f00”);
//类选择器
//$(“.two”).css({“color”:”#0f0”}); //传递一个对象
//id选择器
//$(“#myDiv”).css(“color”,”#f00”);
//全局选择器【*】
//$(“*”).css(“color”,”#f00”);
//并集选择器【逗号】
//$(“div,.two,#myDiv”).css(“color”,”#f00”);
//交集选择器【直接连接】
//$(“div#myDiv”).css(“color”,”#f00”);
//层级选择器
//后代选择器【空格】:选取所有子元素
//$(“.ulist li”).css(“color”,”#f00”);
//子选择器【父亲>儿子】：选取直接子元素
//$(“.ulist>li”).css(“color”,”#f00”);
//相邻元素选择器【+】：下一个class=two的兄弟节点
//$(“#myDiv+.two”).css(“color”,”#f00”);
//同辈元素选择器【~】：所有class=two的兄弟节点
//$(“#myDiv~.two”).css(“color”,”#f00”);
/*后代和子代选择器同时使用时效果明显。*/
//属性选择器
//只要包含class属性的都会被选中
//$(“[class]”).css(“color”,”#f00”);
//属性选择器：!表不等于、^表开始、$表结束、*表包含、多个属性用多个[]
});
使用JQuery制作树形菜单
<div class=”myMenu” width=”100px” height=”500px”>
<ul class=”menuUl”>
<li class=”menuBar”>名著</li>
<li class=”menuContent”>
<ul>
<li class=”myLi”>西游记</li>
<li class=”myLi”>水浒传</li>
<li class=”myLi”>红楼梦</li>
<li class=”myLi”>三国演义</li>
</ul>
</li>
</ul>
</div>
.content{display:none;}
//文档加载完成取匿名函数
$(document).ready(function(){
//给menuBar绑定click事件
$(“.menuBar”).click(test);
function test(){
//alert(this.innerHTML);
//将this转换成JQuery对象,this指的是小说，他的下一个元素是content
//$(this).next().show();//只能点关不了
$(this).next().toggle(); //this的下一个切换
//$(this).next().slideDown();//向下展开
}
});