一: 操作元素
1. 属性操作
1.1
$("p").text()
$("p").html()
$(":checkbox").val()
1.2
$(".test").attr("tom") //获取属性
$(".test").attr("tom","boy") //修改属性值
1.3
$(".test").attr("checked","checked") //修改属性值
$(":checkbox").removeAttr("checked") //移除属性
1.4
$(".test").prop("checked",true) //修改属性值
1.5
$(".test").addClass("hide") //为$(".test")对象添加 "hide" class标签
2: 属性:
attr() //针对自定义属性,查找标签等情况 使用
prop() //针对于类似input 标签的 checked属性 true false 等情况
二: 遍历
<script> function func(self) { li = [10,20,30,40] $.each(li,function(i,x){ console.log(i,x) //分别打印索引,值 }) dic = {name:"yuan",sex:"male"} $.each(dic,function(i,x){ console.log(i,x) //打印 key,value }) } </script>
三: 文档处理
3.1 内部插入
$("#c1").append("<b>hello</b>") //该对象插入标签到最后
$("p").appendTo("div") //该标签插入到对象后面
prepend() //插入到前面
prependTo()
3.2 外部插入
before()
insertBefore()
after
insertAfter()
3.3 移除
remove() //移除标签
empty() //清空标签内容
3.4 复制
clone() //复制对象
3.5 替换
replaceWith()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="outer"> <div class="item"> <input type="button" value="+" onclick="fun1(this)"> <input type="text"> </div> <div class="item"> <input type="button" value="-" onclick="fun1(this)"> <input type="text"> </div> </div> <script src="jquery-3.1.1.js"></script> <script> function fun1(self) { var Clone=$(self).parent().clone(); //Clone.children(":button").val("-").attr("onclick","func2(this)"); $("#outer").append(Clone) } function func2(self) { alert(123) $(self).parent().remove() } </script> </body> </html>