正文
jQuery-DOM增删查改
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.绑定事件
- $().事件名(function(){功能})
- 事件名：鼠标事件 键盘事件 表单事件
- 事件委托：$().on('事件名',#####'target',function(){功能})
- 额外：one():绑定的事件只会执行一次
2.DOM的增删查改
增
创建元素：$('标签')
如:$("<li><div><p class='title'>"+new.title+"<img src="+new.url+"></div></li>)
添加到页面：
尾部添加：父级.append(子级)
子级.appendTo(父级)
指定位置添加：父级.prepend(子级)
子级：prependTo(父级)
删除
empty():元素.empty()删除指定元素中所有子级元素
remove():元素.remove()指定的元素被删除
改
replaceWith()
replaceAll()
查
父级关系：parent()
祖先级关系：parents(val)
子级关系：children()
后代关系：find(val)这个里面必须有参数
兄弟关系：
上一个兄弟：prev()
上面所有的兄弟：prevall()
下一个兄弟：next()
下面所有的兄弟：nextall()
所有兄弟：siblings()
筛选：
eq()
first() 第一个
last() 最后一个
is() 验证作用
3.代码如下
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增删查改</title>
</head><body>
<div id="box">
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</div>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
//创建li标签，添加到ul
$("<li><span>5</span></li>").appendTo('ul')
//删除
// $('ul').empty()
// $('ul').remove()
//查询
var list = $('#list')
console.log(list.parent().parent().parent())
console.log(list.parents()) console.log(list.children('div'))
console.log(list.find('span')) //必须加参数 console1.log(list.siblings())
</script>
</body></html>
