- 选择器(class
(".xxx")
id$("#xxx")
类$("xxx")
) - 添加元素class:
addClass()
方法给元素添加class - 删除元素class:
removeClass()
方法去掉元素上的class。$("#target2").removeClass("btn-default");
- 删除元素:
.remove()
的方法可以移除HTML元素。$("#target4").remove();
- 改变css样式:.css()的方法能让你改变元素的CSS样式。
$("#target1").css("color", "blue");
- 调整元素属性:.prop()的方法让你来调整元素的属性.
$("button").prop("disabled", true);//按钮不可选
- 添加HTML标签和文字:
.html()
方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。
6-1em
[emphasize]标签来重写和强调标题文本
6-2.text()
,它只能改变文本但不能修改标记。换句话说,这个方法只会把传进来的任何东西(包括标记)当成文本来显示。
$("h3").html("<em>jQuery Playground</em>");
- 移动元素:
.appendTo()
方法可以把选中的元素加到其他元素中。$("#target4").appendTo("#left-well");//移动添加至目标#left-well列表之后
- 拷贝元素:
.clone()
方法可以拷贝元素。$("#target5").clone().appendTo("#left-well");//两种指令写法:function chaining(方法链)
- 访问指定元素父级:
.parent()
,它允许你访问指定元素的父元素。$("#left-well").parent().css("background-color", "blue")
- 访问指定子集元素:
.children()
,它允许你访问指定元素的子元素。$("#left-well").children().css("color", "blue")
- 用CSS选择器来选取元素:
xxxx:nth-child(n)
CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素。
你可以给目标元素的第三个子元素添加bounce class。
$(".xxxx:nth-child(3)").addClass("animated bounce");
12-1:记住jQuery里的索引是从0开始的,也就是说,:odd(单数选择器) 选择第2、4、6个元素,因为target#2(索引为1),target#4(索引为3),target6(索引为5)。
12-2:even(双数选择器)选择第1、3、5个元素
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
$("body").addClass("animated hinge");
});
</script>
<!-- 请只修改这条注释以上的代码 -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>