一、創(chuàng)建節(jié)點

以HTML創(chuàng)建新元素

var txt1="<p>Text.</p>";                                                    

以jQuery創(chuàng)建新元素

var txt2=$('<p></p>').text('text.');

以DOM創(chuàng)建新元素

var txt3=document.createElement("p");       
txt3.innerHTML="Text.";

二厦滤、插入節(jié)點

通過js的DOM操作只能插入插入jsDOM創(chuàng)建出來的標(biāo)簽，不能插入字符串類型和jq創(chuàng)建出來的標(biāo)簽。
操作函數(shù)有：append(),appendTo(),prepend(),after(),before():

//A.append(B):把B標(biāo)簽拼接在A標(biāo)簽內(nèi)部結(jié)尾的位置夺克。
                //參數(shù)可以傳遞任意多個標(biāo)簽參數(shù)，會按照參數(shù)的傳遞順序把標(biāo)簽拼接進(jìn)文檔流中嚎朽。
                //jq中的標(biāo)簽拼接方法铺纽，可以把字符串類型、jq對象類型哟忍、DOM節(jié)點類型的標(biāo)簽拼接進(jìn)文檔流中狡门。
//              $(document.body).append(pTag1);
            
                //A.appendTo(B):把A標(biāo)簽添加到B標(biāo)簽中（把A拼接進(jìn)B的內(nèi)部結(jié)尾位置）;
                //A必須是jq對象類型，B可以是DOM節(jié)點锅很，JQ對象其馏，標(biāo)簽字符串類型，但是避免
                //標(biāo)簽字符串參數(shù)爆安，因為向字符串中拼接標(biāo)簽叛复，標(biāo)簽會拼接失敗。
                
                //A.prepend(B):在A標(biāo)簽內(nèi)部的開始位置拼接B標(biāo)簽
                $(document.body).prepend(pTag1);
//              $(document.body).prepend(pTag2);
//              $(document.body).prepend(pTag3);
                
                //A.after(B):在A標(biāo)簽之后拼接B標(biāo)簽（AB是兄弟標(biāo)簽）
                $('p').after(pTag2);
                //A.before(B):在A標(biāo)簽之前拼接B標(biāo)簽（AB是兄弟標(biāo)簽）
                $('p').before(pTag3);
                
                $('p').each(function(index,elem){
                    console.log(index);
                    console.log(elem);
                });

三、包裹節(jié)點操作

//A.wrap(B):讓B標(biāo)簽當(dāng)做A標(biāo)簽的父級褐奥；如果A標(biāo)簽有多個咖耘，則每一個A標(biāo)簽都會有一個獨立的父級B
//              $('li').wrap('<ul></ul>');
                
                //A.wrapAll(B):讓B標(biāo)簽當(dāng)做A標(biāo)簽的父級；如果A標(biāo)簽有多個撬码，則每一個A標(biāo)簽都會有一個公用的
                //父級B儿倒；如果A的DOM結(jié)構(gòu)中混入了其他標(biāo)簽，會先把其他標(biāo)簽移在所有的A標(biāo)簽之后呜笑，然后再用B包裹义桂。
                $('li').wrapAll('<ul></ul>');
                
                //A.wrapInner(B):在A標(biāo)簽內(nèi)部，添加B標(biāo)簽蹈垢，讓B標(biāo)簽當(dāng)做A標(biāo)簽原來子標(biāo)簽的父級慷吊；A是爺爺級、
                //B是父級曹抬、原來A的子級變成孫子級溉瓶。

四、其他類型節(jié)點操作

刪除節(jié)點(remove()和detach())：

//remove():刪除調(diào)用該方法的標(biāo)簽谤民，并且會把該標(biāo)簽保存下來堰酿，以備后期拼接使用
                var tag=$('p').remove();
                console.log(tag);               
                $('button').click(function(){
                    alert('hehhehehe');
                });
                //var btn=$('button').remove();
                //刪除有事件函數(shù)的標(biāo)簽
                var btn=$('button').detach();
                //把刪除的增加回來
                $(document.body).append(btn);               
                //remove()和detach()刪除標(biāo)簽的區(qū)別：
                //remove()如果刪除具備事件函數(shù)的標(biāo)簽，則標(biāo)簽額事件函數(shù)會一同解除綁定张足，
把標(biāo)簽添加回來時触创，就沒有對應(yīng)的事件函數(shù)了
                //detach()如果刪除具備事件函數(shù)的標(biāo)簽，則只是在DOM結(jié)構(gòu)中把標(biāo)簽移除为牍，
該標(biāo)簽綁定的事件函數(shù)不會移除哼绑，把標(biāo)簽添加回來
                //事件函數(shù)照樣觸發(fā)。

復(fù)制節(jié)點（clone（））：

//復(fù)制DOM樹中的標(biāo)簽碉咆，然后在添加在DOM樹中
//A.clone():拷貝DOM樹中的A節(jié)點抖韩，如果A節(jié)點有事件函數(shù)，而且需要一起拷貝疫铜，則需要傳參:true
                var btns=$('button').clone();

清空節(jié)點（empty（））：

//清空節(jié)點操作
                $('div').empty();

替換節(jié)點（replaceWith(）和repalceAll（）)：

//替換節(jié)點
                $('a').replaceWith('<a>三生三世</a>');
                //A.repalceWith(B):用B標(biāo)簽替換A標(biāo)簽（頁面上顯示的是B標(biāo)簽）
                //A.repalceAll(B):用A標(biāo)簽替換B標(biāo)簽（頁面上顯示的是A標(biāo)簽）

五茂浮、屬性操作

用attr()獲取和設(shè)置元素屬性 ，removeAttr()來刪除元素屬性壳咕。
1席揽、獲取屬性和設(shè)置屬性

var $para=$("p");
var para_txt=$para.attr("title");//獲取屬性title的值
$("p").attr("title","your title");//設(shè)置屬性title的值為your title
$("p").attr({"title":"your title","name":"your name"})；//為一個元素設(shè)置多個屬性

注意： jQuery中很多方法都是同一個函數(shù)實現(xiàn)獲取和設(shè)置的谓厘，例如 attr() 技能獲取屬性的值幌羞，也能設(shè)置屬性的值。類似的還有html()庞呕、text()新翎、height()程帕、width()、val()地啰、css()等方法愁拭。
2、刪除屬性

$("p").removeAttr("title");

removeProp()函數(shù)用于移除在當(dāng)前jQuery對象所匹配的每一個元素上指定的屬性亏吝。
window對象或DOM元素的一些內(nèi)置屬性是不允許刪除的岭埠，如果試圖刪除這些屬性，將會導(dǎo)致瀏覽器產(chǎn)生一個錯誤蔚鸥。jQuery首先會將該屬性的值賦為undefined惜论，并忽略掉瀏覽器生成的任何錯誤信息。

一般情況下止喷，你最好使用該函數(shù)來刪除一些自定義的屬性馆类，而不是內(nèi)置屬性。

請不要使用本函數(shù)來刪除DOM元素的本地屬性checked弹谁、selected和disabled乾巧。這將徹底刪除對應(yīng)的屬性，并且预愤，一旦刪除之后沟于，你無法再向該DOM元素重新添加對應(yīng)的屬性。請使用prop()函數(shù)將其設(shè)為false即可植康，例如：jQueryObject.prop(“checked”, false)旷太。

jQuery中attr和pop的區(qū)別：

在jQuery中，attr()函數(shù)和prop()函數(shù)都用于設(shè)置或獲取指定的屬性销睁，它們的參數(shù)和用法也幾乎完全相同供璧。

但不得不說的是，這兩個函數(shù)的用處卻并不相同榄攀。下面我們來詳細(xì)介紹這兩個函數(shù)之間的區(qū)別嗜傅。
[解析來自網(wǎng)絡(luò)，點擊查看](http://www.365mini.com/page/jquery-attr-vs-prop.htm)

1檩赢、操作對象不同

很明顯，attr和prop分別是單詞attribute和property的縮寫违寞，并且它們均表示"屬性"的意思贞瞒。

不過，在jQuery中趁曼，attribute和property卻是兩個不同的概念军浆。attribute表示HTML文檔節(jié)點的屬性，property表示JS對象的屬性挡闰。

<!-- 這里的id乒融、class掰盘、data_id均是該元素文檔節(jié)點的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 這里的name、age赞季、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>
在jQuery中愧捕，prop()函數(shù)的設(shè)計目標(biāo)是用于設(shè)置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property)申钩；attr()函數(shù)的設(shè)計目標(biāo)是用于設(shè)置或獲取指定DOM元素所對應(yīng)的文檔節(jié)點上的屬性(attribute)次绘。

<!-- attr()函數(shù)針對的是該文檔節(jié)點的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函數(shù)針對的是該DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>
當(dāng)然，在jQuery的底層實現(xiàn)中撒遣，函數(shù)attr()和prop()的功能都是通過JS原生的Element對象(如上述代碼中的msg)實現(xiàn)的邮偎。attr()函數(shù)主要依賴的是Element對象的getAttribute()和setAttribute()兩個方法暑竟。prop()函數(shù)主要依賴的則是JS中原生的對象屬性獲取和設(shè)置方式络它。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依賴的是Element對象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 相當(dāng)于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相當(dāng)于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145



/* *** prop()依賴的是JS原生的 element[property] 和 element[property] = value; *** */

// 相當(dāng)于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相當(dāng)于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>
當(dāng)然，jQuery對這些操作方式進(jìn)行了封裝殿怜，使我們操作起來更加方便(比如以對象形式同時設(shè)置多個屬性)廉涕，并且實現(xiàn)了跨瀏覽器兼容泻云。

此外，雖然prop()針對的是DOM元素的property火的，而不是元素節(jié)點的attribute壶愤。不過DOM元素某些屬性的更改也會影響到元素節(jié)點上對應(yīng)的屬性。例如馏鹤，property的id對應(yīng)attribute的id征椒，property的className對應(yīng)attribute的class。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)導(dǎo)致class(attitude)也隨之更改
document.writeln( $msg.attr("class") ); // newTest
</script>
2湃累、應(yīng)用版本不同

attr()是jQuery 1.0版本就有的函數(shù)勃救，prop()是jQuery 1.6版本新增的函數(shù)。毫無疑問治力，在1.6之前蒙秒，你只能使用attr()函數(shù)；1.6及以后版本宵统，你可以根據(jù)實際需要選擇對應(yīng)的函數(shù)晕讲。

3、用于設(shè)置的屬性值類型不同

由于attr()函數(shù)操作的是文檔節(jié)點的屬性马澈，因此設(shè)置的屬性值只能是字符串類型瓢省，如果不是字符串類型，也會調(diào)用其toString()方法痊班，將其轉(zhuǎn)為字符串類型勤婚。

prop()函數(shù)操作的是JS對象的屬性，因此設(shè)置的屬性值可以為包括數(shù)組和對象在內(nèi)的任意類型涤伐。

4馒胆、其他細(xì)節(jié)問題

在jQuery 1.6之前缨称，只有attr()函數(shù)可用，該函數(shù)不僅承擔(dān)了attribute的設(shè)置和獲取工作祝迂，還同時承擔(dān)了property的設(shè)置和獲取工作睦尽。例如：在jQuery 1.6之前，attr()也可以設(shè)置或獲取tagName液兽、className骂删、nodeName、nodeType等DOM元素的property四啰。

直到j(luò)Query 1.6新增prop()函數(shù)宁玫，并用來承擔(dān)property的設(shè)置或獲取工作之后，attr()才只用來負(fù)責(zé)attribute的設(shè)置和獲取工作柑晒。

此外欧瘪，對于表單元素的checked、selected匙赞、disabled等屬性佛掖，在jQuery 1.6之前，attr()獲取這些屬性的返回值為Boolean類型：如果被選中(或禁用)就返回true涌庭，否則返回false芥被。

但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型坐榆，如果被選中(或禁用)就返回checked拴魄、selected或disabled，否則(即元素節(jié)點沒有該屬性)返回undefined席镀。并且匹中，在某些版本中，這些屬性值表示文檔加載時的初始狀態(tài)值豪诲，即使之后更改了這些元素的選中(或禁用)狀態(tài)顶捷，對應(yīng)的屬性值也不會發(fā)生改變。

因為jQuery認(rèn)為：attribute的checked屎篱、selected服赎、disabled就是表示該屬性初始狀態(tài)的值，property的checked交播、selected专肪、disabled才表示該屬性實時狀態(tài)的值(值為true或false)。

因此堪侯，在jQuery 1.6及以后版本中，請使用prop()函數(shù)來設(shè)置或獲取checked荔仁、selected伍宦、disabled等屬性芽死。對于其它能夠用prop()實現(xiàn)的操作，也盡量使用prop()函數(shù)次洼。

<input id="uid" type="checkbox" checked="checked" value="1">

<script type="text/javascript">
// 當(dāng)前jQuery版本為1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true

// 取消復(fù)選框uid的選中(將其設(shè)為false即可)
// 相當(dāng)于 uid.checked = false;
$uid.prop("checked", false);

// attr()獲取的是初始狀態(tài)的值关贵，即使取消了選中，也不會改變
document.writeln( $uid.attr("checked") ); // checked
// prop()獲取的值已經(jīng)發(fā)生變化
document.writeln( $uid.prop("checked") ); // false
</script>

六卖毁、樣式操作

1揖曾、追加樣式
addClass()
首先在<style>標(biāo)簽里添加另一組樣式：

<style>
.high{
    font-weight:bold;
    color:red;
    }
.another{
        font-style:italic;/*斜體*/
        color:blue;
        }
</style>

原本代碼：<p class="high" title="">abc</p>
執(zhí)行：$("p").addClass("another");
此時 p的class為“high　 another”
如果給一個元素添加了多個class值，那么就相當(dāng)于合并了他們的樣式亥啦；如果有不同的class設(shè)定了同一個樣式屬性炭剪，則后者覆蓋前者。

2翔脱、移除樣式

$("p").removeClass("high");

或者兩個都刪除：

`$("p").removeClass("high").removeClass("another");`
$("p").removeClass("high 　another")奴拦；

移除所有class：$("p").removeClass();

3、切換樣式
toggleClass()控制樣式的重復(fù)切換届吁，如果類名存在就刪除错妖，類名不在就添加
若本來<p class="myclass"></p>,
jQuery語句為：$("p").toggleClass("another");
點擊切換樣式按鈕，則變成<p class="myclass another"></p>,
再點擊一次切換按鈕 疚沐，則又變成<p class="myclass"></p>
不斷點擊他就會在這兩種情況中來回切換暂氯。

4.判斷是否含有某個樣式
hasClass()判斷是否含有某個class 有返回true 沒有返回false
$("p").hasClass("another")；

七亮蛔、設(shè)置和獲取HTML痴施、文本和值

1.html() 用來讀取或設(shè)置 某個元素中的HTML內(nèi)容，可用于XHTML文檔尔邓，不能用于XML文檔
示例：<p><strong>q</strong></p>
jQuery:$("p").html()
獲得的結(jié)果是:<strong>q</strong>
設(shè)置p元素的html代碼：$("p").html("<strong>p</strong>")

2.text() 用來讀取或設(shè)置某個元素的文本內(nèi)容

獲取內(nèi)容：$("p").text()
設(shè)置內(nèi)容：$("p").text("你最喜歡的水果是晾剖？")

3.val()方法 用來獲取或設(shè)置元素的值

$("p").val();
$("p").val("aaa");
另外，如果this是當(dāng)前的文本框梯嗽，則this.defaltValue是當(dāng)前選中文本框的默認(rèn)值
$("p").value(this.defaultValue);

另外齿尽，val()能使select（下拉列表框）、checkbox（多選框）和radio(單選框)相應(yīng)的選項被選中灯节，這在表單操作中經(jīng)常會用到循头。

HTML代碼：
 <select id="multiple" multiple="multiple" style="height:120px">
  <option selected="selected">選擇1號</option>
  <option >選擇2號</option>
  <option >選擇3號</option>
  <option >選擇4號</option>
  <option selected="selected">選擇5號</option>
  </select>

八、遍歷節(jié)點

1.children() 取得匹配元素的子元素集合炎疆，此方法只考慮子元素卡骂，不考慮其他后代元素。
示例HTML代碼：

<body>
  <p></p>
  <ul>
    <li></li>
    <li></li>
  </ul>
</body>

jQuery求子元素個數(shù)：

var $body=$("body").children;
alert($body.length);//得到2

2.next() 取得匹配元素后緊鄰的同輩元素
根據(jù)上個html例子

$("p").next()得到的結(jié)果是：
<ul>
  <li></li>
  <li></li>
</ul>

3.prev() 得到匹配元素前面緊鄰的同輩元素

$("ul").prev()//得到結(jié)果為<p></p>

4.siblings() 取得匹配元素前后所有同輩元素

$("p").siblings()
//得到結(jié)果為：
<ul>
 <li></li>
 <li></li>
</ul>

6.closest() 取得最近的匹配元素

首先檢查當(dāng)前元素是否匹配形入，如果匹配則直接返回元素本身 全跨，如果不匹配則向上查找父元素，逐級向上查找匹配選擇器的元素亿遂，如果什么都沒有則返回一個空的jQuery對象（只返回匹配的第一個元素節(jié)點浓若，從自身的節(jié)點找起）

給點擊目標(biāo)最近的li元素添加紅色：

$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})

7.parent（） 獲得每個匹配元素的父級元素渺杉，從指定類型的直接父節(jié)點開始查找，返回一個元素節(jié)點

8.parents() 獲得每個匹配元素的祖先元素 返回多個父節(jié)點

九挪钓、css操作

讀取和設(shè)置style對象的各種屬性
css()獲取元素的樣式屬性：$("p").css("color");
css()設(shè)置元素的單個樣式：$("p").css("color","red")
css(0設(shè)置元素多個樣式:
$("p").css({"fontsize":"30px","backgroundColor":"red"})
透明度設(shè)置為半透明$("p").css("opacity","0.5")
獲取元素高度：$("p").css("height")或者$("p").height()
設(shè)置元素高度：$("p").height(100)//如果是數(shù)字會自動轉(zhuǎn)化為px
注意：css()獲取的高度值與樣式的設(shè)置有關(guān)是越，可能得到“auto”，也可能得到“10px”之類碌上，但是height獲取的高度值是元素在頁面中的實際高度倚评，而且不帶單位，與樣式的設(shè)置無關(guān)馏予。
類似的還有width()

十天梧、元素定位

1.offset() 　獲取元素在當(dāng)前視窗的相對偏移，其中返回的對象包含top和left兩個屬性吗蚌，向右為正腿倚，向下為正，只對可見元素有效,返回值 為object類型蚯妇。

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

2.position() 獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對偏移敷燎，返回對象有兩個屬性 top與left。

var position =$("p").position();
var left=position.left;
var top=position.top;

3.scrollTop()和scrollLeft()
獲取滾動條距離左端的距離和頂端的距離

var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();

也可以指定參數(shù)

$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);