$(document).ready(function(){});
$(document(){}); 简写
- //jQuery 等待加载 只需等待网页中的 DOM 结构加载完毕, 才能执行包裹的代码, 效率更高
- Windows.onload = function(){
- }; //JavaScript 等待加载, 必须等待网页加载完毕 (包括图片) 才能执行的包裹代码
一, 基本选择器
1.ID 选择器
使用公式: $("#id")
使用示例: $("#box") // 获取 id 属性为 box 的元素
介绍: ID 选择器 #id 就是利用 DOM 元素的 id 属性值来筛选匹配的元素, 并以 iQuery 包装集的形式返回给对象.
2. 元素选择器
使用公式:$("element")
使用示例:$("div") // 获取所有的元素
介绍: 元素选择器是根据元素名称匹配相应的元素. 元素选择器指向的是 DOM 元素的标记名, 也就是说元素选择器是根据元素的标记名选择的.
3. 类名选择器
使用公式:$(".class")
使用示例:$(".box") // 获取 class 属性值为 box 的所有元素
介绍: 类选择器是通过元素拥有的 CSS 类的名称查找匹配的 DOM 元素. 在一个页面中, 一个元素可以有多个 CSS 类, 一个 CSS 类又可以匹配多个元素, 如果有元素中有一个匹配类的名称就可以被类选择器选取到. 简单地说类名选择器就是以元素具有的 CSS 类名称查找匹配的元素.
4. 复合选择器
使用公式:$("selector1,selector2,......,selectorN")
使用示例:$("div,#btn") // 要查询文档中的全部的 < div > 元素和 id 属性为 btn 的元素
selector1: 一个有效的选择器, 可以是 ID 选择器, 元素选择器或类名选择器等
selector2: 另一个有效的选择器, 可以是 ID 选择器, 元素选择器或类名选择器等
selectorN:(可选择)任意多个选择器, 可以是 ID 选择器, 元素选择器或类名选择器等
介绍: 复合选择器将多个选择器 (可以是 ID 选择器, 元素选择器或是类名选择器) 组合在一起, 两个选择器之间以逗号 "," 分隔, 只要符合其中的任何一个筛选条件就会被匹配, 返回的是一个集合形式的 jQuery 包装集, 利用 jQuery 索引器可以取得集合中的 jQuery 对象.
注意: 多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素, 而是将每个匹配的元素合并后一起返回.
5. 通配符选择器
$("*") // 取得页面上所有的 DOM 元素集合的 jQuery 包装集
二, 层次选择器
1.ancestor descendant 选择器
使用公式:$("ancestor descendant")
使用示例:$("ul li") // 匹配 ul 元素下的全部 li 元素
ancestor 是指任何有效的选择器.
descendant 是用以匹配元素的选择器, 并且 ancestor 所指定元素后代元素.
ancestor descendant 选择器中 ancestor 代表祖先, descendant 代表子孙, 用于在给定的祖先元素下匹配所有的后代元素
2.parent>child 选择器
使用公式:$("parent>child")
使用示例:$("form>input") // 匹配表单中所有的子元素 input
parent 是指任何有效的选择器
child 使用以匹配元素的选择器, 并且它是 parent 元素的子元素
介绍: parent>child 选择器中的 parent 代表父元素, child 代表子元素, 用于在给定的父元素下匹配所有的子元素, 使用该选择器只能选择器父元素的子元素
3.prev+next 选择器
使用公式:$("prev+next")
使用示例:$("div+img") // 匹配 < div > 标签后的 < img > 标记
prev 是指任何有效的选择器
next 是一个有效选择器并紧接着 prev 选择器
介绍: pev+next 选择器用于匹配所有紧接在 prev 元素后的 next 元素, 其中, prev 和 next 是两个相同级别的元素
4.prev~siblings 选择器
使用公式:$("prev~siblings")
prev 是指任何有效的选择器
介绍: prev~siblings 选择器用于匹配 prev 元素之后的所有 siblings 元素, 其中 prev 和 siblings 是个相同辈元素
三, 过滤选择器
1. 简单过滤器
简单过滤器是指冒号开头的, 通常用于实现简单过滤效果的过滤器
:frist
说明: 匹配找到第一个元素, 它是与选择器结合使用的
示例:$("tr:frist") // 匹配表格的第一行
:last
说明: 匹配找到最后一个元素, 它是与选择器结合使用的
示例:$("tr:last") // 匹配表格的最后一行
:even
说明: 匹配所有索引值为偶数的元素, 索引值从 0 开始计算
示例:$("tr:even") // 匹配索引为偶数一行
:odd
说明: 匹配所有索引值为奇数的元素, 索引值从 0 开始计数
示例:$("tr:odd") // 匹配索引值为奇数的行
:eq(index)
说明: 匹配一个给定索引值的元素
示例:$("div:eq(1)") // 匹配第二个 div 元素
:gt(index)
说明: 匹配所有大于给定索引值的元素
示例:$("span:gt(0)") // 匹配索引大于 0 的 span 元素(注: 大于 0, 而不包括 0)
:lt(index)
说明: 匹配所有小于给定索引值的元素
示例:$("div:lt(2)") // 匹配索引小于 2 的 div 元素(注: 小于 2, 而不包括 2)
:header
说明: 匹配 h1,h2,h3...... 之类的标题元素
示例:$(".cls:header") // 匹配全部类名为 cls 的标题元素, 如果 ":" 前不写则匹配所有的标题元素
:not(selector)
说明: 去除所有给定选择器匹配的元素
示例:$("input:not(:checked)") // 匹配没有被选中的 input 元素
animated
说明: 匹配所有正在执行动画效果的元素
示例:$("div:animated") // 匹配正在执行的动画的 div 元素
2. 内容过滤器
内容过滤器就是通过 DOM 元素包含的文本内容以及是否含有匹配的元素进行筛选
:contains(text)
说明: 匹配包含给定文本的元素
示例:$("li:contains('word')") // 匹配含有 "word" 文本内容的元素
:empty
说明: 匹配所有不包含子元素或者文本的空元素
示例:$("td:empty") // 匹配不包含子元素或者文本的单元格
:has(selector)
说明: 匹配含有选择器所匹配元素的元素
示例:$("td:has(p)") // 匹配表格的单元格中还有 < p > 标记的单元格
:parent
说明: 匹配含有子元素或者文本的元素
示例:$("td:parent") // 匹配不为空的单元格, 即在该单元格中还包括子元素或则文本
3. 可见性过滤器
元素的可见状态有两种, 分别是隐藏状态和显示状态. 可见性过滤器就是利用元素的可见状态匹配元素的
:visible
说明: 匹配所有可见元素
:hidden
说明: 匹配所有不可见元素
注意: 在应用: hidden 过滤器时, display 属性是 none 以及 input 元素的 type 属性为 hidden 的元素都会被匹配识别
4. 表单对象的属性过滤器
表单对象的属性过滤器通过表单元素的状态属性 (例如: 选中, 不可用等状态) 匹配元素
:checked
说明: 匹配所有选中的被选中元素
示例:$("input:checked") // 匹配所有被选中的 input 元素
:disabled
说明: 匹配所有不可用元素
示例:$("input:disenabled") // 匹配所有不可用 input 元素
:enabled
说明: 匹配所有可用的元素
示例:$("input:enabled") // 匹配所有可用的 input 元素
:selected
说明: 匹配所有选中的 option 元素
示例:$("select option:selected") // 匹配所有被选中的选项元素
5. 子元素过滤器
子元素选择器就是筛选给定某个元素的子元素, 具体的过滤条件由选择器的种类而定
:first-child
说明: 匹配所有给定元素的第一个子元素
示例:$("ul li:first-child") // 匹配 ul 元素中的第一个子元素 li
:last-child
说明: 匹配所有给定元素的最后一个子元素
示例:$("ul li:last-child") // 匹配 ul 元素中的最后一个子元素 li
:only-child
说明: 如果某个元素是它父元素中唯一的子元素, 那么将会被匹配, 如果父元素中含有其他元素, 则不会被匹配
示例:$("ul li:only-child") // 匹配只含有一个 li 元素的 ul 元素中的 li
:nth-child(index/even/odd/equation)
说明: 匹配可每个父元素下的第 index 个子或奇偶元素, index 从 1 开始, 而不是从 0 开始
示例:$("ul li :nth-child(even)") // 匹配 ul 中索引值为偶数的 li 元素
$("ul li:nth-child(3)") // 匹配 ul 中第 3 个 li 元素
四, 属性选择器
属性选择器就是通过元素的属性作为过滤条件进行筛选对象
[attribute]
说明: 匹配包含给定属性的元素
示例:$("div[name]") // 匹配包含有 name 属性的 div 元素
[attribute=value]
说明: 匹配属性值为 value 的元素
示例:$("div[name='test']") // 匹配 name 属性是 test 的 div 元素
[attribute!=value]
说明: 匹配属性值不等于 value 的元素
示例:$("div[name!='test']") // 匹配 name 属性不是 test 的 div 元素
[attribute*=value]
说明: 匹配属性值含有 value 的元素
示例:$("div[name*="test"]") // 匹配 name 属性值中含有 test 值的 div 元素
[attribute^=value]
说明: 匹配属性值以 value 开始的元素
示例:$("div[name^='test']") // 匹配 name 属性以 test 开头的 div 元素
[attribute$=value]
说明: 匹配属性值以 value 结束的元素
示例:$("div[name$='test']") // 匹配 name 属性以 test 结尾的 div 元素
[selector1][selector2][selectorN]
说明: 复合属性选择器, 需要同时满足多个条件时使用
示例:$("div[id][name^='test']") // 匹配具有 id 属性并且 name 属性是以 test 开头的 div 元素
五, 表单选择器
表单选择器是匹配经常在表单内出现的元素. 但是匹配的元素不一定在表单中
:input
说明: 匹配所有的 input 元素
示例:
- $(":input") // 匹配所有的 input 元素
- $("form :input") // 匹配 < form > 标记中的所有 input 元素, 需要注意, 在 form 和冒号之间有一个空格
- :button
说明: 匹配所有的普通按钮, 即 type="button" 的 input 元素
示例:$(".button") // 匹配所有普通按钮
:checkbox
说明: 匹配所有的复选框
示例:$(":checkbox") // 匹配所有的复选框
:file
说明: 匹配所有的文件域
示例:$(":file") // 匹配所有的文件域
:hidden
说明: 匹配所有的不可见元素, 或者 type 为 hidden 的元素
示例:$(":hidden") // 匹配所有的隐藏域
:image
说明: 匹配所有的图像域
示例:$(":image") // 匹配所有的图像域
:password
说明: 匹配所有的密码域
示例:$(":password") // 匹配所有的密码域
:radio
说明: 匹配所有的单选按钮
示例:$(":radio") // 匹配所有的单选按钮
:reset
说明: 匹配所有的重置按钮, 即 type="reset" 的 input 元素
示例:$(":reset") // 匹配所有的重置按钮
:submit
说明: 匹配所有的提交按钮, 即 type="submit" 的 input 元素
示例:$(":submit") // 匹配所有的提交按钮
:text
说明: 匹配所有的单行文本框
示例:$(".text") // 匹配所有的单行文本框
选择器中注意事项
1. 选择器中含有特殊符号的注意事项
含有 ".","#","{","}" 等特殊字符: 根据 W3C 规定, 属性值中是不能包含这些特殊字符的, 但在实际的项目中偶尔会遇到这种表达式中含有 "#" 和 "}" 等特殊字符的情况. 这时, 如果按照普通方法去处理的话就会出现错误, 解决这类错误的方法是使用转义符号将其转义.
- <div id="li#db">
- liaidb
- </div>
- <div id="lidb(1)">
- lilovedb
- </div>
如果按照普通方式来获取, 例如:
- $("#li#db");
- $("#lilovedb(1)");
这样是不能正确获取到元素的, 正确的写法如下:
- $("#li\\#db");
- $("#lilovedb\\(1\\)");
2. 属性选择器的 @符号问题:
在 jQuery 升级版本过程中, jQuery 在 1.3.1 版本中彻底放弃了 1.1.0 版本遗留的 @符号, 假如我们使用 1.3.1 以上的版本, 那么不需要在属性前添加 @符号
$("div[@name="lidb"]");
正确写法是将 @符号去掉, 即改为如下形式:
$("div[name="lidb"]");
选择器中空格的注意事项
在实际应用当中, 选择器中含有空格也是不容忽视的, 多一个空格或则少一个空格也会得到截然不同的结果.
- <div class="name">
- <div style="display: none;">
- 小李
- </div>
- <div style="display: none;">
- 小王
- </div>
- <div style="display: none;">
- 小明
- </div>
- <div style="display: none;" class=name>
- 小张
- </div>
- </div>
- <div style="display: none;" class=name>
- 小玉
- </div>
- <div style="display: none;" class=name>
- 小刘
- </div>
使用如下的 jQuery 选择器分别获取它们
- <script type="text/javascript">
- var $a = $(".name :hidden");
- var $b = $(".name:hidden");
- console.log($a) console.log($b)
- </script>
来源: http://www.jianshu.com/p/5d068e92ff40