JQuery选择器基本概念

1.jquery的选择器和 css 很相近
css中的选择器是用 
.a{} 类选择器 
#a{} 是id选择器
a{} 是标签选择器
当然 div a.a{} 也可以使用 div>a{} 来表示


2.选择器的容错性
即使页面没有这个元素，jQuery也不会报错
那么我们可以把一大堆jquery放到页面，减少了开发时间


3.选择器的种类
1.基本选择器
id选择器   $('#p1').css('color','green');
类选择器   $('.p1').css('color', 'red');
标签选择器 $('p1').css('color', 'yellow');
* 选择器 $('*').css('border','10px solid blue' )
*选择器不推荐使用，他会遍历所有的dom节点，然后执行，并且效率低
$('body *') ==> 表示选择 body 下的所有DOM标签
多重选择器 $('#p1, .p2, div').css(xxxxx...)
表示id选择器，类选择器，标签选择器 都执行一个


2.层次选择器
E F 选择E元素的所有后代选择器------------------------叫自己的所有后代们（只能叫自己的）
E>F 选择E的子元素，子选择器--------------------------叫自己的儿子
E+next 选择E的邻居的兄弟元素，等价于.next()-------------叫自己的下一个兄弟 （只能叫下一个）
E~siblings 选择E元素后的所有的指定元素，等价于.nextAll()--叫身后的所有兄弟们（不论大小）


兄弟标签
$('p+span').css('color','red');
$('p').next().css('color','red');
身后标签
$('div~p').css('color','red'); //表示身后所有的P标签
$('div').nextAll('p').css('color','red'); //表示身后所有的P标签
$('div').nextAll().css('color','red'); //表示身后所有的标签


3.过滤选择器


1.基本过滤选择器
1.first 选取第一个元素   $('p:first')
2.last 选取最后一个元素
3.not() 选取除了指定元素之外的
4.even 偶数选择器
5.odd 奇数选择器
6.eq() 选取指定索引的元素 ==> $('p:qu(3)') 表示第四个变化
<--------以上用的是比较多的-------->
7.gt() 选取大于指定索引的元素
8.lt() 选取小于指定索引的元素
9.animated 选取正在执行动画的元素
10.header 选取h1 h2 h3 h4 h5 h6 标签 $(':header')
11.lang() 语言代码选择器，不用！！
12.root 根元素选择器 不用！！
13.target 由文档URI格式化识别代码表示的目标元素 不用！！


2.内容过滤选择器
1.contains() 选取含有文本内容的元素
2.has() 选取指定元素的元素,只能是标签或者属性或者其他
<--------以上用的是比较多的-------->
3.empty() 选取不包含子元素或者文本空元素 $('p:empty')
4.parent 选取含有子元素或者文本的元素


3.可见性选择器
1.hidden 选取所有不可见元素
2.visible 选取所有可见元素


4.属性选择器
1.[attr] 选择有此属性的选择器
2.[attr=value] 选择指定属性值的选择器
3.[attr1][sttr2] 符合型标签 ==>里面两个属性必须全部满足


5.子元素过滤选择器(基本不用)
1.:first-child 选择父元素的第一个子元素
2.:last-child 选择父元素的最后一个元素
3.:only-child 选择元素中只包含一个子元素的元素
4.:nth-child(表达式) 选择父元素中的第X个元素，x由表达式决定
5.:first-of-type 选取所有相同元素的第一个兄弟元素
6.:last-of-type 选取所有相同元素的最后一个兄弟元素
7.:nth-last-child(表达式) 廁所有他们父元素的第N个元素，从后向前数
8.:only-of-type




6.表单选择器
1.:input 
2.:text 
3.:password 
4.:radio 
5.:checkbox 
6.:submit 
7.:image 
8.:reset 
9.:button 
10.:file 
11.:hidden
hidden选择器的条件 => 1.肉眼在网页上看不到 2.网页上没有占位置
.hide{
display:none;
//以下这两种都是，肉眼看不到，但是网页上占有位置的
// opacity: 0;
// xisibility:hidden;
}
7.表单属性选择器(全都可以使用属性选择器得到)
1.enabled 选择所有可用元素
2.disabled 选择所有不可用元素
3.checked 选则所有被选中元素
4.selected 选取所有被选种元素
6.focus 选取当前获取焦点的元素 基本没有什么用！