02jQuery选择器

Posted mingliangge

tags:

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

基本选择器

通配符选择器: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表示函数(用来作为测试元素的集合)

以上是关于02jQuery选择器的主要内容,如果未能解决你的问题,请参考以下文章

JQuery-02-笔记

02-jQuery的选择器

02-jQuery的选择器

02-jQuery的选择器

02 jQuery的选择器

02-jQuery的选择器