平時都是寫angular帚桩，突然想寫jquery的時候發(fā)現(xiàn)，有時候操作元素的方法嘹黔，好多都忘記了账嚎，現(xiàn)在抽時間把之前用過的方法都重心在熟悉一下，方便自己以后儡蔓。
以下就介紹一些經(jīng)常使用的jq中操作dom元素的常見方法：
.val() 和 .html() 方法
- .val() :用于設(shè)置或返回選中元素的值
- .html() : 用于設(shè)置或返回選中元素的HTML內(nèi)容
示例:
val()方法： 用于 返回 或設(shè)置被選元素的值郭蕉。
語法：
$('#id').val(value)；
- value參數(shù)是 選填 的喂江，它 用于規(guī)定被選元素的新內(nèi)容 召锈。
- 如果value 有值 的話，就是 設(shè)置 新值获询；
- 如果value 沒值 的話涨岁，就是 獲取并返回 被選元素的當(dāng)前值；
- 多用于input元素吉嚣；
html() 方法 與 val()方法的不同之處在于：html()方法返回的或設(shè)置的是被選元素的內(nèi)容（類似innerHTML）梢薪；
html() 的參數(shù) 可以包含標(biāo)簽 :
$("p").html("Hello <b>world</b>!");
html()要注意的兩點：
- 參數(shù)為空時，取值尝哆，但 只返回第一個被選元素的內(nèi)容
$('p').html();
- 參數(shù)不為空時秉撇，設(shè)置內(nèi)容，但它會 覆蓋所有匹配元素的內(nèi)容
$(selector).html(content);
// content 可選秋泄。規(guī)定被選元素的新內(nèi)容琐馆。該參數(shù)可包含 HTML 標(biāo)簽。
attr() 和 removeAttr()
- attr(): 用于設(shè)置或返回匹配元素的屬性和值印衔；
- removeAttr() ： 用于移除指定的屬性啡捶；
attr() 方法設(shè)置或返回被選元素的屬性值
常見的幾種使用情形：
- 返回指定元素的指定屬性的值：
$(選擇器).attr(要獲取的某個屬性的屬性名)；
// 比如要獲取id為demo的元素的高度
$('#demo').attr("height");
記得屬性名也要加引號奸焙！
- 設(shè)置屬性/值
$("選擇器").attr("屬性名"， "屬性值");
// 比如設(shè)置元素的寬度
$("#id").attr("width", "600");
- 一次設(shè)置多個屬性/值
- 使用{}，以key-val的鍵值對形式指定屬性名：屬性值与帆，多個之間以逗號隔開
$(selector).attr({attribute:value, attribute:value ...})
// 示例：
$("#id").attr({"width": "300", "height": "100" });
與之相反的是 removeAttr() 方法了赌，它用于移除被選元素的指定屬性
$(selector).removeAttr(attribute);
要注意的是，必須指定要移除哪個屬性玄糟，也就是說attrbute這個屬性名是必填的勿她。
- 示例：
$("div").removeAttr("color");
addClass() 和 removeClass()
- addClass() : 用于 添加指定的類，這個有時候會很有用阵翎；
- removeClass() : 與上面的方法正好相反逢并，用于 刪除 全部或某個特定的類；
- 這兩個方法其實有時候也可以 連起來一起使用郭卫，比如你先移除某個類砍聊，在追加另一個類：
<style>
.className1{ // style1 }
.className2{ //style2 }
</style>
$("p").removeClass("className1").addClass("className2");
addClass() 向被選元素添加一個或多個類
$(選擇器).addClass(className);
注意：
- 這個方法 不會移除已經(jīng)存在的class屬性 ，它只是在原有的基礎(chǔ)上增加了一個或多個新的class屬性贰军，不會覆蓋之前存在的class玻蝌；
- 要增加 多個class 的話， 中間以空格隔開
$("p").addClass("class1 class2");
removeClass() 方法從被選元素移除一個或多個類
$(selector).removeClass(class);
class ,參數(shù)選填词疼，指定移除的類的名稱俯树；
移除多個，中間加空格贰盗；
$("p").removeClass('class1 class2');
- 如果class為空時许饿，則移除備選元素的所有class
$("#p").removeClass();//移除id為p的元素的所有類
toggleClass() ： 模擬反選，從匹配的元素中添加或刪除一個類
toggleClass() ： 可以對設(shè)置或移除被選元素的一個或多個類進行切換舵盈。
該方法檢查每個元素中指定的類米辐。
如果不存在則添加類，如果已設(shè)置則刪除之。
這樣就可以達到切換效果笆凌。
不過覆享，通過使用 "switch" 參數(shù)，您能夠規(guī)定只刪除或只添加類狸页。
$(selector).toggleClass(class,switch);
示例：
實現(xiàn)的效果就是，如果p標(biāo)簽有main這個類就移除扯再，沒有就添加芍耘。
這個很有用，記得最早之前熄阻，我做反轉(zhuǎn)效果斋竞，還是用的for循環(huán)，使用的排他思想秃殉，太麻煩了坝初；
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p class='main'>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切換段落的 "main" 類</button>
</body>
</html>
如何判斷被選元素是否包含指定類-- hasClass()
hasClass() 方法檢查被選元素是否包含指定的 class浸剩。
$(selector).hasClass(class);
- class 必需參數(shù)，它規(guī)定需要在指定元素中查找的類鳄袍。
- 返回的結(jié)果是 布爾值：
- 如果有指定class返回true绢要；
- 如果不含有指定class，則返回false拗小；
