04-3 jquery操作、遍历_jquery 默认遍历-CSDN博客

本文链接：https://blog.csdn.net/xuehangongzi/article/details/80556160

一、操作

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的内容发生改变，并不是div2

3.树遍历

(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>