jQuery选择器

Posted 2020-08-06

选择器是jQuery核心，使用选择器直接修改页面元素样式

 

ID选择器：一般是返回一个固定的元素

$(function (){

$(‘#id‘).css(‘属性如color‘,‘属性值‘);

})

 

元素名称选择器 一般会返回多个元素

$(function (){

$(‘元素名称如div‘).css(‘属性color‘,‘属性值‘);

})

//如果有多个元素，如有多个div，则会修改所有div元素的属性

 

class选择器 //一般会返回多个元素

$(function (){

$(‘.class名称‘).css(‘属性color‘,‘属性值‘);

})

 

$(‘#div > p‘).css(‘color‘,‘red‘);

//改变div下子元素p的颜色为红

 

属性选择器

$("input[type=‘text‘]"); //input下type属性值为text的元素

$("a[href^=‘http://‘]"); 以http://开始的所有元素

$("a[href$=‘.com‘]"); 以.com结尾的所有元素

$("input[type*]"); 所有input下type属性的元素

$("selector[attribute]"); 选择包含给定属性的所有元素

$("input[type=‘text‘][id=‘1‘]");input下type为text,id为1的元素

$("input[type=‘text‘][id=‘1‘],a[href^=‘http://‘][href$=‘.com‘]");

//input下type=text,id=1，a下href以http://开头，.com结尾的元素

 

位置选择器

$("li:first");//选择第一个li标签

$("div:last");选择最后一个div

$("p:odd");选奇数//jQuery中所有元素从0开始，所以第2个p第4个p等会被选中，

而不是第1个第3个……

$("input[type=‘text‘]:even");选择input下type为text的偶数行

$("a:eq(2)");获取第3个a，eq也是从0开始

$("li:gt(2)");第3个li以后的位置，不包含第3个

$("p:lt(1)");第2个段落前的元素，不包含2

 

层叠选择器

$("ul:fitst li")第一个ul下所有li元素

$("ul:first>li")第一个ul下的子li,如果第一个ul里包含另外一个子ul，则只选中第一个ul

下的子li，子ul里的li则不被选中

$("form>div:eq(1)+*")表中下的第二个子div相邻的第一个，也只会选择一个，任意元素

$("form>div:eq(1)~div ")选则表单下第二个div后的所有同级别div

 

表单选择器

$("p:contatins(is)")选中包含is字母的p锻落，contatins获取包含指定内容的组件

$("div:has(input)")选中拥有input的所有div

$("div input")选中的是div下的所有input

$("*:parent")获取所有非空的元素, parent：非空元素

$("*:empty")选中所有空元素，empty空元素：没有子节点，子标签的组件

如：<input type="text" />这就是一个空元素

$(":input")选中所有input表单元素，包括input type属性为selected、button元素

冒号：前什么都没有相当于*

$(":button")获取所有 button元素

$(":button,:submit,:reset")获取Button ，submit ，reset元素

$(":disabled" )等价$("*[disabled=‘disabled‘‘]")选中所有不可用表单 元素

$(":checked")J等价$("*[checked=‘checked‘]")获取被选中的单选框或复选框

 

子元素选择器、可见性选择器

$("li:first-child")选中ul下第一个li元素，如果ul下第一个元素是div，

第二个是li,则会跳过此ul，而只会选择ul第一个元素是li的位置

$("li:last-child")选中最后一个出现的li元素，如果有多个li是多个ul的最后一个节点

则选中全部li

$("ul>li:last")先选中ul下的所有li，然后在选择其中里面最后一个li

.("li:nth-child(3)"),选中所有父节点ul开始数所有第3个元素li，

即有多个ul，则会选中多个ul下的第三个li

若nth-child(1)时,ul下第一个元素不是li，则会依次选择向下选择，直到ul下第一个的li元素

nth-child是从1开始，以前的eq则是从0开始计算元素

$(":visible")选中所有可显示的元素