“$”是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,
$.ajax和jQuery.ajax是等价的。如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式
一、基本选择器
基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorN
1.#id选择器
#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义,其返回值为Array<Element>。
$("#default").html($("#divtest").html());//创建两个长得一样的div
2.element选择器
element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。
$("button").attr("disabled","false");
3.class选择器
.class选择器根据给定的类匹配元素,是一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到,其返回值为Array<Element(s)>。
4.*选择器
*选择器多用于结合上下文来搜索,匹配所有元素的选择器。其返回值为Array<Element(s)>。
$("form *").attr("disabled", "true");//将<form>元素包含下的全部表单型元素都设为不可用。
5.selector1,selector2,selectorN选择器
这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,其返回值为:
Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
二、层级选择器
层级选择器包括5种形式:ancestor、descendant、parent > child、prev + next和prev ~ siblings。
1.$(“ance desc”)选择器
其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器
$("div label").css("background-color","blue");//获取<div>元素下的全部<label>元素,并改变它们的背景色。
2.$(“parent > child”)选择器
parent>child选择器代表在给定的父元素下匹配所有的子元素。与上一节介绍的ance desc选择器相比,parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈
$("div>label").css("border", "solid 5px red");//使用选择器获取<div>元素中的全部子<label>元素
3.prev+next选择器
这类选择器的作用是匹配所有紧接在prev元素后的next元素。它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个!元素由“next”选择器返回的并且只返回唯的一个元素。
$("p+label").css("background-color","red");//<p>元素最近邻的下一个元素也可以写成$("p+")
4.prev ~ siblings选择器
prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。siblings代表一个选择器,并且它作为第一个选择器的同辈。与上面介绍的prev + next层次选择器相同prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻!的元素
$("p~").css("border", "solid 1px red");
$("p~label").html("我们都是p先生的粉丝");
//层叠选择器:
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
三、过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头。
1.基本过滤选择器
基本过滤选择器是过滤选择器中最常用的一种,其主要包括以下几种形式,在此做详细说明:
(1):first/:last选择器。
(2):not选择器。
(3):even和:odd选择器。偶、基
(4):eq、:gt、:lt、选择器。等于、大于、小于
(5):header选择器。标题元素
(6):animated选择器。动画元素
基本过滤选择器:
$("tr:first") //选择所有tr元素的第一个
$("tr:last") //选择所有tr元素的最后一个
$("input:not(:checked)") //过滤掉:checked的选择器的所有的input元素
$("tr:even") //选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd") //选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)") //选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") //选择td元素中序号大于4的所有td元素
$("td:ll(4)") //选择td元素中序号小于4的所有的td元素
$(":header") //选择标题元素 比如<h1>-<h6>
$("div:animated") //描述: 选择所有正在执行动画效果的元素.
2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器,这部分过滤器是对上面介绍基本过滤选择器的一个补充,对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
(1):contains()选择器。 包含文本**的选择器
(2):empty选择器。 选取空的元素。指的是不包含子元素或文本的元素。
(3):has(selector)选择器。 选择至少包含一个匹配指定选择器的元素的元素
(4):parent选择器。选择有子节点(包含文本)的元素
//内容过滤选择器:
$("div:contains('John')") //选择所有div中含有John文本的元素
$("td:empty") //选择所有的为空(也不包括文本节点)的td元素的数组
$("li:has('label')").css("background-color", "blue"); //获取选择器中包含指定元素名称的全部元素
$("td:parent") //选择所有的以td为父节点的元素数组
3.可视化过滤选择器:
用来匹配所有可见元素和不可见元素
$("div:hidden") //选择所有的被hidden的div元素
var $strHTML = $("input:hidden").val();
$("div").html($strHTML);
$("div:visible") // 选择所有的可视化的div元素
$("li:visible").css("background-color","blue");
4.属性过滤选择器
用于匹配包含给定属性的元素,当然也可以匹配不包含此属性的元素等。
$("div[id]") //选择所有含有id属性的div元素
$("input[name='newsletter']") //选择所有的name属性等于'newsletter'的input元素
$("li[title='水果']").css("background-color", "green");
$("input[name!='newsletter']") //选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") //选择所有的name属性以'news'开头的input元素
$("input[name$='news']") //选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") //选择所有的name属性包含'news'的input元素,它可以获取属性值中包含指定内容的全部元素
$("input[id][name$='man']") //可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
5.子元素过滤选择器
html由层层嵌套在一起的标签组成,由于一些标签需要进行单独处理,如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。
jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器,具体内容将在下面详细讲解。
(1):nth-child选择器。
(2):first-child、:last-child选择器(两种)。
(3):only-child选择器。
//子元素过滤选择器:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") //返回所有的div元素的第一个子节点的数组
$("div span:last-child") // 返回所有的div元素的最后一个节点的数组
$("div button:only-child") // 返回所有的div中只有唯一一个子节点的所有子节点的数组
6.表单过滤选择器
$(":enabled") //选择所有的可操作的表单元素
$(":disabled") //选择所有的不可操作的表单元素
$(":checked") //选择所有的被checked的表单元素
$("select option:selected") //选择所有的select 的子元素中被selected的元素
四、表单元素选择器:
$(":input") //选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text") //选择所有的text input元素
$(":password") //选择所有的password input元素
$(":radio") //选择所有的radio input元素
$(":checkbox") //选择所有的checkbox input元素
$(":submit") //选择所有的submit input元素
$(":image") //选择所有的image input元素
$(":reset") //选择所有的reset input元素
$(":button") //选择所有的button input元素
$(":file") //选择所有的file input元素
$(":hidden") //选择所有类型为hidden的input元素或表单的隐藏域