06 jQuery的文件操作

2022-03-23 12:42:04 字數 2035 閱讀 2565

之前js中咱們學習了js的dom操作,也就是所謂的增刪改查dom操作。通過js的dom的操作,大家也能發現,大量的繁瑣**實現我們想要的效果。那麼jquery的文件操作的api提供了便利的方法供我們操作我們的文件。

看乙個之前我們js操作dom的例子:

var oul = document.getelementsbytagname('ul')[0];

var oli = document.createelement('li');

oli.innerhtml = '趙雲';

語法:解釋:追加某元素,在父元素中新增新的子元素。子元素可以為:stirng | element(js物件) | jquery元素

**如下:

var oli = document.createelement('li');

oli.innerhtml = '哈哈哈';

ps:如果追加的是jquery物件那麼這些元素將從原位置上消失。簡言之,就是乙個移動操作。

語法:解釋:追加到某元素 子元素新增到父元素

ps:要新增的元素同樣既可以是stirng 、element(js物件) 、 jquery元素

語法:父元素.prepend(子元素);

解釋:前置新增, 新增到父元素的第乙個位置

$('ul').prepend('我是第乙個')

語法:

父元素.prependto(子元素);

解釋:後置新增, 新增到父元素的最後乙個位置

$('路飛學誠').prependto('ul')

語法:

父元素.after(子元素);

子元素.inserafter(父元素);

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

$('ul').after('我是乙個h3標題')

$('我是乙個h2標題').insertafter('ul')

語法:

父元素.before(子元素);

子元素.inserbefore(父元素);

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

$('ul').before('')

$('').insertbefore('ul')

語法:

$(選擇器).clone();

解釋:轉殖匹配的dom元素

$('button').click(function() )

語法:

$(selector).replacewith(content);

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

//將所有的h5標題替換為a標籤

$('h5').replacewith('hello world')

語法:$('哈哈哈

')replaceall('h2');

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

$('

按鈕').replaceall('h4')

知識點1:

語法:

$(selector).remove();

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

$('ul').remove();

語法:

$(selector).detach();

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

var $btn = $('button').detach()

//此時按鈕能追加到ul中

語法:

$(selector).empty();

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

//清空掉ul中的子元素,保留ul

$('ul').empty()

06 jQuery的文件操作 重點

之前js中咱們學習了js的dom操作,也就是所謂的增刪改查dom操作。通過js的dom的操作,大家也能發現,大量的繁瑣 實現我們想要的效果。那麼jquery的文件操作的api提供了便利的方法供我們操作我們的文件。看乙個之前我們js操作dom的例子 var oul document.getelemen...

Jquery的文件操作

插入操作var oli document.createelement li oli.innerhtml 哈哈哈 jquery中的dom操作 content string element jquery元素 如果直接的內容是當前頁面中的某些元素,那麼這些元素將從原位置上消失。就是乙個移動操作 alert...

jquery 的文件操作

之前js中咱們學習了js的dom操作,也就是所謂的增刪改查dom操作。通過js的dom的操作,大家也能發現,大量的繁瑣 實現我們想要的效果。那麼jquery的文件操作的api提供了便利的方法供我們操作我們的文件。看乙個之前我們js操作dom的例子 var oul document.getelemen...