jQuery之元素移動

2021-09-28 23:09:30 字數 1125 閱讀 3738

如果要移動選中的元素,有兩種方法:一種是直接移動該元素,另一種是移動其他元素,使得目標元素達到我們想要的位置。

假定我們選中了乙個div元素,需要把它移動到p元素後面。

第一種方法是使用.insertafter(),把div元素移動p元素後面:

**:

$('div').insertafter('p');
第二種方法是使用.after(),把p元素加到div元素前面:

// 將新建的子節點,追加到父節點的最前面

// 1.父級節點.prepend(新子節點)

$('ul').prepend(liobj);

// 2.子節點.prependto(父節點)

$(liobj).prependto($('ul'));

// 將新建的子節點,追加到父節點的最後面

// 存在的節點.before(新節點)

$('p').before(pobj);

// 新節點.insertbefore(存在節點)

//    $(pobj).insertbefore($('p'));

// 【注意】是在元素的後面追加兄弟節點

// 存在的節點.after(新節點)             

//       var p2obj=$('卻還是西楚霸王

');//   $('button').eq(1).click(function(){

//       $('p').after(p2obj);

//        // 新節點.insertafter(存在節點)

//     // p2obj.insertafter($('p'));

$('button').eq(1).bind('click',()=>{

var divobj = $('見過你的美,還能愛上誰

');// 存在的節點.after(新節點)

// $('p').after(divobj);

// 新節點.insertafter(存在節點)

divobj.insertafter($('p'))

jQuery之刪除元素

任務描述 本關任務 用jquery刪除元素。效果如下 相關知識 為了完成本關任務,你需要掌握 1.remove 2.empty 基本的html結構如下 刪除內容 我是第一行 我是第二行 我是第三行 效果圖如下 remove 需要實現的效果如下 如何刪除類名為.box的元素呢?這裡用remove 方法...

jQuery之元素查詢

在已經匹配出的元素集合中根據選擇器查詢孩子 父母 兄弟標籤 1.children 子標籤中找 2.find 後代標籤中找 3.parent 父標籤 4.prevall 前面所有的兄弟標籤 5.nextall 後面所有的兄弟標籤 6.siblings 前後所有的兄弟標籤 需求 1.ul標籤的第2個sp...

jQuery之 元素滾動

對應的知識點鋪墊,但是有乙個很重要的問題就是相容ie和chorme的 1.scrolltop 讀取 設定滾動條的y座標 2.document.body scrolltop document.documentelement scrolltop 讀取頁面滾動條的y座標 相容chrome和ie 3.bod...