024Day-jQuery方法-删除、克隆、祖先元素、后代元素、兄弟元素、结构过滤等方法

最新推荐文章于 2022-07-09 08:31:14 发布

码小白的求学之路

最新推荐文章于 2022-07-09 08:31:14 发布

阅读量494

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Yanxiaona111/article/details/108268299

版权

一、常用方法-scrollLeft()-scrollTop()

<style>
        div{
    
            width: 100px;
            height: 100px;
            border: solid 1px;
            overflow: scroll;
        }
        body{
    
            height: 3000px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
<!--
    方法：
        scrollLeft()
        scrollTop()
        作用：获取和设置页面向左和向上滚动的距离。
-->
<script>
    //js原生代码获得和设置滚动的距离
    /*var div = document.querySelector("div");
    div.onscroll = function () {
        if(div.scrollTop > 100){
            div.scrollTop = 0;
        }
    }*/
    //给整个页面添加滚动事件
    /*window.onscroll = function () {
        var obj = document.documentElement || document.body;
        if(obj.scrollTop > 1000)
            obj.scrollTop = 0;
    }*/

    //使用jQuery实现上述的功能
    var $div = $("div");
    $div.scroll(function () {
        if($div.scrollTop() > 100){
            $div.scrollTop(0);
        }
    });

二、jQuery创建元素对象

jQuery创建元素对象的方式：
方式-1： $(" < 标签名 > ") 方式 - 2 ：$ ("<头标签名属性…>内容<尾标签名>")

 <script src="js/jquery-1.12.4.js"></script>
<script>
    //使用js创建一个div，并设置内容。
    var div = document.createElement ("div");
    // setDiv(div);

    //jQuery创建对象的方式
    //方式-1
    var $div = $("<div>");
    // setDiv ($div[0]);

    //方式-2
    var $div = $("<div title='title' id='box'>helloworld</div>");
    setDiv ($div[0]);

    function setDiv(div) {
    
        div.style.width = "200px";
        div.style.height = "200px";
        div.style.backgroundColor = "red";
        // div.innerHTML = "hello";
        document.body.appendChild (div);
    }


</script>

三、jQuery方法-内部添加元素的方法

jQuery 容器内部添加元素对象的方法：
1：append:
作用：对当前容器尾部追加实参的内容。
语法：jQuery容器.append(jQuery对象 | 标签字符串);
2：appendTo：
作用：当前对象追加到实参容器的尾部。
语法：jQuery对象.appendTo(jQuery容器对象 | 标签字符串)
注意：上述两个方法具有移动元素的特性。

 <script src="js/jquery-1.12.4.js"></script>
<ul>
    <li>111111</li>
    <li>2222222</li>
    <li id="li3">33333333</li>
    <li>44444444</li>
    <li>555555555</li>
</ul>

<script>
    //ul 尾部追加元素
    var $li = $("<li>I am the new li</li>");
    //append
    $("ul").append($li);
    $("ul").append("<li>I am the second new li</li>");
    //将下标是1的li移动至末尾。
    $("ul").append($("ul li:eq(1)"));

    //appendTo
    $("#li3").appendTo($("ul"));
    $li.appendTo("ul");

</script>

四、jQuery方法-外部添加元素的方法

jQuery方法：外部添加元素。
1：after：
作用：当前元素后面插入指定的元素。
语法：jQuery对象.after(待插入对象)
2：insertAfter：
作用：当前元素插入到指定元素的后面。
语法：待插入对象.insertAfter(jQuery对象)
3：before：
作用：当前元素前面插入指定的元素。
语法：jQuery对象.before(待插入对象)
4：insertBefore：
作用：当前元素插入到指定元素的前面。
语法：待插入对象.insertBefore(jQuery对象)
注意：append、appendTo、after、insertAfter、before、insertBefore
都具有移动元素的效果。

<ul>
    <li>1111</li>
    <li>2222</li>
    <li id="li3">3333</li>
    <li>4444</li>
    <li id="li5">55555</li>
</ul>
 <script src="js/jquery-1.12.4.js"></script>
<script>
    //li3后插入一个新的li
    var $li = $("<li

最低0.47元/天解锁文章

码小白的求学之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
024Day-jQuery方法-删除、克隆、祖先元素、后代元素、兄弟元素、结构过滤等方法

一、常用方法-scrollLeft()-scrollTop()<style> div{ width: 100px; height: 100px; border: solid 1px; overflow: scroll; } body{ height: 3000px; } </style>
复制链接

扫一扫