一.原始JS选择器.
id选择器:document.getElementById("test");
name选择器:document.getElementsByName("test");
节点选择器:document.getElementsByTagName("p");
想要选择class,可以使用:document.querySelector(".test");
二.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") | 所有 表单 元素 | |
$(":text") | 所有 type="text" 的 <input> 元素 | |
$(":password") | 所有 type="password" 的 <input> 元素 | |
$(":radio") | 所有 type="radio" 的 <input> 元素 | |
$(":checkbox") | 所有 type="checkbox" 的 <input> 元素 | |
$(":submit") | 所有 type="submit" 的 <input> 元素 | |
$(":reset") | 所有 type="reset" 的 <input> 元素 | |
$(":button") | 所有 type="button" 的 <input> 元素 | |
$(":image") | 所有 type="image" 的 <input> 元素 | |
$(":file") | 所有 type="file" 的 <input> 元素 | |
| | |
$(":enabled") | 所有激活的 input 元素 | |
$(":disabled") | 所有禁用的 input 元素 | |
$(":selected") | 所有被选取的 input 元素 | |
$(":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()方法。
三.CSS 选择器.
1.CSS 选择器分组.
h2, p {color:gray;}2.CSS 后代选择器.
h1 em {color:red;}3.CSS 子元素选择器.
h1 > strong {color:red;}4.CSS 相邻兄弟选择器.
h1 + p {margin-top:50px;}5.CSS 属性选择器.
a[href] {color:red;}选择器 | 描述 |
用于选取带有指定属性的元素。 | |
用于选取带有指定属性和值的元素。 | |
用于选取属性值中包含指定词汇的元素。 | |
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 | |
匹配属性值以指定值开头的每个元素。 | |
匹配属性值以指定值结尾的每个元素。 | |
匹配属性值中包含指定值的每个元素。 |
6.CSS 伪类.
| 描述 | CSS |
向被激活的元素添加样式。 | 1 | |
向拥有键盘输入焦点的元素添加样式。 | 2 | |
当鼠标悬浮在元素上方时，向元素添加样式。 | 1 | |
向未被访问的链接添加样式。 | 1 | |
向已被访问的链接添加样式。 | 1 | |
向元素的第一个子元素添加样式。 | 2 | |
向带有指定 lang 属性的元素添加样式。 | 2 |
7.CSS 伪元素.
| 描述 | CSS |
向文本的第一个字母添加特殊样式。 | 1 | |
向文本的首行添加特殊样式。 | 1 | |
在元素之前添加内容。 | 2 | |
在元素之后添加内容。 | 2 |
