一、創建節點

以HTML創建新元素

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

以jQuery創建新元素

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

以DOM創建新元素

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

二、插入節點

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

//A.append(B):把B標簽拼接在A標簽內部結尾的位置。
                //參數可以傳遞任意多個標簽參數，會按照參數的傳遞順序把標簽拼接進文檔流中。
                //jq中的標簽拼接方法，可以把字符串類型、jq對象類型、DOM節點類型的標簽拼接進文檔流中。
//              $(document.body).append(pTag1);
            
                //A.appendTo(B):把A標簽添加到B標簽中（把A拼接進B的內部結尾位置）;
                //A必須是jq對象類型，B可以是DOM節點，JQ對象，標簽字符串類型，但是避免
                //標簽字符串參數，因為向字符串中拼接標簽，標簽會拼接失敗。
                
                //A.prepend(B):在A標簽內部的開始位置拼接B標簽
                $(document.body).prepend(pTag1);
//              $(document.body).prepend(pTag2);
//              $(document.body).prepend(pTag3);
                
                //A.after(B):在A標簽之后拼接B標簽（AB是兄弟標簽）
                $('p').after(pTag2);
                //A.before(B):在A標簽之前拼接B標簽（AB是兄弟標簽）
                $('p').before(pTag3);
                
                $('p').each(function(index,elem){
                    console.log(index);
                    console.log(elem);
                });

三、包裹節點操作

//A.wrap(B):讓B標簽當做A標簽的父級；如果A標簽有多個，則每一個A標簽都會有一個獨立的父級B
//              $('li').wrap('<ul></ul>');
                
                //A.wrapAll(B):讓B標簽當做A標簽的父級；如果A標簽有多個，則每一個A標簽都會有一個公用的
                //父級B；如果A的DOM結構中混入了其他標簽，會先把其他標簽移在所有的A標簽之后，然后再用B包裹。
                $('li').wrapAll('<ul></ul>');
                
                //A.wrapInner(B):在A標簽內部，添加B標簽，讓B標簽當做A標簽原來子標簽的父級；A是爺爺級、
                //B是父級、原來A的子級變成孫子級。

四、其他類型節點操作

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

//remove():刪除調用該方法的標簽，并且會把該標簽保存下來，以備后期拼接使用
                var tag=$('p').remove();
                console.log(tag);               
                $('button').click(function(){
                    alert('hehhehehe');
                });
                //var btn=$('button').remove();
                //刪除有事件函數的標簽
                var btn=$('button').detach();
                //把刪除的增加回來
                $(document.body).append(btn);               
                //remove()和detach()刪除標簽的區別：
                //remove()如果刪除具備事件函數的標簽，則標簽額事件函數會一同解除綁定，
把標簽添加回來時，就沒有對應的事件函數了
                //detach()如果刪除具備事件函數的標簽，則只是在DOM結構中把標簽移除，
該標簽綁定的事件函數不會移除，把標簽添加回來
                //事件函數照樣觸發。

復制節點（clone（））：

//復制DOM樹中的標簽，然后在添加在DOM樹中
//A.clone():拷貝DOM樹中的A節點，如果A節點有事件函數，而且需要一起拷貝，則需要傳參:true
                var btns=$('button').clone();

清空節點（empty（））：

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

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

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

五、屬性操作

用attr()獲取和設置元素屬性 ，removeAttr()來刪除元素屬性。
1、獲取屬性和設置屬性

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

注意： jQuery中很多方法都是同一個函數實現獲取和設置的，例如 attr() 技能獲取屬性的值，也能設置屬性的值。類似的還有html()、text()、height()、width()、val()、css()等方法。
2、刪除屬性

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

removeProp()函數用于移除在當前jQuery對象所匹配的每一個元素上指定的屬性。
window對象或DOM元素的一些內置屬性是不允許刪除的，如果試圖刪除這些屬性，將會導致瀏覽器產生一個錯誤。jQuery首先會將該屬性的值賦為undefined，并忽略掉瀏覽器生成的任何錯誤信息。

一般情況下，你最好使用該函數來刪除一些自定義的屬性，而不是內置屬性。

請不要使用本函數來刪除DOM元素的本地屬性checked、selected和disabled。這將徹底刪除對應的屬性，并且，一旦刪除之后，你無法再向該DOM元素重新添加對應的屬性。請使用prop()函數將其設為false即可，例如：jQueryObject.prop(“checked”, false)。

jQuery中attr和pop的區別：

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

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

1、操作對象不同

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

不過，在jQuery中，attribute和property卻是兩個不同的概念。attribute表示HTML文檔節點的屬性，property表示JS對象的屬性。

<!-- 這里的id、class、data_id均是該元素文檔節點的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()函數的設計目標是用于設置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property)；attr()函數的設計目標是用于設置或獲取指定DOM元素所對應的文檔節點上的屬性(attribute)。

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

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

<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 ) *** */

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

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



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

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

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

此外，雖然prop()針對的是DOM元素的property，而不是元素節點的attribute。不過DOM元素某些屬性的更改也會影響到元素節點上對應的屬性。例如，property的id對應attribute的id，property的className對應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)導致class(attitude)也隨之更改
document.writeln( $msg.attr("class") ); // newTest
</script>
2、應用版本不同

attr()是jQuery 1.0版本就有的函數，prop()是jQuery 1.6版本新增的函數。毫無疑問，在1.6之前，你只能使用attr()函數；1.6及以后版本，你可以根據實際需要選擇對應的函數。

3、用于設置的屬性值類型不同

由于attr()函數操作的是文檔節點的屬性，因此設置的屬性值只能是字符串類型，如果不是字符串類型，也會調用其toString()方法，將其轉為字符串類型。

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

4、其他細節問題

在jQuery 1.6之前，只有attr()函數可用，該函數不僅承擔了attribute的設置和獲取工作，還同時承擔了property的設置和獲取工作。例如：在jQuery 1.6之前，attr()也可以設置或獲取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery 1.6新增prop()函數，并用來承擔property的設置或獲取工作之后，attr()才只用來負責attribute的設置和獲取工作。

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

但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型，如果被選中(或禁用)就返回checked、selected或disabled，否則(即元素節點沒有該屬性)返回undefined。并且，在某些版本中，這些屬性值表示文檔加載時的初始狀態值，即使之后更改了這些元素的選中(或禁用)狀態，對應的屬性值也不會發生改變。

因為jQuery認為：attribute的checked、selected、disabled就是表示該屬性初始狀態的值，property的checked、selected、disabled才表示該屬性實時狀態的值(值為true或false)。

因此，在jQuery 1.6及以后版本中，請使用prop()函數來設置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實現的操作，也盡量使用prop()函數。

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

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

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

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

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

六、樣式操作

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

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

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

2、移除樣式

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

或者兩個都刪除：

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

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

3、切換樣式
toggleClass()控制樣式的重復切換，如果類名存在就刪除，類名不在就添加
若本來<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")；

七、設置和獲取HTML、文本和值

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

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

獲取內容：$("p").text()
設置內容：$("p").text("你最喜歡的水果是？")

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

$("p").val();
$("p").val("aaa");
另外，如果this是當前的文本框，則this.defaltValue是當前選中文本框的默認值
$("p").value(this.defaultValue);

另外，val()能使select（下拉列表框）、checkbox（多選框）和radio(單選框)相應的選項被選中，這在表單操作中經常會用到。

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>

八、遍歷節點

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

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

jQuery求子元素個數：

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

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

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

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

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

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

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

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

首先檢查當前元素是否匹配，如果匹配則直接返回元素本身 ，如果不匹配則向上查找父元素，逐級向上查找匹配選擇器的元素，如果什么都沒有則返回一個空的jQuery對象（只返回匹配的第一個元素節點，從自身的節點找起）

給點擊目標最近的li元素添加紅色：

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

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

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

九、css操作

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

十、元素定位

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

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

2.position() 獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移，返回對象有兩個屬性 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();

也可以指定參數

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