Jquery 操作DOM元素（1）

用原生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>
Jquery 操作DOM元素（1）

猜你喜欢
