一、操作
1、拷贝复制 .clone()
<body>
<div id="div1">111</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#div1").on("click",function(){
alert("感觉自己是巨星");
});
var $div2 = $("#div1").clone(true);
$("body").append($div2);
</script>2.DOM插入，包裹
（1）.wrap 在选中对象外面包上某个元素
$("#div1").wrap(' <div id="div2">222222</div>');//参数可以使字符串，直接转成结构
//要注意字符串里面的引号和外面的引号不要一样了<div id="div1">111</div>
<div class="aa">333</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#div1").wrap(".aa"); // 参数也可以是选择器，但前提是页面中已经有了这个结构<body>
<div id="div1">111</div>
<div class="aa">333</div>
<script src="jquery-3.3.1.js"></script>
<script>
var $div2 = $(".aa");
$("#div1").wrap($div2); //参数也可以是jQuery对象,括号里不用写引号<body>
<div id="div1">111</div>
<div class="aa">333</div>
<script src="jquery-3.3.1.js"></script>
<script>
var oAa = document.getElementsByClassName("aa")[0]; //因为获取到的是数组，所以要加[0]
$("#div1").wrap(oAa); //参数也可以是原生对象,括号里不用写引号（2）wrapInner 在选中对象里面插入某个元素
3.DOM 插入, 内部插入
（1）在内部后面插入 append
$("body").append('<div>介个元素会被加在下面</div>');可以一次插入好几层HTML结构，只要你结构写对了就行
$("body").append( '<div><p>444444</p></div>');上面的效果要是用原生appendChild方法做的话，就很麻烦
<body>
<div id="div1">111</div>
<div class="aa">333</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("body").append($("#div1"));如果想要让原来的结构不变，再插入跟页面中某个元素一样的元素，那么就得先克隆一份
$("body").append($("#div1").clone());（2）.appendTo() 和append功能相同 但顺序相反
$("#div1").clone().appendTo($("body"));那他俩唯一不同的地方就是以后做链式操作的对象不一样
<div id="div1">111</div>
<script src="jquery-3.3.1.js"></script>
<script>
//改变的是body的样式
$("body").append($("#div1").clone()).css("background","yellow");
//改变的是最后加的div1的样式
$("#div1").clone().appendTo($("body")).css("background","green");(3)prepend 是插在内部的前面，append是插在内部的后面
<body>
<div id="div1">
111
<div style="background: cyan"> 3333</div>
</div>
<div class="aa">222</div>
<script>
$("#div1").prepend($(".aa").clone());(4) html() 和text()
都是既可以取值又可以赋值，若果有参数的话就是赋值
那他俩的区别是啥呢
- #####.text()不能识别html结构，会把标签也当成文本
- #####原生的也有innerText，区别和jQuery的一样
$("#div1").text("<h2>感觉自己是巨星</h2>"); //不能解析标签4、DOM 插入,外部插入
（1）.after 在匹配元素的后面插入元素，相当于作为他的兄弟
$("#div1").after( '<div class="bb">222</div>');(2)before就是在指定元素上面插入元素
$("#div1").before( '<div class="bb">222</div>');(3)insertAfter 和after一样都是在后面加兄弟元素，但是顺序相反
5、 DOM 移除
（1）remove() 把某个元素删掉
$("#div2").remove();//可以在任何想要删掉的对象后面加.remove()6、DOM 替换
（1）replaceAll 用前面的参数替换后面的元素
$('<h2>新</h2>').replaceAll("#div2");//用h2代替div2（2）replaceWith 和replaceAll 的功能想能，但顺序相反
二、遍历
1.筛选
（1）eq(x) 找到索引为x的元素对象
$("li").eq(2).css("background","red");//和下面这句效果相同
$("li:eq(2)").css("background","red");（2）filter() 过滤掉你不想要的，()括号中是你要留下来你想要的元素
$("li").filter(":odd").css("background","red"); //给下标值是奇数的li设置背景颜色(3) has() 选中包含有某种元素的对象
$("li").has("ul").css("background","red");//只给包含有ul的li设置颜色(4) xx.is(yy) 判断xx是否是某一元素yy
2.各种遍历
(1) each()
原生的this在 jquery里就是 $(this)， this 和elem是一样的
(2) end() 就是让链接对象回到最初的jQuery对象div1上面，而不是变成了div1的兄弟元素
$("#div1").next().css("background","red").end().html("hhhhhh");//div1的内容发生改变，并不是div23.树遍历
(1).next()找下面紧挨着的兄弟元素
$("#div1").next().css("background","red").end().html("hhhhhh");//给div2设置颜色(2) find()能找到所有子代，不仅仅是亲子代，children只找亲子代
#####.next找紧挨着的兄弟
.nextAll 下边所有兄弟
.parents() 父亲或祖先
.prev()找上面紧邻的兄弟元素
siblings()找兄弟，不管上面的还是下面的
现在，我们做个例子，效果如下
当鼠标悬停在上面时，出现我们自己设置的提示框，而且还能跟着鼠标走，当鼠标离开链接时，提示框就消失
a.首先创建一个jQuery对象，然后添加到body中去
b.先设置下提示框的样式
c.定位,让提示框最初定位在鼠标的位置，,jQuery的鼠标距离左边的距离 e.pageX
d.鼠标滑出的时候，让他消失,jquery 中删除某一元素 remove（）
e.那么让提示框里的内容是你点击的链接的title属性值呢
字符串拼接
f.让提示框跟着鼠标走
f.但此时还有原来title自带的样式，怎么去掉呢
g.这样当你获取到title值了，又把原来的删掉了，但是，当再划入的时候我们的title也没有了，咋办？就得让他划入的时候清掉，滑出的时候再加回来
综上，小例子的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示框</title>
<script src="jquery-3.3.1.js"></script>
<style>
.tip{
background:#00ff00;
border: 1px solid #000000;
position: absolute;
}
</style>
</head>
<body>
<div><a class="toolTip" href="" title="机智善良">李雪</a></div>
<div><a class="toolTip" href="" title="智障脸皮厚">黄德昌</a></div>
<div><a href="" title="情商高小仙女">刘春宇</a></div>
<div><a href="" title="高大威武的小屁孩">苏杭</a></div>
<script>
$(".toolTip").on("mouseover",function(e){
var $tip = $('<span class="tip">'+ this.title+'</span>')
.css({
left: e.pageX+ 20,
top: e.pageY + 20
})
;
this.title = "";
$("body").append($tip);
});
$(".toolTop").on("mouseout",function(e){
this.title = $(".tip").html();
$(".tip").remove();
});
$(".toolTip").on("mousemove",function(e){
$(".tip").css({
left: e.pageX+ 20,
top: e.pageY + 20
});
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
