参考: w3c , jquery.api.3.2.1
jQuery 选择器
| 选择器 | 实例 | 选取 |
| #id | $("#myDiv") |
id=”myDiv” 的元素 |
| element | $("div") |
所有 <div> 元素 |
| .class | $(".myClass") |
所有 class=”myClass” 的元素 |
| * | $("*") |
所有元素 |
| selector1,selector2,selectorN | $("div,span,p.myClass") |
所有匹配这三个条件的元素 |
| this | $(this) |
当前的html元素 |
| [attribute] | $("div[id]") |
所有含有 id 属性的 div 元素 |
| [attribute=value] | $("input[name='newsletter']") |
所有 name 属性是 newsletter 的 input 元素 |
| [attribute!=value] | $("input[name!='newsletter']") |
所有 name 属性不是 newsletter 的 input 元素 |
| [attribute^=value] | $("input[name^='news']") |
所有 name 以 ‘news’ 开始的 input 元素 |
| [attribute$=value] | $("input[name$='letter']") |
所有 name 以 ‘letter’ 结尾的 input 元素 |
| [attribute*=value] | $("input[name*='man']") |
所有 name 包含 ‘man’ 的 input 元素 |
| [selector1][selector2][selectorN] | $("input[id][name$='man']") |
所有含有 id 属性，并且它的 name 属性是以 man 结尾的元素 |
| ancestor descendant | $("form input") |
form表单下的所有input元素 |
| parent > child | $("form > input") |
表单中所有的子级input元素 |
| prev + next | $("label + input") |
所有跟在 label 后面的 input 元素 |
| prev ~ siblings | $("form ~ input") |
所有与表单同辈的 input 元素 |
| :first | $("p:first") |
第一个 <p> 元素 |
| :last | $("p:last") |
最后一个 <p> 元素 |
| :even | $("tr:even") |
所有偶数 <tr> 元素 |
| :odd | $("tr:odd") |
所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") |
列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") |
列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") |
列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") |
所有不为空的 input 元素 |
| :header | $(":header") |
所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") |
包含指定字符串的所有元素 |
| :empty | $(":empty") |
无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") |
所有隐藏的 <p> 元素 |
| :visible | $("table:visible") |
所有可见的表格 |
| attribute | $("href]") |
所有带有 href 属性的元素 |
| attribute=value | $("href='#']") |
所有 href 属性的值等于 “#” 的元素 |
| attribute!=value | $("href!='#']") |
所有 href 属性的值不等于 “#” 的元素 |
| attribute$=value | $("href$='.jpg']") |
所有 href 属性的值包含以 “.jpg” 结尾的元素 |
| :input | $(":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对象和dom对象
jquery对象的实质
jquery对象其实是一个javascript的数组，这个数组对象包含125个方法和4个属性
4个属性分别是
-
jquery当前的jquery框架版本号 -
length指示该数组对象的元素个数 -
context一般情况下都是指向HtmlDocument对象 -
selector传递进来的选择器内容 如：#yourId或.yourClass等
jquery对象和dom对象的转换
var jq=$("#yourId");//jquery对象
var dom=document.getElementById("yourId");//dom对象
jq[0]就是HtmlElement元素,和dom是等价的,也就是
var jq=$("#yourId");//jquery对象
var dom=jq[0];//dom对象
同时
var dom=document.getElementById("yourId");//dom对象
var jq=$(dom);//jquery对象
将dom对象包一层$()后,就成了jquery对象
版权声明
本文为博主Fe原创文章，转载请注明出处 https:/fedemo.top/2018/03/31/jquery-selectors/
