jquery基本语法

一.基本选择器

1 #id 选择器

2 element 选择器

3 .class 选择器

有一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括

、、

$(“*”）

选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。 由于该选择器的特殊性，它常与其他

元素组合使用，表示获取其他元素中的全部子元素。

<script type="text/javascript">
$("form *")attr("disabled", "true");
</script>

获得form下所有的元素

4 * 选择器(取走全部铅笔)

5 .sele1,sele2,seleN选择器

有时需要精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜欢的笔，就需要调用

sele1,sele2,seleN选择器，它的调用格式如下：

$(“sele1,sele2,seleN”)

其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的

各种类型选择器，如(“#id”)、(“.class”)、$(“selector”)选择器等。

例如

选我吧！我是red

选我吧！我是green

选我吧！我是blue

<script type="text/javascript">
$(".red,.green").html("hi,我们的样子很美哦!");
</script>

6 .ance desc选择器

ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数

（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来

获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择

器把这几个人给定位出来。

$(“div label”);

码农家族

ewewqe

<script type="text/javascript">
$("div label").css("background-color","blue");
</script>

下面的label都会改变

parent > child选择器

与上一节介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元

素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：

例如

码农家族

雾非雾而非

<label></label>

<script type="text/javascript">
$("div>label").css("border", "solid 5px red");
</script>

雾非雾而非属于孙辈，不会改变

8.prev + next选择器

通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：

(“prev+next”)例如:(“p+label”);

其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上

下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的

一个元素。

9.prev~siblings选择器

与prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只

获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：

(“prev sibl<
4000
span class="mi" id="MathJax-Span-38" style="font-family: MathJax_Math-italic;">ings”)例如:(“p+label”).css(“background-color”,”red”);

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的

元素都是prev元素之后的同辈元素。

二。jquery过滤性选择器

1.:first过滤选择器

(“li:first”)得到一组相同标签元素中的第1个元素(“li:last”)得到一组相同标签元素中的最后1个元素

2.:eq(index)过滤选择器

从一组标签元素数组中，灵活选择任意的一个标签元素

其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为1，表示选择的是第2个元

素。例如：

$(“:eq(1)”)

3.:contains(text)过滤选择器

与:eq(index)选择器按索引查找元素相比，有时候我们可能希望按

照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包

含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象

。其中参数text表示页面中的文字。

$(“li:contains(‘haha’)”);

4.:has(selector)过滤选择器

可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称

的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

例如：获取指定包含某个元素名的全部
元素，并改变它们显示文字的颜色

$(“li:has(‘p’)”)

5.:hidden过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元

素。

例如，调用:hidden选择器获取不可见的
元素，并将该元素的内容显示在
元素中

显示隐藏元素的内容

<script type="text/javascript">
var strHTML = $("input:hidden").val();
$("div").html(strHTML);
</script>

6.:visible过滤选择器

与:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的

display属性值设置为“none”，那么，都可以通过该选择器获取。

7.[attribute=value]属性选择器

属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选

择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专

用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

例如，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部
元素，并设置它们显示

的文字颜色

改变”title”属性值为”蔬菜”的背景色

<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="水果">苹果</li>
<li title="水果">西瓜</li>
</ul>

<script type="text/javascript">
$("li[title='蔬菜']").css("background-color", "green");
</script>

8.[attribute!=value]属性选择器

与[attribute=value]属性选择器正好相反

9.[attribute*=value]属性选择器

它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表

示属性名称，value参数表示对应的属性值。

例如，使用[attribute*=value]属性选择器，获取属性值中包含某一指定内容的全部
元素，并设置

它们显示的文字颜色

改变”title”属性值包含”果”的背景色

茄子

香蕉

芹菜

小西红柿

西瓜

<script type="text/javascript">
$("li[title*='果']").css("background-color", "green");
</script>

含有果‘果’的li全改变

10.:first-child子元素过滤选择器

我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素

，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素

，它是一个集合，常用多个集合数据的选择处理。

改变每个”蔬菜水果”中第一行的背景色

芹菜

茄子

萝卜

大白菜

西红柿

橘子

香蕉

葡萄

苹果

西瓜

<script type="text/javascript">
$("li:first-child").css("background-color", "green");
</script>

芹菜 和 橘子 所在列改变

11.:last-child子元素过滤选择器

最后一个元素改变

三 、jquery表单选择器

1.:input表单选择器

:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有标记的表单元素，

而且还包括、 和 标记的表单元素，因此，它选择的表单元素是最广的。

修改全部表单元素的背景色

<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />
<button>
Button</button><br />
</form>

<script type="text/javascript">
$("#frmTest :input").addClass("bg_blue");
</script>

id为frmset表单的input改变

2.:text表单文本选择器

:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的

字条工具，使用非常广泛。

例如，在表单中添加多个元素，使用:text选择器获取单行的文本输入框元素，并修改字的边框颜色

修改多个单行输入框元素的背景色

Button

<script type="text/javascript">
$("#frmTest:text")addClass("bg_blue");
</script>
</body>

type为text的input输入框改变

3.:password表单密码选择器（type=”password”）

4.:radio单选按钮选择器(type=”radio”）

5.:image图像域选择器(type=”image”）

6.:checked选中状态选择器(checked=”checked”)

7.:selected选中状态选择器(selected=”selected”)

四、jquery操作dom元素

1.使用attr()方法控制元素的属性

attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(

属性名，属性值)格式则是设置元素属性名的值。

例如：
cef4

attr()方法设置元素属性

点我就变

我改变后的地址是：

<script type="text/javascript">
$("#a1").attr("href" , "http://www.imooc.com");
var $url = $("#a1").attr("href");
$("#tip").html($url);
</script>

2.使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如

果方法中包含参数，则表示将参数值设置为元素内容。

text得到文本信息

html得到所有信息

例如，分别使用html()和text()方法获取一个元素的内容，并将获取的内容显示在不同的
元素中

html()和text()方法设置元素内容

<script type="text/javascript">
var $content = "<b>唉，我又变胖了！</b>";
$("#html").text($content);
$("#text").html($content);
</script>

3.操作元素的样式

通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，

后者直接将样式的属性内容写在括号中。

例如，使用addClass()方法，改变
元素的背景色和文字颜色

.red{background-color:red;color:#fff}

.white{background-color:red;color:white}

<body>
<h3>css()方法设置元素样式</h3>
<div id="content">我穿了一件红色外衣</div>

<script type="text/javascript">
$("#content").addClass("red white");
</script>

css（）方法

多个样式

(“#content”).css({“background-color”:”red”,”color”:”#fff”});
单个样式(“#content”).css（”background-color”,”red”）;

4.移除属性和样式

使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中

参数表示移除属性名，后者方法中参数则表示移除的样式名

$(“#content”).removeClass(“blue white”);

5.使用append()方法向元素内追加内容

append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元

素标记，还可以是一个返回字符串内容的函数。

例如返回字符串内容的函数

append()方法追加内容

<script type="text/javascript">
function rethtml() {
var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
return $html;
}
$("body").append(rethtml());
</script>

6.使用appendTo()方法向被选元素内插入内容

appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：

$(content).appendTo(selector)

参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素

内，默认是在尾部。

appendTo()方法插入内容

小乌龟

<script type="text/javascript">
var $html = "<span class='red'>小青蛙</span>"
$($html).appendTo("div");
</script>

7.使用before()和after()在元素前后插入内容

使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指

定的元素或内容，调用格式分别为：

(selector).before(content)和(selector).after(content)

其中参数content表示插入的内容，该内容可以是元素或HTML字符串。

after()方法在元素之后插入内容

<span class="green">我们交个朋友吧！</span>

<script type="text/javascript">
var $html = "<span class='red'>兄弟。</span>"
$(".green").after($html);
</script>

8.使用clone()方法复制元素

调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，

它的调用格式为：

$(selector).clone()

其中参数selector可以是一个元素或HTML内容。

例如，使用clone()方法复制页面中的一个元素，并将复制后的元素追加到页面的后面

9.替换内容

replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换

元素所在的位置不同，分别为如下所示：

(selector).replaceWith(content)和(content).replaceAll(selector)

参数selector为被替换的元素，content为替换的内容。

10.使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用

格式为：

$(selector).each(function(index))

参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

例如，遍历页面中的元素，当元素的序列号为2时，添加名为“focus”的样式

使用each()方法遍历元素

<span class="green">香蕉</span>
<span class="green">桃子</span>
<span class="green">葡萄</span>
<span class="green">荔枝</span>

<script type="text/javascript">
$("span").each(function (index) {
if (index == 1) {
$(this).attr("class", "red");
}
});
</script>

11.使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而

empty()方法则只删除所选元素的子元素。