一、符合CSS规范的选择器
问题一：以下是一段HTML结构，通过jQuery的基本选择器，我们有多少方法可以获取？<div id="left" class="may"></div>
$('.may') //类选择器—— document.getElementsByClassName('may');
$('#left')//ID选择器——document.getElementById('left');
$("div")// 元素选择器——document.getElementsByTagName('div');
$("*") //全选择器 ——document.getElementsByTagName(*);
层级选择器
问题二：通过选择器方法，判断选择器名称
$( "parent > child" )//子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。
$("prev + next")//后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
$("ancestor descendant")//相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings")//一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
上面这几种选择器和css中的选择器非常相似，除此之外，jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器
二、筛选选择器
筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头
2.1基本筛选选择器
基本筛选选择器针对的都是元素DOM节点
2.2内容筛选选择器
内容筛选选择器，体现在筛选它所包含的子元素或者文本内容上
- :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
- :parent与:empty是相反的，两者所涉及的子元素，包括文本节点
2.3可见性筛选选择器
元素隐藏：
- CSS display的值是none。
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的，该元素是不会在页面上显示
- CSS visibility的值是hidden
- CSS opacity的指是0
元素显示： - 如果元素中占据文档中一定的空间,元素被认为是可见的
2.元素的visibility: hidden 或 opacity: 0被认为是可见的
2.4属性筛选选择器
属性选择器让你可以基于属性来定位一个元素。
2.5元素筛选选择器
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child').css("color", "#CD00CD”);
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素
$('.first-div a:last-child').css("color", "red”);
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child'.css("color", "blue”);
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD”);
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)').css("color", "red”);
2.6子元素筛选选择器
2.7表单元素选择器
表单元素
<form>
<input type="text" value="text类型"/>
<input type="password" value="password"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="submit" />
<input type="image" />
<input type="reset" />
<input type="button" value="Button" />
<input type="file" />
</form>
除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]’)
2.8表单对象属性筛选选择器
表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选
注意事项：
- 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
2.9特殊选择器this
this，是JavaScript中的关键字，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc
var imooc = {
name:"慕课网",
getName:function(){
//this,就是imooc对象
return this.name;
}
}
imooc.getName(); //慕课网
在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用：给页面一个P元素绑定一个事件: 通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可
p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);
把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})
