jquery body 添加元素_jQuery练习

1.jQuery使用选择器获取HTML元素

例：使所有的button元素有弹回效果

$("button").addClass("animated bounce");

2.jQuery使用addClass()方法给元素加class

只需要用jQuery的.addClass()方法，就可以给元素加class了

首先使用$(".well")来获取所有带有wellclass的div元素

然后使用jQuery的.addClass()方法添加2个class：animated和shake

注意，像使用CSS声明一样，你需要在class的名称前面添加一个.

例：将下面的代码写在document ready function里，给所有具有text-primaryclass的元素添加animated和shake：

$(".text-primary").addClass("animated shake");

<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
{
$(".well").addClass("animated shake");
}
</script>

3.jQuery根据id属性来获取元素

首先使用$("#target3")选择器来选择id为target3的button元素

注意：就像CSS声明一样，在id的名称前加上一个#

然后使用jQuery的.addClass()方法来添加animated和fadeOutclass

例：给id为target6的button元素添加fade out效果

$("#target6").addClass("animated fadeOut")

4.使用jQuery选择器操作同一元素

使用.addClass()方法和上述三种jQuery选择器，分别给同一元素添加class：

给所有type为button的元素添加animatedclass

给所有class为.btn的按钮添加shakeclas

给所有id为#target1的按钮添加btn-primaryclass

<script>
$(document).ready(function() {
$("button").addClass("btn-primary")
$(".btn").addClass("animated")
$("#target1").addClass("shake")
});
</script>

5.使用jQuery删除HTML元素的class

可以通过jQuery的addClass()方法给元素添加class，同样的，也可以通过jQuery的removeClass()方法删除元素的class

例：把button元素中的#target2上的btn-defaultclass移除掉

$("#target2").removeClass("btn-default");

例：把所有button元素上的btn-defaultclass移除掉

$("button").removeClass("btn-default");

6.使用jQuery改变HTML元素的CSS样式

可以直接通过jQuery来改变HTML元素的CSS样式

jQuery有一个叫做.css()的方法，能改变元素的CSS样式

以下代码显示如何将颜色改变成蓝色：

$("#target1").css("color", "blue");

这跟一般的CSS语法有点不同，因为这里的CSS属性和值是在引号内的，并且用逗号分开，而不是冒号

例：删除你的jQuery选择器，把document ready function清空

选择target1并将其颜色变成红色

$("#target1").css("color", "red");

7.使用jQuery设置元素不可用

可以用jQuery改变HTML元素的非CSS的属性。例如可以禁用按钮

当把按钮设置成禁用以后，按钮会变灰并且不能点击

jQuery有一个.prop()的方法，可以来调整元素的属性

以下代码显示如何禁用所有按钮：

$("button").prop("disabled", true);

例：只让target1按钮禁用

$("#target1").prop("disabled", true);

8.使用jQuery改变元素中的文本

jQuery不仅可以改变HTML元素开始和结束标签之间的文本，还可以改变HTML元素标记本身

jQuery有一个.html()方法，可以在元素中添加HTML标签和文字，而元素中之前的内容都会被方法中的内容所替换掉

以下代码显示如何重写和强调标题文本（使用em标签）：

$("h3").html("<em>jQuery Playground</em>");

jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能添加标签

换句话说，这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本

例：强调id为target4按钮里的文本

$("#target4").html("<em>#target4</em>");

9.使用jQuery删除一个HTML元素

用jQuery从页面中删除一个HTML元素

jQuery 有一个.remove()的方法，可以彻底删除一个HTML元素

例：使用.remove()方法来删除页面中的target4元素

$("#target4").remove();

10.jQuery使用appendTo()移动HTML元素

把元素从一个div里移动到另外一个div里

jQuery有一个appendTo()方法，可以把选中的HTML元素附加到其他元素中

例：将target4从right-well移动到left-well

$("#target4").appendTo("#left-well"); 

例：将target2元素从left-well移动到right-well

$("#target2").appendTo("#right-well"); 

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

除了移动元素，还可以将元素从一个地方复制到另一个地方

jQuery有一个clone()方法，可以复制元素

例：把target2从left-well复制到right-well

$("#target2").clone().appendTo("#right-well"); 

上面是将两个jQuery方法合在一起使用了，这种叫方法链function chaining，它是jQuery的一种便捷方式

例：复制target5元素并将其附加到left-well

$("#target5").clone().appendTo("#left-well"); 

12.jQuery使用parent()操作父级元素

每个HTML元素都有一个parent元素，并从中继承属性

例：jQuery Playground中的h3元素的父元素是<div class="container-fluid">

<div class="container-fluid">的父元素是body

jQuery有一个parent()方法，可以允许访问选定元素的父元素

例：使用parent()设定left-well元素的父元素的背景色为蓝色

$("#left-well").parent().css("background-color", "blue")

例：设定#target1元素的父元素的背景色为红色

$("#target1").parent().css("background-color", "red")

13.jQuery使用children()操作子级元素

许多HTML元素都有children(子元素)，子元素从父元素那里继承属性

例：每个HTML元素都是body的子元素，jQuery Playground中的h3元素是<div class="container-fluid">的子元素

jQuery有一个children()方法，可以访问选定元素的子元素

例：使用children()方法设置left-well元素的子元素的文本颜色为蓝色

$("#left-well").children().css("color", "blue")

例：设置#right-well元素的所有子元素的文本颜色为橙色

$("#right-well").children().css("color", "orange")

14.jQuery使用target:nth-child(n) CSS选择器获取子元素

jQuery用CSS选择器来获取元素，target:nth-child(n)CSS选择器允许通过目标类或元素类型选择目标元素的所有子元素

例：给jQuery Playground中的每个井中（left well和right well）的第三个子元素添加bounce类：

$(".target:nth-child(3)").addClass("animated bounce");

例：给每个井中的第二个子元素添加bounce类，使用target类来获取目标元素的子元素

$(".target:nth-child(2)").addClass("animated bounce");

15.jQuery使用选择器操作偶数索引元素

还可以获取所有偶数元素。

例：通过targetclass获取所有奇数元素，并给它们添加class：

$(".target:odd").addClass("animated shake");

注意：jQuery里的索引是从0开始的，也就意味着会与直觉相反：

:odd选择的是第2、4、6……个元素，因为索引是1、3、5……

例：选择所有的偶数元素（索引为0、2、4……），并给它们添加animated和shakeclass

$(".target:evev").addClass("animated shake");

16.使用jQuery修改整个页面

jQuery也可以获取body元素

例：让整个body有淡出效果：

$("body").addClass("animated fadeOut");

例：给body元素添加animated 和hingeclass

$("body").addClass("animated hinge");