jQuary相关基础操作

1.使用addClass()方法给元素加class属性。

$(".well").addClass("animated");                    #为class为well的元素添加animated属性
$("#well").addClass("animated");                    #为id为well的元素添加animated属性
$("button").addClass("animated");                   #为button标签添加animated属性

2.使用removeClass()删除HTML元素的class属性。

$("button").removeClass("btn");               #给button移除btn属性，只是在页面显示中取消显示，                                                
                                                                 #在代码中仍存在，给某id的元素移除属性类似。  

3.使用css()方法改变html元素的样式。

$(".well").css("color","red");                #修改class为well的元素下的字体颜色为红色
$("#well").css("color","red");               #修改id为well的元素下的字体颜色为红色 
$("button").css("color","red");            #修改button标签的字体颜色为红色

4.使用appendTo()方法移动一个html元素至另一元素尾部。

$("#well").appendTo("#very-well");
#将ID为well的元素移至ID为vary-well的元素尾部

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

target:nth-child(n)获取的是每一个平行的第一级的ID指向元素的第n个子元素。

下方举例则为修改ID为#left-well的元素下属的第2的子元素——#target2的字体颜色为蓝色。

<script>
$(document).ready(function() {
$(".target:nth-child(2)").css("color","blue");
});
</script>

<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>