jquery 的文件操作

2022-05-17 05:03:29 字數 3967 閱讀 2189

之前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()
之前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()

Jquery的文件操作

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

jquery文件操作

為了方便自己偶爾查詢，從w3school裡拉拉文件下來。方法 描述addclass 向匹配的元素新增指定的類名。after 在匹配的元素之後插入內容。向匹配元素集合中的每個元素結尾插入由引數指定的內容。向目標結尾插入匹配元素集合中的每個元素。attr 設定或返回匹配元素的屬性和值。before 在每...

jquery 文件操作

今天以乙個例子來看看jquery 的文件操作，首先上例子 doctype html html head style p selected highlight style script src script head body p title 12335666 jquery 文件操作 p p 例子說明...