jQuery的DOM操作-CSDN博客

本文链接：https://blog.csdn.net/qq_43398720/article/details/100403622

jQuery的DOM操作

DOM是document object modle的缩写，意思是文档对象模型

属性操作

查找属性节点

<script>
    $(function(){
        // 获取属性
        console.log($('div').attr('id'));
        // 设置属性
        $('div').attr('class','div');
        // 设置自定义属性
        $('p').attr('tag','flag');
        // 删除属性
        $('p').removeAttr('tag');
        // 获取input属性
        console.log($('input').attr('type'));
        console.log($('input').attr('checked'));
        // 用Prop
        console.log($('input').prop('checked'));//返回的就是布尔值
        $('button').click(function(){
            // if($('input').attr('checked')=='checked'){
            //     $('input').attr('checked',false);
            // }
            if($('input').prop('checked')){
                $('input').prop('checked',false);
            }
        })
    })
    </script>

注意：prop只可以删除通过他添加的自定义属性，其他的都删不了

class相关操作

<body>
    <button>点击</button>
    <div class="box"></div>
    <script>
        $('button').click(function(){
            // $('.box').addClass('col tag');//在原来的基础上添加类名
            // $('.box').removeClass('tag');//删除类名
            // $('.box').removeClass('tag').removeClass('col');//连续删除两个类名
            // var has=$('.box').hasClass('col');
            // console.log(has);//如果有就返回true，如果没有就返回false
            //  var is=$('.box').is('.col');
            // console.log(is)//如果有就返回true，如果没有就返回false
            // is需要加点，has不需要加点
            // if($('.box').hasClass('col')){
            //     $('.box').removeClass('col');
            // }else{
            //     $('.box').addClass('col');
            // }
            // $('.box').toggleClass('tag');//切换，如果有就删除，如果没有就添加
        })
    </script>
</body>

获取和设置HTML、文本、值

<body>
    <button>click</button>
    <div class="box">好困好困好困</div>
    <input type="text" value="我不饿">
    <select multiple>
        <option value="111">111</option>
        <option value="222">222</option>
        <option value="333">333</option>
        <option value="444">444</option>
    </select>
    <script>
    $(function(){
        console.log($('div').html());
        // $('div').html('<b>你不困！</b>')
        $('div').text('<b>你不困！</b>')
        console.log($('input').val());
        $('input').val('你饿')
        $('button').click(function(){
            console.log($('.box').width());//内容的宽
            console.log($('.box').innerWidth());//内容宽+padding
            console.log($('.box').outerWidth());//内容宽+padding+border
            console.log($('.box').outerWidth(true));//内容宽+padding+border+margin
            $('.box').height('200px');//括号里面没有值是获取，括号里面有值就是设置
        })
        console.log($('select').val());//默认是第一个，可以改变
        // console.log($('select').val('444'));//默认是444
        console.log($('select').val(['333','444']));//也可以多选
    })
    </script>
</body>

html（），可以识别标签
text（），不识别标签

样式操作

console.log($('.box').width());//内容的宽
            console.log($('.box').innerWidth());//内容宽+padding
            console.log($('.box').outerWidth());//内容宽+padding+border
            console.log($('.box').outerWidth(true));//内容宽+padding+border+margin
            $('.box').height('200px');//括号里面没有值是获取，括号里面有值就是设置

offset&position

<body>
    <button>click</button>
    <div class="box"></div>
    <script>
        $(function () {
            // console.log($('.box').offset());
            // console.log($('.box').offset().top);
            console.log($('.box').position());//定位
        })
    </script>
</body>

滚动条

 $(window).scroll(function(){
            console.log($(window).scrollTop());
        })

节点操作

创建节点

$('<p></p>');//这就创建了一个节点
$('<p>123123</p>');//内容直接写在里面就行

插入节点(都有两种写法，那个都可以)

作为子节点放在最后

元素.appendTo('#box')
$('#ox').append(元素)

作为子节点放在最前

元素.prependTo('#box')
$('#ox').prepend(元素)

作为兄弟节点放在后面

元素.insertAfter('#box')
$('#ox').after(元素)

作为兄弟节点放在前面

元素.insertBefore('#box')
$('#ox').before(元素)

删除节点

对象.remove()

复制节点

$('ul').clone(true).insertAfter($('ul'));//复制

替换节点

$('ul li:eq(1)').replaceWith(h3);//替换，后面的替换前面的

包裹节点

// $('b').wrap('<i>')//每一个b都外面都裹着一个i
// $('b').wrapAll('<i>')//所有的b外面裹着一个i
// $('b').wrapInner('<i>')//每一个b里面裹着一个i
$('b').unwrap();//删除父级，如果父级是body，则不能删除

节点遍历

遍历子节点

$('.box').children();//得到的是所有标签子节点，不包括文本
$('.box').children('p');//还可以只找子节点中，标签是p的

遍历父节点

$('.son').parent();//找到的就是父节点
$('.son').parents();//父辈节点，一直到HTML
$('.son').parents('div');//也可以筛选

遍历兄弟节点

$('.li').siblings().css('background','skyblue');//兄弟节点，没有上下级
$('.li').prev().css('color','pink');//紧挨着的兄节点
$('.li').prevAll().css('font-size','30px');//所有的兄节点
$('.li').next().css('color','pink');//紧挨着的弟节点
$('.li').nextAll().css('font-size','30px');//所有的弟节点

过滤–filter

$('li').filter('.box').css('color','red');//找到li中类名是box的

排除–not

$('li').not('.box').css('color','red');//找到li中类名不是box的