首页 > 代码库 > js jquery 选择器总结

js jquery 选择器总结

js jquery 选择器总结

一.原始JS选择器.

id选择器:document.getElementById("test");

name选择器:document.getElementByName("test");

节点选择器:document.getElementsByTagName("p");

二.jQuery 选择器.

1.jQuery 元素选择器.

id选择器:$("#test");

class选择器:$(".test");

节点选择器:$("p");

2.jQuery 属性选择器.

$("div[id]"); 选择所有含有id属性的div元素 
$("input[name=‘keleyicom‘]"); 选择所有的name属性等于‘keleyicom‘的input元素
$("input[name!=‘keleyicom‘]") ;选择所有的name属性不等于‘keleyicom‘的input元素
$("input[name^=‘keleyi‘]"); 选择所有的name属性以‘keleyi‘开头的input元素 
$("input[name$=‘keleyi‘]"); 选择所有的name属性以‘keleyi‘结尾的input元素 
$("input[name*=‘keleyi‘]");选择所有的name属性包含‘keleyi‘的input元素
$("input[id][name$=‘keleyi‘]"); 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素

3.jQuery CSS 选择器.

$("p").css("background-color","red");

4.jQuery 表单选择器.

:input $(":input") 所有 表单 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

 

 

更多:jQuery 参考手册 - 选择器

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

备注:

1.$("input")和$(":input")和$("<input>")的区别?

$("input")是节点选择器,表示选择所有input节点.

$(":input")是表单选择器,表示选择所有表单元素,包括textarea,select.

$("<input>")是可以分为2部分理解的,<input>在html是一个独立标签,加上$,就生成了一个jquery对象,对象就是这个<input>。有时用于快速生成元素,例如:$(‘<div>‘).html(‘这是新建的div‘).addClass(‘classname‘).appendTo(‘body‘),就在body标签后追加了这个新建的div。

2.jquery选择器空格,大于号,加号和波浪号的区别?

空格:$(‘parent childchild‘)表示获取parent下的所有的childchild节点(所有的子孙)。
大于号:$(‘parent > child‘)表示获取parent下的所有child的儿子( 第一代)。   
加号:$(‘pre + nextbrother‘)表示获得pre节点的下一个兄弟节点,相当于next()方法
波浪号:$(‘pre ~ brother‘)表示获取pre节点的后面的所有兄弟节点,相当于nextAll()方法。


js jquery 选择器总结