1. 程式人生 > >前端 ----jQuery的文件操作

前端 ----jQuery的文件操作

選擇 taf 技術分享 key script operator dom before div

之前js中咱們學習了js的DOM操作,也就是所謂的增刪改查DOM操作。通過js的DOM的操作,大家也能發現,大量的繁瑣代碼實現我們想要的效果。那麽jQuery的文檔操作的API提供了便利的方法供我們操作我們的文檔。

看一個之前我們js操作DOM的例子:

var oUl = document.getElementsByTagName(‘ul‘)[0];
var oLi = document.createElement(‘li‘);
oLi.innerHTML = ‘趙雲‘;
oUl.appendChild(oLi);

一.插入操作

知識點1:

語法:

父元素.append(子元素)

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

代碼如下:

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

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

知識點2:

語法:

子元素.appendTo(父元素)

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

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

PS:要添加的元素同樣既可以是stirng 、element(js對象) 、 jquery元素

知識點3:

語法:

父元素.prepend(子元素);

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

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

知識點4:

語法:

子元素.prependTo(父元素);

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

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

知識點5:

語法:

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

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

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

知識點6:

語法:

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

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

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

二、克隆操作

語法:

$(選擇器).clone();

解釋:克隆匹配的DOM元素

技術分享圖片
$(‘button‘).click(function() {

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

三、修改操作

知識點1:

語法:

$(selector).replaceWith(content);

將所有匹配的元素替換成指定的string、js對象、jquery對象。

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

知識點2:

語法:

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

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

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

4、刪除操作

知識點1:

語法:

$(selector).remove(); 

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

$(‘ul‘).remove();

知識點2:

語法:

$(selector).detach(); 

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

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

知識點3:

語法:

$(selector).empty(); 

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

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

前端 ----jQuery的文件操作