jQuery之DOM操作

阅读目录

DOM操作
2 元素属性操作
2 元素样式操作

DOM操作

1.1 内部插入

append(content|fn)        向每个匹配的元素内部追加内容
appendTo(content)        把所有匹配的元素追加到另一个指定的元素元素集合中
prepend(content|fn)        向每个匹配的元素内部前置内容
prependTo(content)        把所有匹配的元素前置到另一个、指定的元素元素集合中

1.2 外部插入

after(content|fn)        在每个匹配的元素之后插入内容
before(content|fn)        在每个匹配的元素之前插入内容
insertAfter(content)    把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content)    把所有匹配的元素插入到另一个、指定的元素元素集合的前面

1.3 包裹

wrap(html|ele|fn)        把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap()                这个方法将移出元素的父元素
wrapAll(html|ele)        移出元素的父元素
wrapInner(html|ele|fn)    将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

1.4 替换

replaceWith(content|fn)        将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)        用匹配的元素替换掉所有 selector匹配到的元素

1.5 删除

empty()            删除匹配的元素集合中所有的子节点
remove([expr])    从DOM中删除所有匹配的元素
detach([expr])    从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

1.6 克隆

clone([Even[,deepEven]])    克隆匹配的DOM元素并且选中这些克隆的副本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <style>
        #box {
            width: 800px;
            min-height: 300px;
            padding: 10px;
            border: 2px solid #ccc;
        }
        #box img {
            box-sizing: border-box;       /*这样设置的宽高就是整个盒子的宽高，如果再设置边距和边框，那么内容的宽高就会被压缩*/
            width:100px;
            height:100px;
        }

        #box img.active {
            border: 2px solid green;
        }

        p {
            width: 600px;
            padding: 20px;
            border: 2px dotted pink;
        }
    </style>
</head>
<body>
    <h1>jQuery DOM 操作</h1>
    <hr>
    <h2>内部插入</h2>
    <button id="append_btn">添加新的图片 append</button>
    <button id="appendTo_btn">添加新的图片 appendTo</button>
    <button id="prepend_btn">添加新的图片 prepend</button>
    <button id="prependTo_btn">添加新的图片 prependTo</button>
    <h2>外部插入</h2>
    <button id="after_btn">after</button>
    <button id="insertAfter_btn">insertAfter</button>
    <button id="before_btn">before</button>
    <button id="insertBefore_btn">insertBefore</button>
    <h2>包裹</h2>
    <button id="wrap_btn">wrap</button>
    <button id="wrapAll_btn">wrapAll</button>
    <button id="wrapInner_btn">wrapInner</button>
    <button id="unwrap_btn">unwrap</button>
    <h2>替换</h2>
    <button id="replaceWith_btn">替换选中的图片</button>
    <button id="replaceAll_btn">替换选中的图片repalceAll</button>
    <h2>删除</h2>
    <button id="empty_btn">empty</button>
    <button id="remove_btn">remove 删除选中的图片</button>


    <br>
    <br>
    <br>
    <br>

    <div id="box">
        <img src="../../dist/images_one/1.jpg" alt="">
        <img src="../../dist/images_one/2.jpg" alt="">
        <img src="../../dist/images_one/3.jpg" alt="">
        <img src="../../dist/images_one/4.jpg" alt="">
    </div>

    <img src="../../dist/images_one/10.jpg" id="newImg" alt="" style="width:200px">

    <!-- 引入的jQuery地址一定要写对，否则会报错 -->
    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //内部插入---------两种插入的效果一样，
            // 在box中的子元素后插入一个元素
            $('#append_btn').on('click', function(){
                //创建img 元素 万能的$
                /*var newImg = $('<img>')
                newImg.attr('src', '../../dist/images_one/8.jpg');*/
                   
                // 将上面两步合成一步
                //var newImg = $('<img src="../../dist/images_one/9.jpg">')

                //给box追加一个子元素------插入的图片地址要写对，否则会报错，图片就不能成功插入
                $("#box").append('<img src="../../dist/images_one/9.jpg">');

            });

            // 将一个元素追加到box中
            // 会将该元素插入到box已有的子元素的前面
            $('#appendTo_btn').on('click', function(){
                $('<img src="../../dist/images_one/9.jpg">').appendTo('#box');
            });

            // #####################################################################################
            // 在box中的子元素前插入一个元素
            $('#prepend_btn').on('click', function(){
                $('#box').prepend('<img src="../../dist/images_one/10.jpg">')
            });


            $('#prependTo_btn').on('click',function(){

                $('<img src="../../../photos/dist/images_one/9.jpg">').prependTo('#box');
            });

             // ********************************************************************************************
            //外部插入----两种方式的结果一样，都是将元素添加到box的后面
            $('#after_btn').on('click', function(){
                $('#box').after('<p>我爱你</p>')
            })
            $('#insertAfter_btn').on('click', function(){
                $('<p>你爱我</p>').insertAfter('#box');
            })
            $('#before_btn').on('click', function(){
                $('#box').before('<p>哈哈哈哈</p>')
            });

            // *************************************************************************************************
            //包裹
            // 用p元素将box中的每一个img元素包裹起来
            $('#wrap_btn').on('click', function(){
                $('#box img').wrap('<p>');
            })
            // 用p元素将box中的所有img元素当做一个整体用img元素包裹起来
            $('#wrapAll_btn').on('click', function(){
                $('#box img').wrapAll('<p>');
            })


            // 将匹配的元素box的子内容img用p元素进行包裹起来
            $('#wrapInner_btn').on('click', function(){
                $('#box').wrapInner('<p>');
            })
            // 移除元素的父元素
            $('#unwrap_btn').on('click', function(){
                $('#box img').unwrap();
            });


            // *************************************************************************************************
            //替换------两种替换的方式效果一样

            $('#replaceWith_btn').on('click', function(){
                //alert('ok')
                //$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">')
                $('#box img.active').replaceWith($('#newImg').clone())
            })
            $('#replaceAll_btn').on('click', function(){
                //alert('ok')
                //$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">')
                $('<img src="../../dist/images_one/meinv02.jpg">').replaceAll('#box img.active')
            });


            // *************************************************************************************************
            //删除
            // 会将box中的元素全部清除
            $('#empty_btn').on('click', function(){
                $('#box').empty();
            });

            // 移除是选中的元素会被移除
            $('#remove_btn').on('click', function(){
                $('#box img.active').remove();
            });



            //克隆


            //给所有的图片绑定 事件
            $('#box img').on('click', function(){
                $(this).toggleClass('active');
            })
        })
    </script>
</body>
</html>

DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery TODOList</title>
    <style>
        .list {
            list-style: none;
            padding:0;
            width:600px;
        }
        .list li {
            padding:20px;
            border:1px solid #ccc;
            background:#f5f5f5;
            margin:5px 0px;
        }
        .list li::after{
            content:'';
            display: block;
            clear:both;
        }
        .list li p {
            margin:0;
            float:left;
        }
        .list li span {
            float:right;
            cursor: pointer;
        }
        input{
            width: 300px;
            padding:10px;
            border:1px solid #ccc;
            font-size:16px;
        }
        button {
            padding:10px 20px;
            border:1px solid #ccc;
            background: #f5f5f5;
        }

        .list li input {
            border:none;
            padding:0;
            outline: none;
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>TODOList</h1>
    <hr>
    
    <input type="text" id="content">
    <button id="btn">添加</button>
    <ul class="list" id="todoList">
        <li>
            <p>Lorem ipsum dolor sit amet.1</p> 
            <span>&times;</span>
        </li>
        <li>
            <p>Lorem ipsum dolor sit amet.2</p> 
            <span>&times;</span>
        </li>
        <li>
            <p>Lorem ipsum dolor sit amet.3</p> 
            <span>&times;</span>
        </li>
        <li>
            <p>Lorem ipsum dolor sit amet.4</p> 
            <span>&times;</span>
        </li>
        
    </ul>


    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //按钮单击事件-------连贯操作
            // 通过按钮，添加列表
            $('#btn').on('click', function(){
                $('<li>')
                    .append(`<p>${$("#content").val()}</p>`)    //在li中添加一个子元素p，p元素中的内容是通过input输入的内容获取的，.val()是获得输入的文本内容，${}是将大括号中的内容转化为HTML元素，否则就会在页面原样输出
                    .append('<span>&times;</span>')  //在li的子元素中添加一个'X'号
                    .appendTo('#todoList');     //上面添加的元素添加到id为todoList的ul元素中
                
            });

            // 通过叉号删除列表
            // //给span绑定单击事件 委派------就是给新添加元素也要绑定事件
            $("#todoList").on('click', 'span', function(){    //将span写在on内，否则移除会将整个页面元素移除  
                $(this).parent().remove();       //parent的意思是移除this的唯一父元素也就是li
                // console.log(this)
            });

            // //给所有的li中的p元素 单击事件
            // 对列表中元素的内容进行修改.将列表替换成一个可以输入文本内容的输入框
            $("#todoList").on('click', 'p', function(){
                //$(this).replaceWith('<input type="text" value=>')
                $('<input>').val($(this).text()).replaceAll(this); //将input标签元素替换给this也就是p元素
                console.log(this)
            });

            //给li下的 input 绑定 失去焦点的时间
            $('#todoList').on('blur', 'input', function(){
                $('<p>').text($(this).val()).replaceAll(this);
            })



        })
    </script>
</body>
</html>

DOM操作应用

回到顶部

2 元素属性操作

1.1 属性

attr(name|pro|key,val|fn)    设置或返回被选元素的属性值
removeAttr(name)            从每一个匹配的元素中删除一个属性
prop(n|p|k,v|f)                获取在匹配的元素集中的第一个元素的属性值
removeProp(name)            用来删除由.prop()方法设置的属性集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性操作</title>
    <style>
        #myImg {
            display: block;
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
        }

    </style>
</head>
<body>
    <h1>属性操作</h1>
    <hr>
    <button id="btn">属性操作</button>
    <button id="remove_btn">移除属性</button>
    <br>
    <br>
    <img  alt="" id="myImg" loadImg='a.png'>    <!--对属性的操作无非就是修改标签内属性的值-->

    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $('#btn').on('click', function(){
                $('#myImg').attr('src', '../../dist/images_one/meinv02.jpg');  //如果该属性不存在就会添加，存在就会修改该属性的值

                //获取属性的值
                console.log($('#myImg').attr('src'))      //获取属性的值：../../dist/images_one/meinv02.jpg
                console.log($('#myImg').attr('id'))       //获取属性的值：myImg
                console.log($('#myImg').prop('title')); //专门设置或者获取 元素的内置属性
                console.log($('#myImg').attr('loadImg')); //专门设置或者获取 元素的内置属性：a.png

            });


            $('#remove_btn').on('click', function(){
                $('#myImg').removeAttr('src');       //移除src属性
                //$('#myImg').attr('src', '');
            })
        })
    </script>
</body>
</html>

属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性  图片懒加载</title>
    <style>
        .imglist img {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>图片懒加载</h1>
    <hr>

    <div class="imglist">
        <img loadpic='../../dist/images_one/1.jpg'>
        <img loadpic='../../dist/images_one/2.jpg'>
        <img loadpic='../../dist/images_one/3.jpg'>
        <img loadpic='../../dist/images_one/4.jpg'>
    </div>

    <script src="../jquery-3.3.1.js"></script>
    <script>

        //console.log($('.imglist img').attr('loadpic'))         //只会返回第一个属性值：../../dist/images_one/1.jpg，为了得到每一个img元素属性的值，所以要遍历
        //单次定时
        setTimeout(function(){
            $('.imglist img').each(function(index, item){       //each可以遍历出每一个img元素，是原生的<img loadpic='../../dist/images_one/1~4.jpg'>，
                $(item).attr('src', $(item).attr('loadpic'))    //$(item)将原生的转换为jQuery这样才可以对其操作
                // console.log(item)
            })
        }, 2000)
    </script>
</body>
</html>

自定义属性图片懒加载

1.2 class

addClass(class|fn)            为每个匹配的元素添加指定的类名
removeClass([class|fn])        从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw])    如果存在（不存在）就删除（添加）一个类
hasClass(class)                检查当前的元素是否含有某个特定的类，如果有，则返回true

1.3 代码、文本、值

html([val|fn])        取得第一个匹配元素的html内容
text([val|fn])        取得所有匹配元素的内容
val([val|fn|arr])    获得匹配元素的当前值

回到顶部

2 元素样式操作

2.1 设置CSS

css(name|pro|[,val|fn])        访问匹配元素的样式属性

2.2 元素位置

offset()        获取匹配元素在当前视口的相对偏移
position()        获取匹配元素相对父元素的偏移
scrollLeft()    获取匹配元素相对滚动条顶部的偏移
scrollTop()        获取匹配元素相对滚动条左侧的偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式操作</title>
    <style>
        #box {
            width: 400px;
            height: 200px;
            border:2px solid #ccc;
            position: relative;
        }

        .inner {
            width:100px;
            height:100px;
            /*margin:50px;*/
            background: pink;
        }
    </style>
</head>
<body>
    <h1>同志加油</h1>
    <hr>
    <button id="btn">设置位置</button>
    <div id="box">
        <div class="inner"></div>
    </div>
    
    <script src="../jquery-3.3.1.js"></script>
    <script>
        
        console.log($('#box').css('width'));       //获取元素的宽度值：400px

        //元素的位置
        console.log($('.inner').offset())       //offset() 方法返回或设置匹配元素相对于文档的偏移（位置）:{top: 119.875, left: 10}-----以视口为参照
        //以视口 为参照
        console.log($('.inner').offset().left, $('.inner').offset().top)    //左、上：10 119.875
        
        console.log($('.inner').position())    //{top: 0, left: 0}相对于相对定位的元素
        console.log($('.inner').position().left, $('.inner').position().top)  //左、上：0 0


        $('#btn').click(function(){
            //只有offset 才能设置
            $('.inner').offset({left:10, top:10})         //这是元素相对于视口的位置
        })
    </script>
</body>
</html>

样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动</title>
    <style>
        #box {
            width:800px;
            height:200px;
            border:2px solid orange;
            overflow: hidden;
        }
        .wrapper {
            width:2200px;
        }
        #box p {
            margin:0;
            width:198px;
            height:198px;
            float:left;
            border:1px solid #ccc;
            background: #369;
            color:#fff;
            font-size: 50px;
        }

    </style>
</head>
<body>
    <div id="box">
        <div class="wrapper">
            <p>lorem1</p>
            <p>lorem2</p>
            <p>lorem3</p>
            <p>lorem4</p>
            <p>lorem5</p>
            <p>lorem6</p>
            <p>lorem7</p>
            <p>lorem8</p>
            <p>lorem9</p>
            <p>lorem10</p>
            <p>lorem11</p>
        </div>
    </div>
    


    <br>

    <button id="left_btn"> < </button>
    <button id="right_btn"> > </button>


    <script src="../jquery-3.3.1.js"></script>
    <script>
        
        $(function(){

            $('#left_btn').on('click', function(){
                console.log($('#box').scrollLeft())
                // $('#box').scrollLeft(800);//是把 scrollLeft 设置为800
            
                $('#box').scrollLeft($('#box').scrollLeft() + 800);     //正表示内容每次向左移动800px    
            });

            $('#right_btn').on('click', function(){
                $('#box').scrollLeft($('#box').scrollLeft() - 800 )  //负表示内容每次向左移动800px  
            })
        })
    </script>
</body>
</html>

滚动

2.3 元素尺寸

widht()            取得第一个匹配元素当前计算的宽度值（px）
height()        取得匹配元素当前计算的高度值（px)
innerWidth()    匹配元素内部区域宽度（包括补白、不包括边框）
innerHeight()    匹配元素内部区域高度（包括补白、不包括边框）
outerWidth()    匹配元素外部宽度（默认包括补白和边框）
outerHeight()    匹配元素外部高度（默认包括补白和边框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素尺寸</title>
    <style>
        #box {
            width:200px;
            height:300px;
            padding:15px;
            border: 3px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>获取元素尺寸</h1>
    <hr>


    <div id="box"></div>

    <script src='../jquery-3.3.1.min.js'></script>
    <script>
        $(function(){
            console.log($('#box').width(), $('#box').height())  //内容的大小 :200 300
            console.log($('#box').innerWidth(), $('#box').innerHeight())  //内容大小+padding  :230 330
            console.log($('#box').outerWidth(), $('#box').outerHeight())  //内容大小+padding+border 实际大小  :236 336


            //设置
            $('#box').width(300); //设置 内容的宽是300
            $('#box').outerWidth(300) //设置 盒子 总的宽 是 300

        })
    </script>
</body>
</html>