jQuery操作节点
程序员文章站
2024-03-20 11:17:04
...
一、创建节点
语法:$() // 括号里面直接传想要创建的节点
$('<div>我是被创建的节点</div>')
$('<img src="./1.png" title="哈哈"></img>')
二、添加节点
- append() // 添加到子元素后面 括号内传被创建的元素
- prepend() // 添加到子元素前面 括号内传被创建的元素
- appeddTo() // 添加到子元素后面 括号内传父元素
- prependTo() // 添加到子元素前面 括号内传父元素
- after() // 添加到元素后面作为兄弟元素 括号内传被创建的元素
- before() // 添加到元素前面作为兄弟元素 括号内传被创建的元素
三、清空节点
empty() // 父元素调用 清空子节点
$('.container').empty() // 清空.container下面的全部子元素
四、删除节点
remove() // 子元素调用(删除自己)
$('.container').remove() // 删除.container自己
五、克隆节点
clone() // 深度复制
- 传参为true:会复制事件
- 传参为false:不会复制事件
$('button').eq(0).click(function () {
// 创建节点
let a = $('<div>哈哈哈哈哈哈</div>')
// 设置样式
a.css({
color: 'green',
fontSize: '32px',
textAlign: 'center',
lineHeight: '300px',
})
// 把创建的元素添加到.container中
a.appendTo('.container')
// 另一种写法:
// $('.container').append($div)
})
// 清空节点
$('button').eq(1).click(function () {
$('.container').empty()
})
// 删除节点
$('button').eq(2).click(function () {
$('.container div').remove()
})
// 克隆节点
$("button").eq(3).click(function(){
let a = $('.container').clone()
a.appendTo('body')
})