jquery属性操作、css操作、筛选、文档处理
2020-08-11 16:15
1176 查看
一、jquery属性操作
1.属性
获取或者设置属性的值,jquery 里面可以进行一堆操作
- attr removeAttr
attr 设置或返回被选元素的属性值
removeAttr 从每一个匹配的元素中删除一个属性
<body>
<input type="text" id="ipt" value="123" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("#ipt").attr("value"));
$("#ipt").attr("value", "456");
</script>
</body>
回调函数写法
<body>
<input type="text" id="ipt" value="123" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt").attr("value", function (index, val) {
console.log(index, val);
return val * val;
});
console.log($(".info").attr("value"));
</script>
</body>
removeAttr
<body>
<input type="text" id="ipt" value="123" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt").attr("value", function (index, val) {
console.log(index, val);
return val * val;
});
console.log($(".info").attr("value"));
$("#ipt").removeAttr("value");
</script>
</body>
- prop removeProp
prop 获取在匹配的元素集中的第一个元素的属性值
removeProp 用来删除由.prop()方法设置的属性集
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("#ipt1").prop("value"));
$("#ipt1").prop("value","abc");
</script>
</body>
回调函数写法
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt1").prop("value",function (index,val){
console.log(index,val);
return val+"m";
});
</script>
</body>
removeProp
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt1").prop("value",function (index,val){
console.log(index,val);
return val+"m";
});
$("#ipt1").removeProp("value");
</script>
</body>
- 自定义属性
Attr添加
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt1").attr("data-index",0);
console.log($("#ipt1").attr("data-index"));
</script>
</body>
Attr移除
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt1").attr("data-index",0);
console.log($("#ipt1").attr("data-index"));
$("#ipt1").removeAttr("data-index");
</script>
</body>
prop添加
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt1").prop("data-page",1);
console.log($("#ipt1").prop("data-page"));
</script>
</body>
prop移除
<body>
<input type="text" id="ipt1" value="789" class="info"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#ipt1").prop("data-page",1);
console.log($("#ipt1").prop("data-page"));
$("#ipt1").removeProp("data-page");
console.log($("#ipt1").prop("data-page"));
</script>
</body>
回调函数写法
<body>
<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#fbtn").click(function (){
$(".ckbox").each(function (index){
console.log(!undefined);
$(this).prop("checked",!$(this).prop("checked"));
});
});
</script>
</body>
2.css类
- addClass removeClass
addClass 为每个匹配的元素添加指定的类名
removeClass 从所有匹配的元素中删除全部或者指定的类
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #000;
}
.box{
width: 100px;
height: 100px;
}
.box1{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".block").addClass("box1 user");
$(".block").removeClass("user");
</script>
</body>
- toggleClass
如果存在就删除，不存在就添加一个类
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #000;
}
.box{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".block").toggleClass("box");
$(".block").toggleClass("box");
</script>
</body>
移除box类
添加box类
回调函数写法
<body>
<div class="box block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".block").addClass(function (index,elec){
return "data";
})；
$(".block").removeClass(function (index,elec){
console.log(index,elec);
return "data";
});
</script>
</body>
添加data类
移除data类
先判断函数中是否存在user类，false存在，移除user类
</head>
<body>
<div class="box block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".block").toggleClass(function (index,elec){
console.log(index,elec);
return "user";
},false);
</script>
</body>
先判断函数中是否存在user类，ture不存在，添加user类
<body>
<div class="box block"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".block").toggleClass(function (index,elec){
console.log(index,elec);
return "user";
},true);
</script>
</body>
3. html代码/文本/值
- 文本操作
html() 获取或者设置元素的内容值
text() 获取或者设置元素的文本值
<body>
<div class="content"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".content").html("<span>123</span>");
$(".content").text("<span>123</span>");
console.log($(".content").html());
console.log($(".content").text());
$(".content").html(function (index,val){
console.log(index,val);
return "不知道"
});
$(".content").text(function (index,val){
console.log(index,val);
return "text"
});
</script>
</body>
- 值操作
val() 获取或者设置元素value
<body>
<input type="text" id="list"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#list").val("。。。。");
console.log($("#list").val());
$("#list").val(function (index,val){
console.log(index,val);
return "换值";
});
</script>
</body>
<body>
<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".hobby").val(["a","","c"]);
//$(".hobby").eq(0).val(["a"]);
</script>
</body>
二、css操作
1. css
css() 获取或设置元素的css
jquery 里面可以进行链式操作 连点
第一种写法
<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#box").css("width","200px").css("height","200px").css("border","1px solid #000");
</script>
</body>
第二种写法
<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#box").css({
width:"100px",
height:"100px",
border:"1px solid #000",
backgroundColor:"red"
});
console.log($("#box").css("border"));
</script>
</body>
2. 位置
- offset 相对适口的偏移
<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#box").css({
width:"100px",
height:"100px",
border:"1px solid #000"
});
console.log($("#box").offset());
</script>
</body>
- position 相对父元素的偏移 父元素 相对定位
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#box").css({
width:"100px",
height:"100px",
border:"1px solid #000"
});
console.log($("#box").position());
</script>
</body>
- scrollTop 获取或设置元素的上滑距
- scrollLeft 获取或设置元素的左滑距
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.list{
width: 200px;
height: 200px;
overflow: scroll;
border: 5px solid #000;
padding: 10px;
margin: 10px;
}
.block{
width: 500px;
height: 500px;
background-color: #51cfff;
}
</style>
</head>
<body>
<div class="list">
<div class="block"></div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".list").scrollTop());
$(".list").scrollTop(100);
console.log($(".list").scrollLeft());
$(".list").scrollLeft(100);
</script>
</body>
3. 尺寸
- width height
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.list{
width: 200px;
height: 200px;
overflow: scroll;
border: 5px solid #000;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="list"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".list").width(100);
console.log($(".list").width());
$(".list").height(100);
console.log($(".list").height());
</script>
</body>
- innerHeight innerWidth
获取第一个匹配元素内部区域高度,宽度（包括补白、不包括边框）
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.list{
width: 200px;
height: 200px;
overflow: scroll;
border: 5px solid #000;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="list"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".list").innerHeight());
console.log($(".list").innerWidth());
</script>
</body>
- outerWidth outerHeight
获取第一个匹配元素外部高度，宽度（默认包括补白和边框）
设置为ture时，计算边距在内
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.list{
width: 200px;
height: 200px;
overflow: scroll;
border: 5px solid #000;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="list"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".list").outerWidth(true));
console.log($(".list").outerHeight());
</script>
</body>
三、筛选
1. 过滤
- eq
获取当前链式操作中第N个jquery对象，返回jquery对象。
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").eq(0));
console.log($("ul>li").eq(-1));//注意：倒着找 从-1开始
</script>
</body>
当参数大于等于0时为正向选取，0代表第一个
当参数为负数时为反向选取，-1为倒数第一个
- first last
first 获取第一个元素
last 获取最后一个元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").first());
console.log($("ul>li").last());
</script>
</body>
first
last
- hasClass is
hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true
is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
在函数， this指的是当前的DOM元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").hasClass("li4"));
console.log($("ul>li").is(".li4"));
</script>
</body>
写成回调函数
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
$("ul>li").each(function (index) {
if ($(this).hasClass("li4")) {
console.log($(this));
}
});
$("ul>li").each(function (index) {
if ($(this).is(".li4")) {
console.log($(this));
}
});
</script>
</body>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").is(function (index) {
if ($(this).hasClass("li4")) {
return true;
}
}));
</script>
</body>
- filter
filter 筛选出与指定表达式匹配的元素集合
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").filter(".li4"));
console.log($("ul>li").filter(function (index) {
if ($(this).is(".li4")) {
return $(this);
}
}));
</script>
</body>
- map
map 将一组元素转换成其他数组
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li"));
console.log($("ul>li").map(function (index, obj) {
//obj 是原生的js对象
;
return $(obj).text();
}));
</script>
</body>
- has not
has 保留包含特定后代的元素，去掉那些不含有指定后代的元素
not 从匹配元素的集合中删除与指定表达式匹配的元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").has(".sp"));
console.log($("ul>li").not(".li4"));
console.log($("ul>li").not($("ul>li").has(".sp")));
console.log($("ul>li").not(function (index, obj) {
if ($(obj).is(".li4")) {
return obj;
}
}));
</script>
</body>
has
not
- slice
slice 选取一个匹配的子集
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").slice(0, 2));//取小不取大
</script>
</body>
2. 查找
- children
children() 不带参 获取元素的所有子集
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul>li").children());
console.log($("ul>li").children(".sps"));
</script>
</body>
- parent parents
parent 取得一个包含着所有匹配元素的唯一父元素的元素集合
parents 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("li:first").parent());
console.log($("li:first").parents("body"));
</script>
</body>
- find
find 搜索所有与指定表达式匹配的元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($("ul").find(".li4"));
</script>
</body>
- next nextAll nextUntil
next 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll 查找当前元素之后所有的同辈元素
nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
next
nextAll
nextUntil
- prev prevAll
prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll 查找当前元素之前所有的同辈元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li4").prev());
console.log($(".li4").prevAll());
</script>
</body>
prev
prevAll
- offsetParent
offsetParent 返回第一个匹配元素用于定位的父节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li4").offsetParent());
</script>
</body>
- siblings
siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li4").siblings());
console.log($(".li4").siblings(".li6"));
</script>
</body>
- add
add 把与表达式匹配的元素添加到jQuery对象中
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li6").add($(".li3")));
console.log($(".li6").add("<span>123</span>"));
</script>
</body>
- addBack
addBack 添加堆栈中元素集合到当前集合
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li6").nextAll().addBack("li"));
</script>
</body>
- contents
contents 查找匹配元素内部所有的子节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li6").contents('.sp1'));
</script>
</body>
- end
end 回到最近的一个"破坏性"操作之前
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
position: fixed;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
console.log($(".li6").find(".sp1").end());
</script>
</body>
四、文档处理
1.内部插入
content：要追加到目标中的内容
function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接收两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值
- append(content|fn)
append 追加到内容之后
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
<script src="./js/jquery-1.9.1.js"></script>
<script>
var span=$("<span>追加</span>")
$(".box").append("<span>123</span>");
$(".box").append(span);
$(".box").append(function(index,html){
console.log(index,html);
return 456;
});
</script>
</body>
- appendTo(content)
appendTo 追加到内容之后
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
<script src="./js/jquery-1.9.1.js"></script>
<script>
var span=$("<span>追加</span>")
span.appendTo($(".box"));
$("<span>123</span>").appendTo($(".box"));
</script>
</body>
- prepend(content|fn)
prepend 追加到内容之前
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
<script src="./js/jquery-1.9.1.js"></script>
<script>
var span=$("<span>追加</span>");
$(".box").prepend("<span>111</span>");
$(".box").prepend(span);
$(".box").prepend(function(index,html){
console.log(index,html);
return 222;
});
</script>
</body>
- prependTo(content)
prependTo 追加到内容之前
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档处理</title>
</head>
<body>
<div class="box">内部插入</div>
<script src="./js/jquery-1.9.1.js"></script>
<script>
var span=$("<span>追加</span>");
span.prependTo($(".box"));
$("<span>222</span>").prependTo($(".box"));
</script>
</body>
2.外部插入
- after(content|fn) before(content|fn)
fn 只有一个参数
after 追加到内容之后
before 追加到内容之前
<body>
<div class="box">外部插入</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
var span=$("<span>追加之后</span>");
var span1=$("<span>追加之前</span>");
$(".box").after(span);
$(".box").after("<span>123</span>");
$(".box").after(function(index,html){
console.log(index,html) //html undefined
return 456;
});
$(".box").before(span1);
$(".box").before("<span>M</span>");
$(".box").before(function(index,html){
console.log(index,html)
return 123;
});
</script>
</body>
- insertAfter(content) insertBefore(content)
insertAfter 把一个元素追加到元素集合之后
insertBefore 把一个元素追加到元素集合之前
<body>
<div class="box">插入</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
var span1 = $("<span>追加之后</span>");
var span2 = $("<span>追加之前</span>");
span1.insertAfter($(".box"));
$("<span>123</span>").insertAfter($(".box"));
span2.insertBefore($(".box"));
$("<span>456</span>").insertBefore($(".box"));
</script>
</body>
3.包裹
- wrap(html|ele|fn)
wrap:把所有匹配的元素用其他元素的结构化标记包裹起来
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").wrap("<div></div>");
</script>
</body>
- unwrap
unwrap:移除元素的父元素
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").wrap("<div></div>");
$(".btn").unwrap();
</script>
</body>
- wrapAll(html|ele)
wrapAll:将所有匹配的元素用单个元素包裹起来
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").wrapAll("<div></div>");
</script>
</body>
- wrapInner(html|ele|fn)
wrapInner:将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").wrapInner("<span></span>");
</script>
</body>
4.替换
- replaceWith(content|fn) replaceAll(selector)
replaceWith:将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll:用匹配的元素替换掉所有 selector匹配到的元素
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").replaceWith("<span class='txt'>按钮</span>");
$("<h3>h3</h3>").replaceAll($(".txt"));
</script>
</body>
5.删除
- empty
empty:删除匹配的元素集合中所有的子节点
<body>
<div class="box">内部插入</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
var span = $("<span>追加</span>");
$(".box").append("<span>123</span>");
$(".box").append(span);
$(".box").append(function (index, html) {
console.log(index, html);
return 456;
});
$(".box").empty();
</script>
</body>
- remove
remove:从DOM中删除所有匹配的元素
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").eq(2).remove();
$(".btn").eq(2).addClass("btn1");
$(".btn").remove(".btn1");
</script>
</body>
- detach
detach:从DOM中删除所有匹配的元素
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").eq(1).detach();
console.log($(".btn"));
</script>
</body>
6.复制
- clone([Even[,deepEven]])
clone:克隆匹配的DOM元素并且选中这些克隆的副本
默认值是false，事件处理函数不会被复制
true,事件处理函数会被克隆
<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(".btn").eq(1).click(function(){
console.log(1);
});
$(".btn").eq(1).clone(true).appendTo($("body"));//clone()
</script>
</body>
7.this相互转化
- $(this)转化成this
$(this)[0]; - this转化成$(this)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery （选择器，属性，筛选，文档处理）
- jquery-选择器、筛选器、样式操作、文本操作、属性操作、文档处理
- jQuery的属性、css、文档处理、事件、选择器以及jsp要点简记
- jQuery入门(3)：DOM（选择器，属性，筛选，文档处理）
- Jquery选择器大全、属性操作、css操作、文档、事件等
- jQuery：基础学习（2）属性，CSS，文档，元素筛选
- jQuery文本操作、属性操作、文档处理、事件、动画效果以及补充
- jQuery修改操作css属性实现方法
- jquery中的css属性操作
- jQuery学习笔记 操作jQuery对象 文档处理
- jQuery 之 （二）事件操作、jq对文档的操作、属性选择器使用
- [JQuery]：jQuery筛选元素方法、操作CSS样式和处理事件方式
- jQuery学习笔记：DOM操作（二）——属性、类、HTML、CSS
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
- jQuery学习笔记 操作jQuery对象 CSS处理
- jQuery学习三 操作属性和CSS
- css3中的zoom属性以及jquery中css()方法操作元素的属性
- jQuery修改操作css属性实现方法
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
- jQuery操作属性，CSS类,HTML代码，文本，值