jQuery使用总结——jQuery选择器

初识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\\]"); // 转义特殊字符"[]"
  

• 表达式中注意空格，多一个空格或少一个空格也许会得到截然不同的结果。