首页 > 代码库 > jQuery选择器

jQuery选择器

2024-08-12 00:41:59   228人阅读

选择器是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")选中所有可显示的元素

jQuery选择器


联系
我们