jQuery选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery选择器相关的知识,希望对你有一定的参考价值。

选择器是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选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery选择器都有哪些

[ jquery 选择器 总览 ] jquery选择器总览

jQuery ---[jQuery选择器,jQuery对象的遍历]

jQuery选择器

jQuery选择器概述

jQuery选择器介绍:基本选择器层次选择器过滤选择器表单选择器