標籤:word 增刪改查 com lang ring tee taf for 哈哈哈
之前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的檔案操作