Jquery 操作DOM元素（1）

野性酷女 2022-03-17 02:20 212阅读 0赞

> 用原生js来操作dom元素其实是一件比较繁琐的事，当JQuery遇到dom操作时会怎样呢？

直接上代码，已注释好：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Jqurey dom</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
    </head>
    
    <body>
        <input type="button" id="btn" value="按钮">
        <input type="text" id="text">
        <div id="block">6
            <span></span>
        </div>
        <ul>
            <li class="lilist">1</li>
            <li class="lidata">2</li>
            <span>6</span>
            <li class="lilist">3</li>
            <span>5</span>
            <li class="lilist">4</li>
        </ul>
        <script>
            // 1.操作元素的属性 attr   prop   获取或设置值
            $('#btn');
            console.log($('#btn'));
            $('#btn').attr('value', 'btn');
            $('#btn').prop('value', 'btn1');
            console.log($('#btn').attr('value'));
            console.log($('#btn').prop('value'));
            // 一次性设置多值（无法获取多值，下同）prop和attr都有一些bug 需要按需求挑选呢
            $('#btn').prop({
                width: '100px', //prop无法加这个属性
                value: '你好'
            });
            $('#btn').attr({
                width: '100px',
                value: '你好',
                backgroundColor: 'red'
            })
            // 自定义属性,删除自定义属性
            var btn = $('#btn');
            console.log(btn);
            btn.attr("data-src", "./image/1.jpg");
            console.log(btn.attr("data-src"));
            btn.removeAttr('data-src');//类似removeProp
            console.log(btn.attr("data-src")); 
            //2.元素内容的操作
            // js 用innerHTML   innerText  其中Text表示文本，HTML表示内容，赋值时二者相同，取值时不同
            // jQuery  html()   Text()  用法相同
            var block=$('#block');
            console.log(block.text());
            console.log(block.html());
            block.text('666');//此时span标签已经消失
            block.html('666');
            // 3.操作表单元素的值 val()
            var text=$('#text');
            text.val('123245');
            // 操作dom元素的css css()   获取或设置元素的样式
            text.css('borderColor', '#090a0a');
            var Color=text.css('borderColor');
            console.log(Color);
            // jQuery的颜色为rgb值，需要转化
            // 传入rgb值，转化为16进制
            var color=(function(c){
                var a=c.split(',')
                var r=parseInt(a[0].split('(')[1]);
                var g=parseInt(a[1]);
                var b=parseInt(a[2].split(")")[0]);
                return "#"+((r<<16)+(g<<8)+b).toString(16);
            })(Color);
            console.log(color);
            text.css({
                width:'',
                height:''
            });
            // 5.类名称的添加 addClass()   追加名称
            $('#btn').addClass('btninfo');
            // 添加多个类
            $('#btn').addClass('btninfo btnlist');
            // 移除类名称
            $('#btn').removeClass('btninfo');
            // 移除全部
            $('#btn').removeClass();
            // 6.jquery操作子父节点的问题
            // children() 找父元素里的子节点
            console.log($('ul').children()[0]);
            console.log($('ul>li').first());
            console.log($('ul>li').last());
            // eq() 根据索引找元素
            console.log($('ul>li').eq(2));
            // 找同胞元素
            console.log($('ul>li').first().siblings('.lilist'));
            // 找当前元素的前一个元素
            console.log($('ul>li').eq(1).prev());//一个
            console.log($('ul>li').eq(2).prevAll('li'));//前面的所有
            // 找当前元素的后一个元素
            console.log($('ul>li').eq(1).next());//一个
            console.log($('ul>li').eq(1).nextAll());//全部
            // filter()   过滤元素
            console.log($('ul>li').filter('.lidata'));
            // is()  判断当前对象是谁
            console.log($('ul>li').eq(0).is('.lilist'));
    
            //7.jquery尺寸问题
        console.log($("body").width());//可视区域
        console.log($("body").innerWidth());//包括内边距的距离
        console.log($("body").outerWidth());//可视区域
        </script>
    </body>