老男孩IT教育,只培养技术精英

全国免费咨询电话:400-609-2893
jQuery的文档操作(重点) 老男孩IT教育培训

    /    2019-04-29

之前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('
  • 1233

  • '

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

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作。

 知识点2:

语法:

子元素.appendTo(父元素)

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

$('
  • 天王盖地虎

  • '

).appendTo($('ul')).addClass('active')

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

 知识点3:

语法:

父元素.prepend(子元素);

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

$('ul').prepend('
  • 我是第一个

  • '

)

知识点4:

语法:

子元素.prependTo(父元素);

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

$('路飞学诚').prependTo('ul')

知识点5:

语法:

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

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

$('ul').after('

我是一个h3标题

'
)
$('
我是一个h2标题
'
).insertAfter('ul')

知识点6:

语法:

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

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

$('ul').before('

我是一个h3标题

'
)
$('

我是一个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('hello world')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

知识点2:

语法:

$('

哈哈哈

'
)replaceAll('h2');

解释:替换所有。将所有的h2标签替换成p标签。

$('

按钮').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()


(0)

分享至