jQuery添加节点&清空&克隆&属性、class操作&宽高&Scroll&表格全选案例

最新推荐文章于 2022-07-11 21:58:45 发布

Amethyst紫宣

最新推荐文章于 2022-07-11 21:58:45 发布

阅读量377

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/Amethystlry/article/details/109611256

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

添加节点的几种方式

1、append(）父元素.append(子元素)–>作为最后一个元素添加
在这里插入图片描述

<script>
    // 1、append(） 父元素.append(子元素)-->作为最后一个元素添加
    $('#append').click(function () {
        //创建一个新的li标签，添加到ul1中去
        var newLi=$('<li>我是新创建的li标签</li>')
        $('.ul1').append(newLi);

        //把ul2中的li标签添加到ul1中去，剪切作为最后一个元素
        var li3=$('#li3');
        $('.ul1').append(li3);
    });
</script>

在这里插入图片描述

2、prepend–>作为第一个元素添加

<script>
    //prepend()--添加到最前面
    $('#prepend').click(function () {
        //新建一个li标签，添加到ul1中去
        var newLi=$('<li>我是新建的li标签</li>');
        $('.ul1').prepend(newLi);

        //把ul2中已经存在的li标签添加到ul2中去，剪切后作为第一个子元素添加
        var li4=$('#li4');
        $('.ul2').prepend(li4);
    });
</script>

在这里插入图片描述

3、before 元素A.before(元素B)–>把元素B插入到元素A之前，作为兄弟元素添加

<script>
    //元素A.before(元素B);//把元素B插入到元素A之前，作为兄弟元素添加
    $('#before').click(function () {
        //新建一个div标签,添加到ul2中的第四个li标签前面
        var newdiv=$('<div>我是新创建的div标签</div>');
        var li4=$('#li4');
        li4.before(newdiv);
    });
</script>

4、after() 元素A.after(元素B)–>把元素A插入到元素B的后面，作为兄弟元素添加

<script>
    //after()  元素A.after(元素B)-->把元素B插入到元素A的后面，作为兄弟元素添加
    $('#after').click(function () {
        //新建一个div标签,添加到ul2中的第四个li标签前面
        var newdiv=$('<div>我是新创建的div标签</div>');
        var li4=$('#li4');
        li4.after(newdiv);
    });
</script>

5、appendTo()

<script>
    //5、appendTo()
    $('#appendTo').click(function () {
        //创建一个div，添加到ul1中去
        var newDiv=$('<div>这是先创建的div</div>');
        newDiv.appendTo(".ul1");
    });
</script>

在这里插入图片描述

清除内容empty&remove

        /*
        * 清空元素内容：
        * $("div").html("");
        * $("div").empty();
        * $("div").remove();
        * */

克隆节点clone

/*
jQuery中克隆节点：clone()
只存在于内存中，如果要在页面上显示，要追加到元素，克隆到
后代节点
clone()方法参数是true表示会把事件一起克隆，false表示不会克隆事件
clone()的参数不管是true还是false，都是会克隆到后代节点的
默认是false
*/
<body>
<input type="button" value="clone" id="clone">
<div class="box"></div>
<p id="des">我是外边的p元素</p>
<script src="jquery-3.5.1.min.js"></script>
<script>
    $('#clone').click(function () {
        $('#des').clone().appendTo($("div"));
    });
</script>
</body>

在这里插入图片描述

属性操作(attr,prop)

        /*
        *样式：写在style里面---用css操作
        *     写在标签里面---用attr方法操作
        * 
        * jQuery中操作属性：attr()   removeAttr()
        *
        * 设置属性：
        * 以前有这个属性就是更改属性
        * 以前没有则是添加属性
        * 可以修改自定义属性
        *
        * 可以通过对象设置多属性
        *
        * 获取属性：
        * console.log($('img').attr('src');
        * 自带的属性可以获取，自定义属性也可以获取，如果没有这个属性，获取的值就是undefined
        *
        * 移除单属性：$('img').remove('alt');
        *
        * 移除多属性：$('img').remove('alt aaa bbb');
        * */
       
        $('#btn').click(function () {
        console.log($('#btn').attr('checked'));//无论是选中还是没选中，都返回undefined
    });

    //原因是：在jquery1.6之后，对于checked，selected，disabled这类Boolean类型的
    //属性来说，不能用attr方法，只能用prop方法

    $('#btn').click(function () {
        //设置属性
        $('#check').prop('checked','true');
        //获取属性
        console.log($('#check').prop('checked'));
    });

宽高

<script>
    $('#btn').click(function () {
        //1、获取div的宽高--width(),height()
        console.log($("#one").css("height"));//200px
        //2、获取或者设置元素的宽高，这个宽高不包括padding/margin/border
        $('#one').height(300);
        console.log($('#one').height());//300,没有单位！！！

        //3、innerWidth() innerHeight()
        //方法返回元素的宽高，包括内边距
        console.log($('#one').innerWidth());//240

        //4、outerWidth() outerHeight()
        //方法返回元素的宽高，包括内边距和把边框
        console.log($('#one').outerWidth());//260

        //5、outerWidth(true) outterHeight(true)
        //true--包括外边距,false--不包括外边距
        console.log($("#one").outerWidth(true));//300--内外边距阿和边框

        //6、获取页面可视区域的宽高
        console.log($(window).width());
    });
</script>

scrollTop和scrollLeft

    <style>
        .im{
            width: 200px;
            height: 200px;
            overflow: auto;
        }
        img{
            width: 300px;
        }
    </style>
</head>
<body>
<input type="button" value="scroll" id="scroll">
<div class="im">
    <img src="企鹅画廊/1.png" alt="">
</div>
<script src="jquery-3.5.1.min.js"></script>
<script>
    //给按钮设置一个点击事件
    $('#scroll').click(function () {
        //获取
        //scrollLeft()表示元素内容被卷曲出去的宽度
        //scrollTop()表示元素内容被卷曲出去的高度
        console.log($('.im').scrollTop()+":"+$('.im').scrollLeft());
    });
</script>
</body>

在这里插入图片描述

class操作

<script>
    $(function () {
        $('input').eq(0).click(function () {
            //添加一个basic类--addClass
            $('li').addClass("basic");
        });

        $('input').eq(1).click(function () {
            $('li').addClass('bigger');
        });

        //移除一个类--removeClass
        $('input').eq(2).click(function () {
            $("li").removeClass("basic");
        });

        //判断类--toggle
        $('input').eq(3).click(function () {
            //判断li有没有basic类，有则移除，无则添加
            $('li').toggleClass("basic");
        });
    });
</script>

表格全选案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            width: 300px;
            margin:100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border:1px solid blueviolet;
            width: 300px;
        }
        th,td{
            border:1px solid blueviolet;
            color:blueviolet;
            padding: 10px;
        }
        th{
            background-color: lightskyblue;
        }
        td{
            font-family: SimSun;
            font-weight: 900;
        }
        tbody tr{
            background-color: #eaeaea;
        }
        tbody tr:hover{
            background-color: #fafafa;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="wrap">
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="all"></th>
                <th>剧名</th>
                <th>主演</th>
            </tr>
        </thead>
        <tbody id="tbd">
        <tr>
            <td><input type="checkbox"></td>
            <td>古剑奇谭</td>
            <td>李易峰、杨幂</td>
        </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>青云志</td>
                <td>赵丽颖、李易峰</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>蜀山战纪</td>
                <td>陈伟霆、赵丽颖</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>锦衣之下</td>
                <td>任嘉伦、谭松韵</td>
            </tr>
        </tbody>
    </table>
</div>
<script src="jquery-3.5.1.min.js"></script>
<script>
    $(function () {
        $("#all").click(function () {
            //修改下面的哪些chechbox
            $('#tbd input').prop("checked",$(this).prop("checked"));
        });

        $("#tbd input").click(function () {
            if($("#tbd input:checked").length==$("#tbd input").length) {
                $("#all").prop("checked", true);
            }else{
                $("#all").prop("checked",false);
            }
        });
    });
</script>
</body>
</html>

Amethyst紫宣

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery添加节点&清空&克隆&属性、class操作&宽高&Scroll&表格全选案例

文章目录添加节点的几种方式清除内容empty&remove克隆节点clone属性操作(attr,prop)宽高scrollTop和scrollLeftclass操作表格全选案例添加节点的几种方式1、append(）父元素.append(子元素)–>作为最后一个元素添加<script> // 1、append(）父元素.append(子元素)-->作为最后一个元素添加 $('#append').click(function () {
复制链接

扫一扫