【必知必会】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>