1.jQuery的基本选择器
id选择器：一个用来查找的ID，即元素的id属性
$( "#id" )
类选择器，顾名思义，通过class样式类名来获取节点
描述：
$( ".class" )
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选
如：
$(".clsaa名称").css("border","3px solid red");
元素选择器：根据给定（html）标记名称选择所有的元素
描述：
$( "element" )
搜索指定元素标签名的所有节点，这个是一个合集的操作。
在CSS中，经常会在第一行写下这样一段样式
* {padding: 0; margin: 0;}
通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素
描述：
$( "*" )
抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到
不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:
- IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
- getElementById的参数在IE8及较低的版本不区分大小写
- IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
- IE8及较低的版本，浏览器不支持getElementsByClassName
看到了吧，作为一名合格的前端不是那么简单的，就一个基本的选择器上面都需要做这么多兼容，幸好有jQuery的出现，让我们省了很多功夫，
2层级选择器
$( "parent > child" )
子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant")
后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
$("prev + next")
相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings")
一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant")
后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
$("prev + next")
相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings")
一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
仔细观察层级选择器之间还是有很多相似与不同点
- 层级选择器都有一个参考节点
- 后代选择器包含子选择器的选择的内容
- 一般兄弟选择器包含相邻兄弟选择的内容
- 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
3jQuery选择器之基本筛选选择器
$(":first") 匹配第一个元素 $（":last"） 匹配最后一个元素 $(":not(selector)") 一个用来过滤的的选择器，选择所有元素去除不匹配给定的选择器元素 $(":eq(index)") 在匹配的集合中选择索引值为index的元素 $(":gt(index)") 选择匹配集合中所有大于给定index(索引值) $(":even") 选取索引值为偶数的元素，从0开始计数 $(":odd") 选取索引值为奇数的元素，从0开始计数 $(":lt(index)") 选取匹配集合中所有索引值小于给定index参数的元素 $(":header") 选择所有标题元素，像h1,h2,h3等 $(":lang(language)") 选择指定语言的所有元素 $(":root") 选择该文档的根元素 $(":animated") 选择所有正在执行动画效果的元素
遇到一些简称的代码，去查清楚全称，记忆会更牢固，就比如eq全称是equal(意思是“等于”)；gt全称是greater than(意思是大于)；lt全称是less than(意思是小于)。
$("input:not(:checked)+p").css("background-color", "red");
选择input中没有被选中的元素，然后找出这些元素的直接兄弟元素；你把这个选择拆开看就好懂了
基本筛选器
:first/:last/:even/:odd
div:first
:even
:odd
:even
:odd
:even
div:last
:odd
<script type="text/javascript">
//找到第一个div
$(".div:first").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even").css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 选择所引值为奇数的元素，从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
</script>
:eq/:gt/:lt
:lt(3)
:lt(3)
:eq(2)
:gt(3)
:gt(3)
<script type="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
</script>
:not
Aaron
慕课
其他
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked)+p").css("background-color", "#CD00CD");
</script>
4jQuery选择器内容筛选选择器
1. $(":contains(text)")，匹配中包含文本text的元素 2. $(":parent"),匹配中所有含有子元素或者文本的元素 3. $(":empty"),匹配中没有子元素的元素 4. $(":has(selector)"),匹配中包含指定选择器元素的元素
- :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
- :parent与:empty是相反的，两者所涉及的子元素，包括文本节点
5JQ选择器之可见性筛选选择器
元素有显示状态与隐藏状态，jq根据元素的状态扩展了可见性筛选选择器:visible与:hidden 选择器 描述 $(":visible") 选择所有显示的元素 $(":hidden") 选择所有隐藏的元素 这两个选择器是jq延伸出的，虽然看上去比较简单，但是元素可见性依赖于使用的样式 :hidden选择器，不仅仅包含样式是 display="none"的元素，还包括隐藏表单、visibility等等 以下几种方式可以隐藏一个元素： 1.css display的值是none； 2.type="hidden"的表单元素； 3.宽度和高度都显式的设置为0； 4.一个祖先元素是隐藏的，该元素不会在页面上显示； 5.css visibility的值是hidden； 6.css opacity的值是0 如果元素占据文档中一定空间，那么元素被认为是可见的 可见元素的宽度或者高度是大于0 元素的visibility:hidden或者opacity:0被认为是可见的，因为他们仍然占用空间布局 不在文档中的元素是被认为不可见得，如果他们被插入到文档中，jq不能知道他们是否可见，因为元素的可见性依赖于适用的样式。
6属性筛选选择器：
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。
$("[attribute|='value']") 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素
$("[attribute*='value']") 选择指定属性具有包含一个给定的字符串的元素（选择给定的属性是以包含某些值的元素）
$("[attribute~='value']") 选择指定属性用空格分隔的值中包含一个给定值的元素
$("[attribute='value']") 选择指定属性是给定值的元素
$("[attribute!='value']") 选择不存在指定属性，或者指定的属性值不等于给定值的元素
$("[attribute^='value']") 选择指定属性是以给定字符串开始的元素
$("[attribute$='value']") 选择指定属性是以给定字符串结尾的元素，这个比较是区分大小写的
$("[attribute]") 选择所有具有指定属性的元素，该属性可以是任何值
$("[attributeFilter1][attributeFilterN]") 选择匹配所有指定的属性筛选器的元素 具体如下：
$('div[name=p1]')： //查找所有div中，属性name=p1的div元素
$('div[p2]')： //查找所有div中，有属性p2的div元素
$('div[name|="-"]')//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素，或以连字符‘-’相连的前缀为字符“-”的div
$('div[name~="a"]') //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素，以空格风格的属性中有属性值a
$('div[name^=imooc]') //查找所有div中，属性name的值是用imooc开头的
$('div[name$=imooc]') //查找所有div中，属性name的值是用imooc结尾的
$('div[name*="test"]')//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[testattr!="true"]')//查找所有div中，有属性testattr中的值没有包含"true"的div
7子元素筛选选择器
子元素筛选选择器不常使用。 1.$(":first-child")选择所有父级元素下的第一个元素。 2.$(":last-child")选择所有父级元素下的最后一个子元素 3.$(":only-child")如果某个元素是其父元素的唯一子元素，那么它就会被选中 4.$(":nth-child")选择的父元素下面的第几个子元素 5.$(":nth-last-child")选择父元素下面的倒数第几个元素
注意事项：
- :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
- 如果子元素只有一个的话，:first-child与:last-child是同一个
- :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
- jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
- nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
8表单选择器
$(':input') 选择所有input,text,area,select和button元素
$(':text') 匹配所有文本框
$(':password') 匹配所有密码框
$(':radio') 匹配所有单选按钮
$(':checkbox') 匹配所有复选框
$(':submit') 匹配所有提交按钮
$(':image') 匹配所有图像域
$(':reset') 匹配所有重置按钮
$(':button') 匹配所有按钮
$(':file') 匹配所有文本域
除了input筛选选择器，几乎每一个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如：$(':password') = = $('[type = password]')
9表单对象属性 选择器
表单对象属性选择器也是专门针对 表单元素的选择器 可以附加在其他选择器的后面
对表单元素进行筛选
$(":enabled") 选取可以使用的表单元素
$(":disabled")选取不可以使用的表单元素
$(":checked")选取被选择中的<input>
$(":selected")选取被选择中的<option>元素
注意事项：
- 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
10jQuery选择器之特殊选择器this
相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？
this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者
下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc
var aaa= {
name:"name值",
getName:function(){
//this,就是aaa对象
return this.name;
}
}
imooc.getName(); //name值
当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料
同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用
假如给页面一个P元素绑定一个事件:
p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);
通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可
this.style.color = "red"
但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象
换成jQuery的做法：
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})
通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了
总体：
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
