02jQuery选择器

Posted 2021-03-05 mingliangge

基本选择器

通配符选择器：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‘)        //选择<input type = ‘text‘ />

注：$(‘:typeValue‘)     //选择<input type = ‘typeValue‘ />，其中typeValue可以是password  radio  checkbox  image  reset  button  file  等等

 

$(‘:enabled‘)     //选择表单中的可用元素

$(‘:disabled‘)     //选择表单中的禁用元素

 

$(‘:checked‘)       //选择表单中被选中的元素，如复选框，单选框，select的option等等

$(‘:selected‘)        //选择表单中的select的option，:checked也可以选中，但为了语义化推荐用:selected

 

 

查找和过滤

find( expr | object | element )

var js = $(‘aside‘).find(‘div‘);    //在aside里面查找所有的div

 

children([expr])

var di = $(‘aside‘).children(‘div‘);    //在aside里面找到 子div，不包含孙代

 

parent([expr])

var pp = di.parent();     //查找di的父代

 

next([expr])

var a = $(‘p‘);

var b = a.next();    //查找b后面的一个同辈份的元素

 

prev([expr])

var a = $(‘p‘);

var b = a.prev();    //查找b前面的一个同辈份的元素

 

eq(num)

var li = $(‘li‘);

var ii = li.eq(3);  //在ii中选择第3个

var ii = li.eq(-5);  //在ii中选择倒数第5个

 

siblings([expr])

var v = $(‘div‘);

var si = v.siblings();   //选择除了v之外的，所有同辈份元素

 

filter( expr | object | element | fn)

var c = $(‘li‘);

var c = c.filter(‘.nb‘);    //在c中选择带有 nb类名 的元素

//若参数为function(index){ console.log(index);  //index表示c里面元素的索引值 }

 

注：num表示数字，[]里面表示可选，ecpr表示字符串，object表示现有的jquery对象(用jquery选择的对象)，element表示Dom元素名，fn表示函数(用来作为测试元素的集合)