Dom操作常用方法
.append()/.prepend()
.append()函數用于向每個匹配元素內部的末尾位置追加指定的內容
.prepend()函數用于向每個匹配元素內部的起始位置追加指定的內容。
指定的內容可以是：html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)。
$("p").append( '<p>插入段落</p>' ) // 插入DOM元素
$('p').append($('strong')) // 插入jQuery對象，如果追加的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。
//簡而言之，這相當于一個移動操作，而不是復制操作。
$('p').append(function(index){ // 插入function，函數傳入兩個參數：第一個參數就//是當前元素在匹配元素中的索引，
第二個參數就是該元素當前的內部html內容(innerHTML)
return '插入段落' + index
})
.before()/.after()
.before()函數用于在每個匹配元素之前插入指定的內容
.after()函數用于在每個匹配元素之后插入指定的內容。
指定的內容可以是：html字符串、DOM元素(或數組)、jQuery對象、函數(返回值)。
$('p').before('<i>somthing</i>')
$('p').after('$('#id')') //插入的內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。
//簡而言之，這相當于一個移動操作，而不是復制操作。
.remove()/.empty()
.remove()刪除被選元素（及其子元素）
.empty()清空被選擇元素內所有子元素
$('p').remove()
$('p').empty()
$('p').remove('.class') //通過添加選擇器，可以進行過濾刪除
.html()/.text()
.html()函數用于設置或返回當前jQuery對象所匹配的DOM元素內innerHTML
.text()函數用于設置或返回當前jQuery對象所匹配的DOM元素內innerText
<div>
<p>段落1</p>
<p>段落2</p>
</div>
$('div').html()
// 返回結果：
"
<p>段落1</p>
<p>段落2</p>
"
$('div').text()
// 返回結果：
"
段落1
段落2
"
屬性操作常用方法
.val()
函數用于設置或返回當前jQuery對象所匹配的DOM元素的value值，該函數常用于設置或獲取表單元素的value屬性值。例如：<input>、<textarea>、<select>、<option>、<button>等。
$('input').val('somthing') //設置所有選中的input的value為somthing。
.attr()/.prop()
.attr()和.prop()函數都用于設置或返回當前jQuery對象所匹配的元素節點的屬性值。
兩者使用上的區別是：對于HTML元素本身就帶有的固有屬性，在處理時，建議使用prop方法。對于HTML元素我們自己自定義的DOM屬性，在處理時，建議使用attr方法。
<input id="chk1" type="checkbox" action='123' >
// .prop()用于設置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property)
$("#chk1").prop("action") // undefined
document.querySelector('#chk1').action // undefined
// .attr()用于設置或獲取指定DOM元素所對應的文檔節點上的屬性(attribute)
$('#chk1').attr('action') // '123'
document.querySelector('#chk1').getAttribute('action') // "123"
$("#chk1").prop("checked") // false
$("#chk1").attr("checked") // undefined
document.querySelector('#chk1').checked //false
document.querySelector('#chk1').getAttribute('checked') //null
//勾選checkbox后 .attr()函數不會更新
$("#chk1").prop("checked") //true
$("#chk1").attr("checked") //undefined
document.querySelector('#chk1').checked //true
document.querySelector('#chk1').getAttribute('checked') //null
.removeAttr()
函數用于移除在當前jQuery對象所匹配的每一個元素節點上指定的屬性
$('img').removeAttr('alt') //刪除所有img標簽中的alt屬性
.css()
函數用于設置或返回當前jQuery對象所匹配的元素的css樣式屬性值。
$('div').css('fontSize', '20px') //設置
$('div').css('fontSize') //獲取
.addClass() /.removeClass()/.toggleClass()
.addClass()函數用于為當前jQuery對象所匹配的每一個元素添加指定的css類名。
.removeClass() 移除當前jQuery對象所匹配的每一個元素上指定的css類名。
.toggleClass()切換當前jQuery對象所匹配的每一個元素上指定的css類名。
$('div').addClass('clearfix') //增加clearfix類
$('div').removeClass('clearfix') //刪除clearfix類
$('div').toggleClass('clearfix') //切換clearfix類
.hasClass()
指示當前jQuery對象所匹配的元素是否含有指定的css類名。返回值是Boolean類型
$('div').hasClass("bar")
其他常用函數
.each()
函數用于以當前jQuery對象匹配到的每個元素作為上下文來遍歷執行指定的函數。所謂的上下文，意即該函數內部的this指針引用了該元素。
$("ul li").each(function(index, element){
// this === element
$(element).html( "編號" + (index + 1) );
});
$.extend()
函數用于將一個或多個對象的內容合并到目標對象。
var x = { name:"CodePlayer" };
var y = { age: 18 };
var z = { site: "www.365mini.com" };
// y和z的屬性將被合并復制到對象x上
var obj = $.extend( x, y, z );
.clone()
函數用于克隆當前匹配元素集合的一個副本，并以jQuery對象的形式返回
$('div').clone()
.index()
函數用于獲取當前jQuery對象中指定DOM元素的索引值。
$('li').index($('li.active'))
.ready()
函數用于在當前文檔結構載入完畢后立即執行指定的函數。
$(document).ready( function(){
alert('hello world')
});
