一丶JQuery的文檔操作

　　1.插入操作:

　　　　父元素.append(子元素)

　　　　解釋:追加某元素,在父元素中添加新的子元素.子元素可以為:stirng|element(js對象)|JQuery元素

var oli = document.createElement(‘li‘);
oli.innerHTML = ‘哈哈哈‘;
$(‘ul‘).append(‘<li>1233</li>‘);
$(‘ul‘).append(oli);
$(‘ul‘).append($(‘#app‘));

　　如果追加的是JQuery對象那麽這些元素將從原位置上消失.簡言之,就是一個移動操作.

　　　　子元素.appendTo(父元素)

　　　　解釋:追加到某元素 子元素添加到父元素

$(‘<li>天王蓋地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)

　　要添加的元素同樣既可以是string丶element(js對象)丶JQuery元素

　　　　父元素.prepend(子元素)

　　　　解釋:前置添加,添加到父元素的第一個位置

$(‘ul‘).prepend(‘<li>我是第一個</li>‘)

　　　　子元素.prependTo(父元素)

　　　　解釋:前置添加,添加到父元素的的第一個位置

 $(‘<a href="#">路飛學誠</a>‘).prependTo(‘ul‘)

　　　　兄弟元素.after(要插入的兄弟元素)

　　　　要插入的兄弟元素.inserAfter(兄弟元素)

　　　　解釋:在匹配的元素之後插入內容

$(‘ul‘).after(‘<h4>我是一個h3標題</h4>‘)
$(‘<h5>我是一個h2標題</h5>‘).insertAfter(‘ul‘)

　　　　兄弟元素.before(要插入的兄弟元素)

　　　　要插入的兄弟元素.inserBefore(兄弟元素)

　　　　解釋:在匹配的元素之後插入內容

$(‘ul‘).before(‘<h3>我是一個h3標題</h3>‘)
$(‘<h2>我是一個h2標題</h2>‘).insertBefore(‘ul‘)

　　2.克隆操作

　　　　$(選擇器).clone()

　　　　解釋:克隆匹配的DOM元素

$(‘button‘).click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件處理並且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
})

　　3.修改操作

　　　　$(selector).replaceWith(content)

　　　　將所有匹配的元素替換成指定的string丶js對象丶JQuery對象

//將所有的h5標題替換為a標簽
$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)
//將所有h5標題標簽替換成id為app的dom元素
$(‘h5‘).replaceWith($(‘#app‘));

　　　　$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘)

　　　　解釋:替換所有.將所有的h2標簽替換成p標簽

$(‘<br/><hr/><button>按鈕</button>‘).replaceAll(‘h4‘)

　　4.刪除操作

　　　　$(selector).remove()

　　　　解釋:刪除節點後,事件也會刪除(簡言之,刪除了整個標簽)

$(‘ul‘).remove();

　　　　$(selector).detach()

　　　　解釋:刪除節點後,事件會保留

 var $btn = $(‘button‘).detach()
 //此時按鈕能追加到ul中
 $(‘ul‘).append($btn)

　　　　$(selector).empty()

　　　　解釋:清空選中元素中的所有後代節點

//清空掉ul中的子元素，保留ul
$(‘ul‘).empty()

二丶JQuery的位置信息

　　1.寬度和高度

　　 獲取寬度 .width()

　　　描述：為匹配的元素集合中獲取第一個元素的當前計算寬度值。這個方法不接受任何參數。.css(width) 和 .width()之間的區別是後者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字符串（例如，400px）。當一個元素的寬度需要數學計算的時候推薦使用.width() 方法 。

　　 設置寬度 .width(value)

　　　描述:給每個匹配的元素設置css寬度.

　　 獲取高度 .height()

　　　 描述:獲取匹配元素集合中的第一個元素的當前計算高度

　　　　　　這個方法不接受任何參數

　　　設置高度 .height()

　　　描述:設置每一個匹配元素的高度值.

　　2.innerHeight()和innerWidth()

　　　　獲取內部寬 .innerWidth()

　　　　描述:為匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding,但是不包括border.

　　　　這個方法不適用於window和document對象,對於這些對象可以使用 .width()代替

　　　　設置內部寬 .innerWidth(value)

　　　　描述; 為匹配集合中的每一個元素設置CSS內部寬度.如果這個"value"參數提供一個數字,JQuery會自動加上像素單位(px)

　　　　獲取內部高 innerrHeight()

　　　　描述:為匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding,但是不包括border.

　　　　這個方法不適用於window和document對象,對於這些對象可以使用.height()代替

　　　　設置內部寬: innerHeight(value)

　　　　描述:為匹配集合中的每個元素設置CSS內部高度.如果這個"value"參數提供一個數字,JQuery會自動加上像素單位(px)

　　3.outWidth和outHeight()

　　　　獲取外部寬 .outerWidth([includeMargin])

　　　　描述:獲取匹配元素集合中第一個元素的當前計算外部寬度(包括padding,border和可選的margin)

　　　　includeMargin(默認: false)

　　　　類型; Boolean

　　　　一個布爾值,表面是否在計算時包含元素的margin值

　　　　這個方法不適用於window和document對象,可以使用 .width()代替

　　　　設置外部寬: .outerWidth(value)

　　　　描述:為匹配集合中的每個元素設置 CSS外部寬度

　　　　獲取外部寬　　.outerHeight([includeMargin])

　　　　描述:獲取匹配元素集合中第一個元素的當前計算外部高度(包括padding,border和可選的margin)

　　　　includeMargin(默認; false)

　　　　類型: Boolean

　　　　一個布爾值,表明是否在計算時包含元素的margin值

　　　　這個方法不適用於window和document對象,可以使用.width()代替

　　　　設置外部高 .outerHeight( value)

　　　　描述:為匹配集合中的每個元素設置CSS外部高度

　　4.偏移

　　　　獲取 .offset()

　　　　返回值：Object 。.offset()返回一個包含top 和 left屬性的對象 。

　　　　描述：在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對於文檔。

　　　　註意：jQuery不支持獲取隱藏元素的偏移坐標。同樣的，也無法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden，那麽我們依然可以取得它的坐標

　　　　設置 .offset(coordinates)

　　　　描述;設置匹配元素集合中每一個元素的坐標,坐標相對於文檔

　　　　coordinates

　　　　　　類型: Object

　　　　　一個包含top和left屬性的對象,用整數指明元素的新頂部和左邊坐標

$("p").offset({ top: 10, left: 30 });

　　5.元素坐標

　　　　.position()

　　　　返回值:Object{top,left}

　　　　描述:獲取匹配元素中第一個元素的當前坐標,相對於offset paren的坐標(offset parent指離該元素最近的而且被定位過的祖先元素)

　　　　當把一個新元素放在同一個容器裏面另一個元素附近時,用 .position()更好用

　　6.滾動距離

　　　　水平方向:

　　　　　　獲取: .scrolLeft()

　　　　　　描述:獲取匹配的元素集合第一個元素的當前水平滾動條的位置(頁面卷走的寬度)

　　　　　　設置: .scrolLeft(value)

　　　　　　描述:設置每個匹配元素的水平方向滾動條位置

　　　　垂直方向:

　　　　　　獲取: .scrollTop()

　　　　　　描述:獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置(頁面卷走的高度)

　　　　　　設置: .scrollLeft(value)

　　　　　　描述:設置每個匹配元素的垂直方向滾動條位置

JQuery初識(三 )