02、jQuery选择器
2021-04-06 23:26
标签:开头 ted 子div dex 推荐 通配符选择器 ast 群组 index find( expr | object | element ) children([expr]) parent([expr]) next([expr]) prev([expr]) eq(num) siblings([expr]) filter( expr | object | element | fn) 注:num表示数字,[]里面表示可选,ecpr表示字符串,object表示现有的jquery对象(用jquery选择的对象),element表示Dom元素名,fn表示函数(用来作为测试元素的集合) 02、jQuery选择器 标签:开头 ted 子div dex 推荐 通配符选择器 ast 群组 index 原文地址:https://www.cnblogs.com/mingliangge/p/12491483.html基本选择器
通配符选择器:var all = $(‘*‘); //根据 $(‘*‘) 获取。
元素选择器:var ele = $(‘div‘); //根据 $(‘元素名‘) 获取。如果给好几个元素绑定点击事件,$(this).index()可以确认点击的是第几个元素。
类选择器:var cla = $(‘.bb‘); //根据 $(‘.类名‘) 获取。
id选择器 :var iid = $(‘#idname‘); //根据 $(‘#id名‘) 获取
群组选择器:var duo = $(‘#dd, .aa‘); //可根据多个不同的选择器,一起选择起来
后代选择器:var hou = $(‘div p‘); //选择div里面的p元素
子选择器:var zi = $(‘div>p‘); //选择div的子代p元素,不会选择孙代p元素
相邻兄弟选择器:var xiong = $(‘.gg+div‘); //选择紧邻 .dd 后的,一个div兄弟。注:如果.dd有多个,则可能有多个紧邻的兄弟。
通用兄弟选择器:var txiong = $(‘.gg~div‘); //选择 .dd 后的,所有div兄弟
属性选择器
$(‘[href]‘) //必须带有href属性
$(‘[id=aa]‘) //必须有id属性,并且 属性值等于"aa"
$(‘[id!=aa]‘) //其他的都能选择上,唯独id=aa的不选
$(‘[class^=c]‘) //必须有class属性,并且 属性值以"c"开头
$(‘[class*=e]‘) ///必须有class属性,并且 属性值含有"e"
$(‘[class$=d]‘) //必须有class属性,并且 属性值以"d"结尾
$(‘[class$=d] [class*=e] [href]‘) //必须多个属性同时满足 才能选择
//div [class~=bb] //div的classname,classname可以有多个类名,并且 bb类名前后 必须有空格
//aside [class|=f] //aside的classname,必须只有一个类名,并且类名以 f 或 f- 开头的元素
过滤器(child)
$(‘div>p:first-child‘) //div下第一个元素必须是p
$(‘div>p:last-child‘) //div下最后一个元素必须是p
$(‘div>p:nth-child(2)‘) //div下第2个元素必须是p
$(‘div>p:nth-last-child(2)‘) //div下倒数第2个元素必须是p
$(‘div>p:only-child‘) //div下只有一个元素,且必须是p
过滤器(type)
$(‘div>p:first-of-type‘) //div下可以有多个元素(包括p元素),取第一个p
$(‘div>p:last-of-type‘) //div下可以有多个元素(包括p元素),取最后一个p
$(‘div>p:nth-of-type(2)‘) //div下可以有多个元素(包括p元素),取第2个p
$(‘div>p:nth-last-of-type(2)‘) //div下可以有多个元素(包括p元素),取倒数第2个p
//以上括号参数还可以为odd、even、n,其中n可以2n、3n、2n+1、2n-1等等
$(‘div>p:only-of-type‘) //div下可以有多个元素,但p只能有一个
表单相关
$(‘:input‘) //选择表单的各种输入元素,如input,textarea,select、button等等。
$(‘:text‘) //选择
注:$(‘:typeValue‘) //选择,其中typeValue可以是password radio checkbox image reset button file 等等
$(‘:enabled‘) //选择表单中的可用元素
$(‘:disabled‘) //选择表单中的禁用元素
$(‘:checked‘) //选择表单中被选中的元素,如复选框,单选框,select的option等等
$(‘:selected‘) //选择表单中的select的option,:checked也可以选中,但为了语义化推荐用:selected
查找和过滤
var js = $(‘aside‘).find(‘div‘); //在aside里面查找所有的div
var di = $(‘aside‘).children(‘div‘); //在aside里面找到 子div,不包含孙代
var pp = di.parent(); //查找di的父代
var a = $(‘p‘);
var b = a.next(); //查找b后面的一个同辈份的元素
var a = $(‘p‘);
var b = a.prev(); //查找b前面的一个同辈份的元素
var li = $(‘li‘);
var ii = li.eq(3); //在ii中选择第3个
var ii = li.eq(-5); //在ii中选择倒数第5个
var v = $(‘div‘);
var si = v.siblings(); //选择除了v之外的,所有同辈份元素
var c = $(‘li‘);
var c = c.filter(‘.nb‘); //在c中选择带有 nb类名 的元素
//若参数为function(index){ console.log(index); //index表示c里面元素的索引值 }