jQuery 的文档操作

时间：2022-03-27 03:23:39

在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多.

js 中 DOM 的示例 :

var box = document.getElementsByTagName("ul")[0];

var active = document.createElement("li");

active.linnerHTML = "战神";

box.appendChlid(active);

一 . 插入操作

父子之间

 1 . append()

语法 :

父元素.append(子元素);

解释 : 追加某元素,在父元素中添加新的子元素,子元素可以是 ; string(字符串)    ,  element(js对象)  , jQuery元素 .

示例 :

var oli = document.createElement("li");   // var oli = document.getElementById("li")

oil.innerHTML = "哈哈哈";

$("ul").append("<li>132</li>");

$('ul').append(oli);

$('ul').append($('#app'));

注意 : 如果追加的是 jQuery 对象(或者js的DOM对象),那么这些元素将从原位置上消失,其实就是一个移动操作.

    2 . appendTo()

语法 :

子元素.appendTo(父元素);

　　解释 : 追加到某元素 , 子元素添加到父元素.

$('<li>馒头.嗷嗷嗷</li>').appendTo($('ul')).addClass('active')

　　注意 : 要添加的元素可以是 string   element(js对象)    jQuery对象.

3 . prepend()

语法 :

父元素.prepend(子元素);

　　解释 : 前置添加,添加到父元素的第一个位置.

$('ul').prepend('<li>我最好看</li>');

4 . prependTo()  

　　语法 :

子元素.prependTo(父元素);

　　 解释 : 前置添加,添加到父元素的第一个位置

$('<a href="www.baidu.com">百度一下</a>').prependTo('ul');

当元素中有 类名 / ID / 地址 ...时,用双引 " " 那么$() 中就要用 单引 ' '    - 别误会,我怕自己忘.

兄弟之间

1 . after()

语法 :

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

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

　　 解释 : 在匹配的元素之后插入元素.

$('ul').after('<h4>我是火娃</h4>')

$('<h5>我是水娃</h5>').insertAfter('ul')

2 . before() 

语法 :

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

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

　　  解释 : 在匹配元素之后插入内容.

$('ul').before('<h3>我是大娃</h3>')

$('<h2>我是二娃</h2>').insertBefore('ul')

二 . 克隆操作

语法 :

$(选择器).clone();

　　  解释 : 克隆匹配的DOM元素

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

  // 1.clone()：克隆匹配的DOM元素

 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

  $(this).clone(true).insertAfter(this);

})

三 . 修改操作

1 . replaceWitch()

　　   语法 :

$(selector).replaceWith(content);

　　   解释 : 将所有匹配的元素替换成指定 string , js对象 , jQuery对象.

//将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')

//将所有h5标题标签替换成id为app的dom元素

$('h5').replaceWith($('#app'));

 2 . replaceAll()

　　  语法 :

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

　　   解释 :  替换所有.将所有的某个标签替换成另一个标签.(将所有的 h2 标签替换成 p 标签)

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

四 . 删除操作

　    1 . remove() 

　　  语法 :

$(selector).remove();

　　  解释 : 删除节点后,事件也会删除(就是说,删除整个标签)

$('ul').remove();

　  2 . detach()

　　  语法 :

$(selector).detach();

　　  解释 : 删除节点后,事件会保留

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

 //此时按钮能追加到ul中

 $('ul').append($btn)

      3 . empty()

　　  语法 :

$(selector).empty();

　　  解释 : 清空选择元素中所有后代节点

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

$('ul').empty()

　　　

相关文章