Monthai: jQuery选择器总结

原创 2018-11-10 10:23:52 159
摘要:具有以下特点 :(1)基本格式$('');(2)冒号,div:first,类似css伪类,通常是一种内置方法;(3)[]方括号,input[type!=text],表示属性+值;可前置标签限制选择范围;(4){}花括号,$('div').css({'color':'red','font-size':'30px&

具有以下特点 :

(1)基本格式$('');

(2)冒号,div:first,类似css伪类,通常是一种内置方法;

(3)[]方括号,input[type!=text],表示属性+值;可前置标签限制选择范围;

(4){}花括号,$('div').css({'color':'red','font-size':'30px'}),用于设置多个样式。

jQuery的选择器比较丰富,大体分为几种类型:

(1)基本选择器

$('div')
$('.className')
$('#idName')
//设置多个样式
$('div').css({'color':'red','font-size':'30px'}) //花括号,逗号分隔键值对

(2)层级选择器

$('ul>li')
$('ul li')
$('label+input') //紧跟label后的第一个input,如果input前没有label则不会被选中
$('label~input') //label后所有同级input

(3)顺序选择器

$('div:first')
$('div:last')
$('p:gt(x)') //索引大于x的p标签
$('p:lt(x)') //索引小于x
$('p:eq(x)') //等于x
$('li:odd') //索引为偶数
$('li:even') //索引为奇数
$('li:not(eq(x))) //非

(4)内容选择器

$('p:contains(text)') //内容包含文本“text”的p标签
$('div:has(span)') //has(选择器),基础选择器适用;div下的span,还是含有span的div???
//$('div:has(span)').css('color','blue')会让div内所有内容变色。
$('div:empty') //既无内容又无下级子标签的div
$('div:parent') //有内容或者子标签其中之一

(5)属性选择器

$('[type]') //有type属性的所有标签,属性值可以为空
$('input[type=password]') //[属性=值]要包含在方括号内
$('input[type != password]') //不等于指定值
$('[name^=n]') //以指定值开始
$('[name$=n]') //结尾
$('[name*=n]') //包含
$('input[type=text][id][name^=n]').css('height','25px') //同时满足多个条件
//id可以为空,但必须有该标识;方括号之间不能有空格;比较符号可以有空格。

(1)表单选择器

$(':enabled') //相对disabled而言,激活的元素
$(':disabled') //行间设置了disabled="disabled",只有一个值,禁用 input 元素
$(':selected') //针对设置了selected的option
$(':checked') //激活的checkbox【测试未成功】
//下拉框
<select name="" id="">
        <option value="">react</option>
        <option value="">angular</option>
        <option value="" selected>vue</option>
</select>

END

批改老师:韦小宝批改时间:2018-11-10 11:11:03
老师总结:嗯!写的很不错!很完整啊!继续加油哈!!!

发布手记

热门词条