[jQuery基础] jQuery节点操作

复制节点

如果传入false就是浅复制, 如果传入true就是深复制

浅复制只会复制元素, 不会复制元素的事件

深复制会复制元素, 而且还会复制元素的事件

浅复制

$("button").eq(0).click(function () {// 1.浅复制一个元素var $li = $("li:first").clone(false)// 2.将复制的元素添加到ul中$("ul").append($li)
})

深复制

$("button").eq(1).click(function () {// 1.深复制一个元素var $li = $("li:first").clone(true)// 2.将复制的元素添加到ul中$("ul").append($li)
})

删除节点

remove([expr]) / detach([expr])

删除指定元素

$("button").click(function () {$("div").remove()// $("div").empty()// 利用remove删除之后再重新添加,原有的事件无法响应var $div = $("div").remove()// console.log($div)$("body").append($div)
})

empty()

删除指定元素的内容和子元素, 指定元素自身不会被删除

$("button").click(function () {$("li").remove(".item")// 利用detach删除之后再重新添加,原有事件可以响应var $div = $("div").detach()// console.log($div)$("body").append($div)
})

替换节点

replaceWith(content|fn) / replaceAll(selector)

替换所有匹配的元素为指定的元素

$("button").click(function () {// 1.新建一个元素var $h6 = $("<h6>我是标题6</h6>")// 2.替换元素// $("h1").replaceWith($h6)$h6.replaceAll("h1")
})

添加节点

内部插入

append(content|fn) / appendTo(content)

会将元素添加到指定元素内部的最后

 $("button").click(function () {// 1.创建一个节点var $li = $("<li>新增的li</li>")// 2.添加节点// $("ul").append($li)      $li.appendTo("ul")
})

prepend(content|fn) / prependTo(content)

会将元素添加到指定元素内部的最前面

 $("button").click(function () {// 1.创建一个节点var $li = $("<li>新增的li</li>")// 2.添加节点$("ul").prepend($li)            // $li.prependTo("ul")
})

外部插入

after(content|fn) / insertAfter(content)

会将元素添加到指定元素外部的后面

$("button").click(function () {// 1.创建一个节点var $li = $("<li>新增的li</li>")// 2.添加节点$("ul").after($li)// $li.insertAfter("ul")
})

before(content|fn) / insertBefore(content)

会将元素添加到指定元素外部的前面

$("button").click(function () {// 1.创建一个节点var $li = $("<li>新增的li</li>")// 2.添加节点$("ul").before($li)// $li.insertBeforer("ul")
})

[jQuery基础] jQuery节点操作相关推荐

Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
jQuery each、节点操作、动画演示、尺寸操作、扩展方法
一.each 1.方式一:$.each(数组或者自定义对象,function(i,j){console.log(i,j)}) $.each(li,function(i,j){console.log(i ...
[jQuery基础] jQuery核心函数和工具方法
核心函数核心函数调用jQuery的核心函数 $() jQuery 传递一个函数 $(function () {alert("hello lnj") } 接受一个字符串选择器返 ...
jQuery基础二DOM操作
DOM:Document Object Model的缩写,中文是文档对象模型,根据W3C DOM规范(htttp://www.w3.org/DOM ),它是一种与浏览器.平台.语言无关的接口,该接口可 ...
jquery的DOM节点操作(删除元素节点)
1.删除元素节点在操作页面时,删除多余或者指定的页面元素是非常必要的. jquery中提供了remove()方法来删除元素. 其语法格式如下: 删除元素节点示例代码: <!DOCTYPE ht ...
jquery的DOM节点操作(复制元素节点)
1.复制元素节点在页面中,有时候需要复制某个元素节点,可以通过clone()方法轻松实现这一功能. 语法格式如下: 在复制元素节点后,也要将复制的元素节点追加到某元素节点下,这样才会在相应的区域显示 ...
jquery的DOM节点操作(替换元素节点)
1.替换元素节点在jquery中,如果要替换元素中的节点,可以使用replaceWith()和replaceAll()这两种方法.这里我们推荐使用replaceWith()方法,其语法格式分别如下: ...
[jQuery基础] jQuery对象 -- 属性操作
属性操作属性和属性节点 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值对象.属性名称对象["属性名称"] = 值对象[" ...

[jQuery基础] jQuery节点操作

复制节点

浅复制

深复制

删除节点

替换节点

添加节点

内部插入

外部插入

[jQuery基础] jQuery节点操作相关推荐

最新文章

热门文章