jQuery选择器
jq转DOM
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
DOM转jq
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
jQuery选择器
$("#id") = getElementById
$(".className") = getElementsByClassName
$("TagName") = getElementsByTagName
$("*") = getElementsByTagName(*)
层级选择器
子选择器是选择直接子元素，而后代选择器是包括很多，除了子元素还包括子元素的子元素
相邻兄弟选择器是选择紧邻之后的元素，而一般选择器选择的是多的，只要是同一个父亲下，并可以过滤
jq的筛选选择器 每一个前面都要加：
$(" : ");
-
:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
-
gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始
-
even,odd 索引是从0开始的所以选择出来的第一个索引是0是偶数，而他对应的是第一个却是奇数
内容筛选选择器
-
:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
-
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
-
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点
比如：
//查找所有class='div'中DOM元素中包含"ahh"的元素节点
$(".div:contains(':ahh')");
//查找所有class='div'中DOM元素中包含"span"的元素节点
$(".div:has(span)");
//选择a元素包含的所有子元素或者文本
$("a:parent");
//找到a元素下面的所有空节点(没有子元素)
$("a:empty");
可见性筛选选择器
隐藏一个元素的方法有：
-
CSS display的值是none。
-
type="hidden"的表单元素。
-
宽度和高度都显式设置为0。
-
一个祖先元素是隐藏的，该元素是不会在页面上显示
-
CSS visibility的值是hidden
-
CSS opacity的指是0
查找所有是显示状态的元素：$(" ：visible"）;
查找所有是隐藏状态的元素：$(" ：hidden"）;
属性筛选选择器
制定元素属性筛选而不管他的值是什么
$("div[name='test']") name为test的
$("div[name*='test']") name包含test的
$("div[name]") 含有name属性的
$("div[name~='test']") name有空格且有test的
$("div[name!='test']") name不为test的
$("div[name^='test']") name开头为test的
$("div[name$='test']") name结尾为test的
$("div[id][name^='test']") 有id属性且name开头为test的
对子元素的筛选选择器
-
: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) 的区别前者是从前往后计算，后者从后往前计算
$('.一个classname 需要匹配的属性: first-child')
筛选选择器用来筛选其前面已匹配的元素集合.根据之前匹配的元素在进一步筛选
first-child 老大筛选器 //在匹配的集合中选择是家中排行老大的那些
last-child 老幺筛选器 //在匹配的集合中选择是家中排行最后的那些
only-child 独生子女筛选器 //在匹配的集合中选择是家中独生子女的那些
nth-child(n) 排行老几筛选器 //在匹配的集合中选择是家中排行第n的那些
nth-last-child(n) 排行倒数老几筛选器 //在匹配的集合中选择是家中排行倒数第n的那些
表单属性筛选选择器
专门给表单属性进行筛选的，更加方便但同时都可以被属性选择器代替 用type这个属性可以获得每一个
表单对象属性筛选器
还是对表单进行筛选，根据主要应用到一个输入框的可用不可用属性
和单选框复选框的被选中状态进行筛选 可以附加在其他选择器的后面
-
选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
-
在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
特殊选择器$(this)
this 在对象里面使用 代表当前对象 是动态的
$('#test2').click(function(){
//通过包装成jQuery对象改变颜色
$(this).css('color','blue');
})
$(this)就代表$('#test2')；
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
分析几段段复杂的选择器：
$("#menu_con div .tag dd > p:first-child")
从id为menu_con 下面包含的节点中找到div下面的class=tag的下面所有的dd节点下面直接子元素中的第一个p
$("#menu_con div .tag dd > a:lt(4)")
从id为menu_con 下面的所有div中class是tag的下面的所有dd里面的直接元素中索引小于4的那些a
$(".tag:first a:contains('更多')")
取得从第一个class是tag 中包含’更多‘的a节点
部分资料来源：慕课网
