初识jQuery对象
在学习jQuery
对象之前,我们需要了解一下jQuery对象
和DOM对象
的区别。
DOM对象
我们可以通过JavaScript
中的getElementsByTagName
或getElementById
等来获取元素节点。这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法:
var domObj = document.getElementById("id"); // 获取DOM对象
var ObjHTML = domObj.innerHTML; // 使用JavaScript中的属性——innerHTML
jQuery对象
jQuery
对象就是通过jQuery
包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么他就可以使用jQuery里的方法,但是不能是DOM对象的任何方法。
jQuery对象和DOM对象的相互转换
jQuery --> DOM
jQuery提供了两种方法:[index]
和get(index)
jQuery对象是一个类似数组的对象,可以通过[index]
方法得到相应的DOM对象
let $students = $("#students");//jQuery对象
let student = $students[0];//DOM对象
另一种方法是jQuery本身提供的,通过get(index)
方法得到相应的DOM对象
let $students = $("#students");//jQuery对象
let student = $students.get(0);//DOM对象
DOM --> jQuery
只需用$()
把DOM对象包起来即可
let student = document.getElementById("student");//DOM对象
let $student = $(student);//jQuery对象
jQuery选择器
常用的CSS选择器
选择器 | 语法 | 描述 |
---|---|---|
标签选择器 | E{CSS规则} | 以文档元素作为选择符 |
ID选择器 | #ID{CSS规则} | 以文档元素的唯一标识符ID作为选择符 |
类选择器 | E.className{CSS规则} | 以文档元素的class作为选择符 |
jQuery
选择器的写法与CSS
选择器的写法非常相似,只不过两者作用效果不同。
CSS
选择器找到元素后添加样式。
jQuery
选择器找到元素后添加行为。
jQuery选择器的优势
- 简洁的写法
在jQuery
中,例如:$("#ID")
用来代替document.getElementById()
函数,即通过ID获取元素。$("tagName")
用来代替document.getElementsByTagName()
函数,即通过标签名获取HTML元素。 - jQuery选择器几乎支持所有的CSS选择器并且拥有更好的跨浏览器的兼容性。
- 完善的处理机制
例如:传统的document.getElementById("app").style.color="red";
如果没有id为app的元素,浏览器会报错。
而jQuery选择器$("#app").css("color","red");
即使没有id为app的这个元素也不会报错。
注意:如果需要用jQuery的方式判断页面上是不是有这个元素,需要根据获取到的元素长度来判断。因为$("#app")
获取的永远是对象。if($("#app").length>0){ // do something }
jQuery选择器——基本选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
#id | 根据给定ID匹配一个元素 | 单个元素 | $("#app") 选取ID为app的元素 |
.class | 根据给定类名匹配元素 | 集合元素 | $(".app") 选取所有class为app的元素 |
element | 根据给定元素名匹配元素 | 集合元素 | $("a") 选取所有的<a> 元素 |
* | 匹配所有元素 | 集合元素 | $("*") 选取所有元素 |
selector1,selector2,…,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.text") 选取所有<div> ,<span> 和class为text的<p> 标签的一组元素 |
jQuery选择器——层次选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
$(“ancestor descandent”) | 选取ancestor元素里的所有descendant(后代)元素 | 单个元素 | $("div span") 选取<div> 里的所有的<span> 元素 |
$(“parent>child”) | 选取parent元素下的child(子)元素 | 集合元素 | $("div>span") 选取<div> 元素下元素名是<span> 的子元素 |
$(“prev+next”) | 选取紧接在prev元素后的next元素 | 集合元素 | $("div+span") 选取<div> 元素的下一个<span> 同辈元素 |
$(“prev~siblings”) | 选取prev元素之后的所有siblings元素 | 集合元素 | $("div~span") 选取<div> 元素后面的所有<span> 同辈元素 |
第1个和第2个选择器比较常用。后面两个可以用更加简单的方法代替。
选择器 | 方法 | |
---|---|---|
等价关系 | $(“div + span”); | $(“div”).next(“span”); |
等价关系 | $(“div ~ span”); | $(“div”).nextAll(“span”); |
另外,$("div ~ span");
选择器只能选取<div>
元素后面的同辈<span>
元素,而$("div").siblings("span")
可以选取<div>
元素的所有同辈<span>
元素
jQuery选择器——过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。
按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。
基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:first | 选取第1个元素 | 单个元素 | $(“div:first”)选取所有<div> 元素中的第一个<div> 元素 |
:last | 选取最后1个元素 | 单个元素 | $(“div:last”)选取所有<div> 元素中的最后一个<div> 元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not(.text)”)选取class不是text的<input> 元素 |
:even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 | $(“input:even”)选取索引是偶数的<input> 元素 |
:odd | 选取索引是奇数的所有元素,索引从0开始 | 集合元素 | $(“input:add”)选取索引是奇数的<input> 元素 |
:eq(index) | 选取索引等于index的元素(index从0开始) | 单个元素 | $(“input:eq(1)”)选取索引等于1的<input> 元素 |
:gt(index) | 选取索引大于index的元素(index从0开始) | 集合元素 | $(“input:gt(1)”)选取索引大于1的<input> 元素 |
:lt(index) | 选取索引小于index的元素(index从0开始) | 集合元素 | $(“input:lt(1)”)选取索引小于1的<input> 元素 |
:header | 选取所有的标题元素,例如h1,h2,h3等的 | 集合元素 | $(":header")选取网页中所有的<h1>,<h2>,<h3>...... |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 | $(“div:animated”)选取正在执行动画的<div> 元素 |
:focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获取焦点的元素 |
内容过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $("div:contains('我')") 选取含有文本“我”的<div> 元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") 选取不包含子元素或文本的<div> 空元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)") 选取含有<p> 元素的<div> 元素 |
:parent | 选取含有子元素或文本的元素 | 集合元素 | $("div:parent") 选取拥有子元素或文本的<div> 元素 |
可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden") 选取所有不可见的元素。包括<input type="hidden" /> ,<div style="display:none;"> |
:visible | 选取所有可见的元素 | 集合元素 | $("div:visible") 选取所有可见的<div> 元素 |
属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]") 选取拥有属性id的<div> 元素 |
[attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[title=test]") 选取属性title为“test”的<div> 元素 |
[attribute!=value] | 选取属性值不为value的元素 | 集合元素 | $("div[title!=test]") 选取属性title不为“test”的<div> 元素(注意,没有属性title的<div> 元素也会被选取) |
[attribute^=value] | 选取属性值以value开始的元素 | 集合元素 | $("div[title^=test]") 选取属性title以“test”开始的<div> 元素 |
[attribute$=value] | 选取属性值以value结束的元素 | 集合元素 | $("div[title$=test]") 选取属性title以“test”结束的<div> 元素 |
[attribute*=value] | 选取属性值含有value的元素 | 集合元素 | $("div[title*=test]") 选取属性title含有“test”的<div> 元素 |
[attribute|=value] | 选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素 | 集合元素 | $('div[title|="en"]') 选取属性title等于en或以en为前缀(该字符串后跟一个连字符“-”)的<div> 元素 |
[attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $('div[title~="uk"]') 选取属性title用空格分隔的值中包含字符uk的<div> 元素 |
[attribute1][attribute2][attributeN] | 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 | 集合属性 | $("div[id][title$='test']") 选取拥有属性id,并且属性title以“test”结束的<div> 元素 |
子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:nth-child(index/even/odd/equation) | 获取每个父元素下的第index个子元素或奇偶元素(index从1开始) | 集合元素 | :eq(index) 值匹配一个元素,而:nth-child 将为每一个父元素匹配子元素,并且:nth-child(index) 的index是从1开始的,而:eq(index) 是从0开始的 |
:first-child | 选取每个父元素的第一个子元素 | 集合元素 | :first只返回单个元素,而:first-child将为每一个父元素匹配第一个子元素。例如$("ul li:first-child"); 选取每个<ul> 中第一个<li> 元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | :last只返回单个元素,而:last-child将为每一个父元素匹配最后一个子元素。例如$("ul li:last-child"); 选取每个<ul> 最后一个<li> 元素 |
:only-child | 如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 | 集合元素 | $("ul li:only-child") 在<ul> 中选取是唯一子元素的<li> 元素 |
表单对象属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled") 选取id为form1的表单内的所有可用元素 |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form2 :disabled") 选取id为form2的表单内的所有不可用元素 |
:checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 | $("input:checked") 选取所有被选中的<input> 元素 |
:selected | 选取所有被选中的选项元素 | 集合元素 | $("select option:selected") 选取所有被选中的选项元素 |
jQuery选择器——表单选择器
jQuery中专门引入了表单选择器,利用这个选择器,能极其方便的获取到表单的某个或某类型的元素
表单对象属性过滤示例
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:input | 获取所有的<input> <textarea> <select> <button> 元素 | 集合元素 | $(":input") |
:text | 获取所有的单行文本框 | 集合元素 | $(":text") |
:password | 获取所有的密码框 | 集合元素 | $(":password") |
:radio | 获取所有的单选框 | 集合元素 | $(":radio") |
:checkbox | 获取所有的多选框 | 集合元素 | $(":checkbox") |
:submit | 获取所有的提交按钮 | 集合元素 | $(":submit") |
:image | 获取所有的图形按钮 | 集合元素 | $(":image") |
:reset | 获取所有的重置按钮 | 集合元素 | $(":reset") |
:button | 获取所有的按钮 | 集合元素 | $(":button") |
:file | 获取所有的上传域 | 集合元素 | $(":file") |
:hidden | 获取所有的不可见元素 | 集合元素 | $(":hidden") 选取所有不可见元素 |
选择器注意事项
- 如果表达式中含有特殊字符如“#”,“.” 需要使用转义符转义:
$("#id\\#b"); // 转义特殊字符"#" $("#id\\[1\\]"); // 转义特殊字符"[]"
- 表达式中注意空格,多一个空格或少一个空格也许会得到截然不同的结果。