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节点
部分资料来源:慕课网