jquery的DOM操作

最新推荐文章于 2023-08-03 15:30:00 发布

花江夏树

最新推荐文章于 2023-08-03 15:30:00 发布

阅读量3.9k

点赞数

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78871701

版权

创建HTML

DOM对象和jquery对象的区别

DOM对象是浏览器渲染出来的元素 jquery对象是对0、1个或者多个DOM对象的包装

例如

最后一个返回jquery版本号

创建HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>create HTML</title>
</head>

<body>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        var div = $('<div>Hello</div>');

        console.log(div);

        console.log($('div'));

        div.appendTo('body');

        console.log($('div'));
//方法一 局限性大一些
        var link = $('<a>', {
            text: '百度',
            href: 'https://www.baidu.com',
            target: '_blank',
            title: '去往百度首页'
        });

        link.appendTo('body');
//方法二
        var link2 = $('<a>百度</a>').attr({
            href: 'https://www.baidu.com',
            target: '_blank',
            title: '去往百度首页'
        });

        link2.appendTo('body');
    });
    </script>
</body>

</html>

检查和获取元素

提取

first（）获取第一个元素无需参数

last() 获取最后一个元素无需参数

toArray（）和不加参数的get一模一样一般使用get

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="div"></div>


<ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
    <li>item-4</li>
    <li>item-5</li>
    <li id="item6">item-6</li>
    <li>item-7</li>
    <li>item-8</li>
    <li>item-9</li>
</ul>
<script>
    //DOM对象和jquery对象
/*    var DOMObject = document.getElementById('div');
    var jqueryObject = $('#div');

    console.log(DOMObject);//<div id="div"></div>
    console.log(jqueryObject);//[div#div]

    //检测dom对象 jquery对象
    console.log(DOMObject.nodeType);//1
    console.log(jqueryObject.jquery);//返回jquery版本号 3.1.0

    */


//创建html
/*var link =  $('<a>百度</a>').attr({
    href: 'http://www.baidu.com',
    target: '_blank',
    title: '百度首页',
    style: 'text-decoration:none'
})

    link.appendTo('body');*/


//查找元素

    //[index]返回dom元素  get（index）返回dom或者元素集合   eq（index）返回jquery对象
    var elements = $('li');
    console.log(elements.length);
    console.log(elements[0]);//item-1    dom元素没有.text方法 只有.innerText

    console.log(elements.get());//返回九个li的集合
    console.log(elements.get(0));//item-1
    console.log(elements[-1]);//undefined 
    console.log(elements.get(-1));//item-9


    console.log(elements.eq(0).text());
    console.log($('li:eq(0)'))//不如$('li').eq(0)

    console.log(elements.eq(0).text());//item-1
    console.log(elements.first().text());//item-1

    console.log(elements.eq(-1).text());//item-9
    console.log(elements.last().text());//item-9

    console.log(elements.toArray());//和get（)打印的一样 toArray() 方法以数组的形式返回 jQuery 选择器匹配的元素
    console.log(elements.get());

    console.log(elements.index($('#item6')));//返回$('#item6')的位置   5   0开始
    
</script>
</body>
</html>

通过关系查找jquery对象 parent（） children（）

*1.children和contents返回直接子元素不返回孙子以及更后代的元素 contents返回文本节点

2.find包含子元素和后代元素

3.parent返回直接的唯一的一个父元素

4.parents返回所有的父元素

5.parentsUntil 只获取到某个层级不包括这个层级

6.closest从当前元素开始匹配向父级查找 parent是从父级元素开始找 closest找到匹配的元素就停止 parent会一直找到根元素

next prev

next 下一个

nextAll 下面所有兄弟节点

nextUntil 找到就停止找不到和没有传参一样所有都查找出来

prev 前一个

prevAll

prevUntil

siblings 相邻的全部兄弟节点不包含本身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>methods</title>
</head>
<body>

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
            <ul>
                <li class="item1">item1</li>
                <li class="item2">item2</li>
                <li class="item3">item3</li>
                <li class="item4">item4</li>
                <li class="item5">item5</li>
                <li class="item6">item6</li>
                <li class="item7">item7</li>
                <li class="item8">item8</li>
                <li class="item9">item9</li>
            </ul>
        </div>
    </div>
</div>

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

//通过关系查找  console.log($('#box3').children());//返回id为box3的直接子元素 不返回孙子以及以后的元素 p和ul  console.log($('#box3').children('p'));//选中p   console.log($('#box3').contents());//返回box3的直接子元素 包括文本节点 text p text ul text //find可以找到后代元素  console.log($('#box1').find('.item3').css('color','red')); //parent返回直接的一个父元素 parents所有祖先元素 parentsUntil 匹配到某一个层级就停止  console.log($('#box3').parent());//box2  console.log($('#box3').parents());//box2 box1 body html  console.log($('#box3').parentsUntil('#box1'));//box2!!!!!!!不包括box1  console.log($('#box3').closest('div'));//box3 !!!closet从当前元素开始查找    //next  console.log($('.item3').next('li'));//item4  console.log($('.item3').nextAll('li'));//item4~9  console.log($('.item3').nextUntil('.item7'));//item 4 5 6; 不包括7  console.log($('.item7').nextUntil('.item10'));//item8 9 不存在10就全部找完  console.log($('.item7').nextAll());//找不到和不传参一样    //prev  console.log($('.item4').prev('li'));//item3  console.log($('.item4').prevAll('li'));//item3~1  console.log($('.item4').prevUntil('.item2'));//item3;  console.log($('.item4').prevUntil('.item0'));//item3~1  console.log($('.item4').prevAll());//同上   console.log($('.item4').next('.item3'));//空  console.log($('.item8').prev('.item9'));//空    //siblings  console.log($('.item4').siblings());//item 1 2 3 5 6 7 8 9  console.log($('.item4').siblings('.item6'));//选中item6

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

筛选和遍历jquery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
            <ul>
                <li class="item1">item1</li>
                <li class="item2">item2</li>
                <li class="item3">item3</li>
                <li class="item4">item4</li>
                <li class="item5">item5</li>
                <li class="item6">item6</li>
                <li class="item7">item7</li>
                <li class="item8">item8
                    <ul></ul>
                </li>
                <li class="item9">item9</li>
            </ul>
        </div>
    </div>
</div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //增加
        console.log($('.item1, .item2'));
        console.log($('.item1').add('.item2'));//这一种比上面好

        //过滤
        console.log($('li').not('.item2, .item3'));//去掉
        console.log($('li').filter('.item2, .item3'));//筛选出

        console.log($('li').not(function (index) {
            return $(this).hasClass('item1');
        }));
        console.log($('li').filter(function (index) {
            return $(this).hasClass('item1');
        }));

        console.log($('li').has('ul'));//has用的少 一般用于筛选有没有二级菜单

        console.log($('li').slice(0));//1~9
        console.log($('li').slice(3));//从0开始
        console.log($('li').slice(3, 5));//【3,5）
        console.log($('li').slice(-2));//倒着筛选

        console.log($('div').map(function (index, domElement) {
            return this.id;

//.id是js的属性 所以这里不是$(this)

}));//遍历 console.log($('li').each(function (index, domElement) { this.title = this.innerText; })); });</script></body></html> each返回的是原来的数组，并不会新创建一个数组。而map方法会返回一个新的数组。

其他操作

is 、end、addback

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
                <ul>
                    <li class="item1">item1</li>
                    <li class="item2">item2</li>
                    <li class="item3">item3</li>
                    <li class="item4">item4</li>
                    <li class="item5">item5</li>
                    <li class="item6">item6</li>
                    <li class="item7">item7</li>
                    <li class="item8">item8
                        <ul></ul>
                    </li>
                    <li class="item9">item9</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        console.log($('#box3').children().is('p'));
        console.log($('#box3').children().is('img'));

        console.log($('#box3').children().end());//回到破坏性操作之前 （改变jquery对象的操作
        console.log($('#box3').end());//不是破坏性操作 无效

        //        console.log(
        //            $('#box3').find('.item3').css('color', 'red')
        //                .end().find('.item5').css('color', 'blue')
        //                .end().find('.item7').css('color', 'green')
        //                .end().find('.item9').css('color', 'orange')
        //        );

        //        console.log(
        //            $('.item3').nextUntil('.item6').css('color', 'red')
        //        );

        console.log(
            $('.item3').nextUntil('.item6').addBack().css('color', 'red')//把item3也改回红色
        );
    });
    </script>
</body>

</html>

元素特性和属性值

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

以下为测试同步与不同步规则
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<img id="logo" src="../logo1.jpg" alt="jQuery logo" class="img-jquery" title="jQuery logo" />

<input type="checkbox" id="check"
    tabindex="1" style="width:50px; height: 50px;"
    title="Check this!" description="just a checkbox" />

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

        var checkbox = document.getElementById('check');

        //        console.log(checkbox.getAttribute('tabIndex'));
        //        console.log(checkbox.tabIndex);
        //        console.log(typeof checkbox.getAttribute('tabIndex'));
        //        console.log(typeof checkbox.tabIndex);
        //        console.log(checkbox.getAttribute('style'));//返回字符串
        //        console.log(checkbox.style);//返回对象
        //        console.log(typeof checkbox.getAttribute('style'));
        //        console.log(typeof checkbox.style);
        //
        //        console.log(checkbox.attributes);

        console.log(checkbox.getAttribute('title') === checkbox.title);
        checkbox.title = 'New title!';
        console.log(checkbox.getAttribute('title') === checkbox.title);//均发生改变
        checkbox.setAttribute('title', 'Another title!');
        console.log(checkbox.getAttribute('title') === checkbox.title);


        console.log(checkbox.getAttribute('checked'));//获取特性的方法获取不到checked
        console.log(checkbox.checked);//获取属性的方法  针对这种类型的用这种方法

        checkbox.checked = true;
        console.log(checkbox.getAttribute('checked'));
        console.log(checkbox.checked);

        checkbox.setAttribute('checked', 'false');
        console.log(checkbox.getAttribute('checked'));
        console.log(checkbox.checked);

        console.log(checkbox.getAttribute('description'));
        console.log(checkbox.description);

        checkbox.description = '123';
        console.log(checkbox.getAttribute('description'));
        console.log(checkbox.description);

        checkbox.name = 'check';
        console.log(checkbox.getAttribute('name'));
        console.log(checkbox.name);
        checkbox.setAttribute('name', 'Another name!');
        console.log(checkbox.getAttribute('name'));
        console.log(checkbox.name);


        checkbox.style = "width:150px; height: 150px;";
        console.log(checkbox.getAttribute('style'));
        console.log(checkbox.style);
        checkbox.style = {
            width: 200,
            height: 200
        };
        console.log(checkbox.getAttribute('style'));
        console.log(checkbox.style);



        var img = document.getElementById('logo');

        console.log(img.attributes);

        img.src = '../logo.jpg';

        console.log(img.src);
        console.log(img.getAttribute('src'));

        console.log(img.class);//xx不能这么写
        console.log(img.getAttribute('class'));
        console.log(img.className);


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

操作元素的特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <img id="logo" src="../logo1.jpg" alt="jQuery logo" title="jQuery logo" />
    <img id="logo2" src="../logo1.jpg" alt="jQuery logo" class="img-jquery2" title="jQuery logo" />
    <input type="checkbox" id="check" tabindex="1" style="width:50px; height: 50px;" title="Check this!" description="just a checkbox" />
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var img = $('img');
        var checkbox = $('#check');
//attr获取第一个
        //        console.log(img.attr('id'));
        //        console.log(img.attr('class'));
        //
        //        console.log(checkbox.attr('tabIndex'));
        //        console.log(checkbox.attr('TABINDEX'));//大小写都无妨
        //        console.log(checkbox.attr('checked'));

        console.log(img.attr('title', 'new title'));
        console.log(img.attr({
            title: 'new title2',
            alt: 'new alt2'
        }));
        console.log(checkbox.attr({
            tabIndex: 2
        }));
        console.log(img.attr('title', function(index, previousValue) {
            return previousValue + '-' + index;
        }));
        console.log(checkbox.attr({
            tabIndex: function(index, previousValue) {
                return ++previousValue;
            }
        }));

        console.log(img.removeAttr('title alt'));
        console.log(document.getElementById('logo').title);

    });
    </script>
</body>

</html>

操作元素的属性

prop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <img id="logo" src="../logo1.jpg" alt="jQuery logo" class="img-jquery" title="jQuery logo" />
    <img id="logo2" src="../logo1.jpg" alt="jQuery logo" class="img-jquery2" title="jQuery logo" />
    <input type="checkbox" id="check" tabIndex="1" style="width:50px; height: 50px;" title="Check this!" description="just a checkbox" />
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var img = $('img');
        var checkbox = $('#check');

        console.log(checkbox.prop('checked'));
        console.log(checkbox.get(0).checked);//checkbox是jquery对象 不能直接.checked
        console.log(checkbox.attr('checked'));

        console.log(checkbox.prop('tabindex'));
        console.log(checkbox.prop('tabIndex'));
        console.log(checkbox.prop('TABINDEX'));//区分大小写 和特性不一样

        console.log(img.prop('className'));
        console.log(img.prop('class'));//和className一样

        console.log(checkbox.prop('checked', true));//布尔属性最好用prop设置
        console.log(checkbox.prop('checked'));
        console.log(checkbox.attr('checked', true));
        console.log(checkbox.attr('checked'));
        console.log(checkbox.prop('checked'));
        console.log(checkbox.attr('checked', false));
        console.log(checkbox.prop('checked'));

        console.log(checkbox.removeProp('checked'));//一次只能删除一个
        console.log(checkbox.prop('checked'));//false
        //        console.log(checkbox.prop('checked', true));
        //        console.log(checkbox.prop('checked'));

        //        console.log(img.removeProp('title'));
        //        console.log(img.attr('title'));//undefined
        //        console.log(img.prop('title'));//undefined
        //        console.log(img.removeProp('alt'));
        //        console.log(img.attr('alt'));//undefined
        //        console.log(img.prop('alt'));//undefined

    });
    </script>
</body>

</html>

在元素中存取数据

关于data方法

如果data（）不加任何参数，则会返回所有的数据；

data（）和attr（）不同的是，他可以保留数据的类型；

data（）提供了批量的方式，传入一个对象即可；

addClass 、removeClass、toggleClass（）；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .box {
        width: 100px;
        height: 100px;
    }
    
    .red {
        background-color: red;
    }
    
    .b10 {
        border: 10px solid #000;
    }
    
    .m10 {
        margin: 10px;
    }
    
    .p10 {
        padding: 10px;
    }
    
    .hide {
        display: none;
    }
    </style>
</head>

<body>
    <div class="box" id="demo">div</div>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var element = $('#demo');

        //        element.addClass('red');
        //        element.addClass('b10 m10 p10');
        //        element.removeClass('b10 m10 p10');


        //        element.addClass(function (index, className) {
        //            console.log(index);
        //            console.log(className);
        //            return 'red';
        //        });
        //        element.removeClass(function (index, className) {
        //            console.log(index);
        //            console.log(className);
        //            return 'red';
        //        });

        //        if (element.hasClass('hide')) {
        //            element.removeClass('hide');
        //        } else {
        //            element.addClass('hide');
        //        }

        element.toggleClass('hide');

        $('li').each(function(index) {
            $(this).toggleClass('red', index % 3 === 0);
        });
        element.toggleClass('hide box red');//可以传多个类

    });
    </script>
</body>

</html>

css（）需要修改的样式很少的时候使用这种更好

设置尺寸

width 、innerWidth、outerWidth（）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 100px;
        height: 100px;
    }
    </style>
</head>

<body>
    <div class="box" id="demo">div</div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var element = $('#demo');

        element.css('width', 200);

        element.css({
            'background-color': 'red',//也可以用驼峰不用-  但是用-必须要引号
            height: 200,
            border: '10px solid #000',
            marginTop: 100,
            mArGinLeft: 100,
            width: '+=200'//在原有的基础上+200
        });

        element.css('height', function(index, value) {
            console.log(value);
            return parseInt(value, 10) + 50;//十进制 最好写上这个 虽然默认是十进制
        });

        console.log(element.css('height'));
        console.log(element.css(['height', 'width', 'border']));

        console.log(element.width());
        console.log(element.height());

        element.css({
            width: '50%',
            height: '30em'
        });
        console.log(element.width());
        console.log(element.height());

        element.css({
            width: 100,
            height: 100,
            border: '10px solid #000',
            margin: 20,
            padding: 30
        });

        //        console.log(element.width());
        //        console.log(element.height());
        //        console.log(element.innerWidth());//加了内边距
        //        console.log(element.innerHeight());
        //        console.log(element.outerWidth());//内边距加边框
        //        console.log(element.outerHeight());
        //        console.log(element.outerWidth(true));
        //        console.log(element.outerHeight(true));

        console.log(element.offset());

        //        element.css({
        //            position: 'absolute',
        //            width: 100,
        //            height: 100,
        //            border: '10px solid #000',
        //            margin: 20,
        //            padding: 30,
        //            left: 200,
        //            top: 100
        //        });
        //        console.log(element.offset());
        //
        //        element.offset({
        //            top: 50,
        //            left: 100
        //        })
        //        console.log(element.offset());//相当于文档的偏移

        console.log(element.position());//相当于父元素的偏移

    });
    </script>
</body>

</html>

offset、postion

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #cccccc;
    }
    
    .item {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    </style>
</head>

<body>
    <div class="box" id="demo">
        <div class="item"></div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var demo = $('#demo');
        var element = $('.item');

        console.log(element.offset());//相当于文档
        console.log(element.position());//相当于父元素

        demo.css({
            left: 10,
            top: 20
        });

        element.css({
            left: 10,
            top: 20
        });

        console.log(element.offset());
        console.log(element.position());

        demo.css({
            overflow: 'hidden'
        });
        element.css({
            margin: 20
        });

        console.log(element.offset());
        console.log(element.position());
    });
    </script>
</body>

</html>

scrollTop scrollLeft （设置回到顶部的效果）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        overflow: auto;
    }
    
    p {
        width: 500px;
    }
    </style>
</head>

<body>
    <div class="box" id="demo">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores aspernatur at aut harum iure molestias nisi quos vel. A, dicta inventore nisi nobis praesentium quas ullam vero! Beatae enim laborum nam nulla quaerat quos rem. A alias asperiores assumenda at autem culpa deleniti dolorum earum est facilis fugiat fugit nam nesciunt obcaecati perspiciatis placeat porro quas qui quia quis rem sequi soluta, tenetur veritatis voluptate. Asperiores consequuntur delectus error ex explicabo mollitia natus nobis? Aperiam asperiores assumenda autem corporis eligendi expedita fuga, harum hic molestias nemo numquam praesentium quaerat ratione recusandae repellat velit voluptas voluptatibus! Accusantium alias consectetur consequuntur culpa deserunt doloribus ducimus ea et exercitationem explicabo illo incidunt ipsam iste magnam magni maxime, molestiae molestias nam nihil nobis nostrum obcaecati officia omnis porro possimus quia reprehenderit repudiandae rerum sed sequi sunt temporibus tenetur ullam? Aspernatur et eum ipsam maxime nobis nulla quae quia quibusdam quo sint tempora tempore, totam voluptates? Accusamus aspernatur cum, dignissimos dolores ea et excepturi ipsa iure minima quas? Alias deserunt dignissimos esse eum exercitationem, fuga harum magni modi natus, nemo neque nostrum numquam porro provident quibusdam quisquam ratione similique unde ut veritatis? Asperiores deleniti distinctio dolorem, dolores earum est excepturi fuga ipsam itaque laboriosam laborum maxime omnis perferendis possimus qui quia repellat tempore velit voluptas, voluptatum? Aliquam, amet deleniti dignissimos dolor eaque et facilis harum maiores maxime nemo rerum temporibus tenetur ut vitae voluptatibus. Harum illo inventore saepe? Beatae dolorum enim, expedita facere molestiae praesentium quisquam recusandae reprehenderit? Ad atque corporis dicta, dolore, est fugiat harum hic impedit laboriosam possimus recusandae voluptate! Aperiam aspernatur atque culpa cum dicta ducimus enim ex impedit ipsa ipsam itaque magnam mollitia nisi nobis nulla obcaecati officia optio placeat quaerat quisquam repellat repudiandae, sapiente, sed soluta sunt temporibus ullam unde ut vero voluptatem! Autem cum enim impedit ipsam maxime non omnis perspiciatis repellendus sapiente voluptas. Aut mollitia necessitatibus saepe sapiente! Beatae nam natus quo repellendus unde. Autem cupiditate exercitationem id inventore itaque natus nisi possimus ratione repudiandae totam! A accusamus aperiam asperiores aspernatur autem, consectetur dolorem ea eum eveniet, ex explicabo harum illum incidunt ipsum iure magni minima molestias nemo nihil odio possimus quam quasi quibusdam quis quisquam quo ratione rem similique, sit tempora ullam ut vel veniam? Architecto asperiores assumenda dolores in inventore mollitia neque nobis nulla, quae qui quo ratione vitae. A ab alias aperiam aspernatur atque beatae distinctio doloribus eaque error et eveniet facere fugit id, illum ipsum iste iusto magni maxime minima molestiae mollitia nihil nisi pariatur porro praesentium quae quam, quibusdam quisquam quod reprehenderit repudiandae saepe, vel vitae voluptas voluptate voluptatem voluptatum? Ad culpa dolor dolore facilis in ipsa, libero maxime molestias repellendus tempora tempore ut. Accusantium adipisci amet commodi corporis enim est labore laudantium nam perferendis, quibusdam veniam voluptate? Animi aperiam commodi delectus deleniti deserunt ea, eveniet fugiat fugit iste modi nemo nobis odio officia optio, quisquam rem, ullam. Aliquid cum explicabo quam voluptas. Aliquid cumque deserunt molestias voluptatem. Accusamus, adipisci aliquam commodi cumque doloribus enim eos in laboriosam laudantium obcaecati quidem, vel veritatis vero. Ab accusamus, aliquid animi at blanditiis commodi consequuntur dicta dolore doloremque eaque eos et eveniet facere harum, id illo illum ipsa ipsum laborum maxime minima molestiae nam neque nesciunt praesentium quasi qui quibusdam quis ratione repellendus reprehenderit sit suscipit tempora, tenetur totam vitae voluptates? Accusamus aliquam aperiam asperiores aspernatur assumenda at atque beatae consequatur culpa dolore ducimus eius, facere fuga fugiat ipsum iure laboriosam magnam nam neque non nostrum odio perferendis perspiciatis quaerat quod ratione repellat similique sint sunt tempore unde vel velit veniam veritatis vitae voluptas voluptatem. Aut cupiditate eaque eveniet, ex fugit, nesciunt non quaerat reiciendis repudiandae sequi vitae, voluptas. Aperiam aspernatur consectetur corporis dicta distinctio dolore eaque eos esse ex ipsam laudantium nemo nobis odio, quos, repellat repellendus ut, veniam vero! Assumenda ea explicabo magnam odit quam recusandae tenetur voluptatum. Ab animi asperiores consectetur, earum, facere ipsa itaque labore laboriosam magni modi perspiciatis, placeat quae ratione sapiente tempore! Adipisci aut deserunt dicta dolorem, enim est et eveniet excepturi fugit modi, omnis perferendis quibusdam quidem quos repudiandae sed voluptatibus! Et inventore praesentium quod repudiandae rerum! At, corporis culpa dicta eveniet fuga fugiat id illo ipsam iure minus natus odio officiis quaerat quam qui quod rem reprehenderit repudiandae sint sit, ullam vero voluptate? Error, reprehenderit, veritatis? Accusamus ad amet, deserunt dolor dolore doloribus ea, eaque earum, facilis fugiat id illo incidunt laborum maiores nisi praesentium qui quia repellat tenetur voluptatibus. Autem deleniti deserunt dolor eaque, error, id illo inventore libero optio pariatur quae quas, quia rem similique sit suscipit tempora temporibus unde vel voluptatum. A accusamus amet animi cumque delectus ducimus eius, eligendi harum illum inventore ipsum iusto laudantium libero magnam nemo nisi nobis nostrum, obcaecati perferendis placeat possimus provident quo rerum sit sunt suscipit vel veniam. A asperiores at blanditiis, cumque debitis ea eveniet inventore ipsum iure iusto maxime minus mollitia nostrum, pariatur porro quae quas quasi quibusdam sed sequi sit ullam unde ut voluptatibus voluptatum? Ad alias aliquid amet architecto asperiores atque deserunt ducimus est excepturi ipsa laboriosam nemo nesciunt, nobis nulla officiis quibusdam quidem recusandae repellat, sequi sint, suscipit vero vitae? A aliquam dolore ea enim fugiat impedit laudantium minus molestias provident quam repudiandae, sed, veritatis! Aliquam aperiam corporis enim error expedita impedit inventore molestiae nemo perspiciatis quam saepe, sunt tenetur vitae? Cum doloribus dolorum ducimus est eum eveniet mollitia natus nihil, vitae! A consequuntur dolores et facere nostrum praesentium recusandae sequi sunt. Accusamus, aliquid dolore doloremque esse incidunt iste iusto molestiae nam neque nobis non numquam odit officiis placeat porro, possimus quam, ratione reiciendis sequi suscipit tempore tenetur vitae. Adipisci assumenda est facere in ipsa, iste labore magnam minima neque nihil, nobis non officiis pariatur porro tempora vel voluptates voluptatibus? Accusamus accusantium aliquid commodi dicta ea harum in inventore ipsum labore laborum mollitia nesciunt nihil nisi non nostrum odio placeat quae quas, quia quidem quo rerum similique suscipit, veritatis voluptate. Accusamus animi at debitis dolore doloremque eaque fugit id iste maiores, nemo nisi porro quas quibusdam quod tempora, vel velit, veniam! Inventore, omnis?</p>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var demo = $('#demo');

        console.log(demo.scrollTop());
        console.log(demo.scrollLeft());

        demo.scrollTop(300);
        demo.scrollLeft(100);

        console.log(demo.scrollTop());
        console.log(demo.scrollLeft());
    });
    </script>
</body>

</html>

offset方法会返回一个对象，对象包含两个整型属性：top和 left，以像素计；

offset方法只对可见的元素有效；

offset方法返回了对象集合中第一个元素相对于文档，也就是document的偏移位置；

修改元素内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <ul>
        <li class="item1">item-1</li>
        <li class="item2">item-2</li>
        <li class="item3">item-3</li>
        <li class="item4">item-4</li>
        <li class="item5">item-5</li>
        <li class="item6">item-6</li>
        <li class="item7">item-7</li>
        <li class="item8">item-8</li>
        <li class="item9">item-9</li>
    </ul>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var elements = $('li');

        console.log(elements.html());
        console.log(elements.text());

        console.log(elements.html('<strong>123</strong>'));//必要的时候用html免得有风险
        //        console.log(elements.text('<strong>123</strong>'));

        console.log(elements.html('<script>alert("123")<\/script>'));
    });
    </script>
</body>

</html>

插入或移动元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <h2>title</h2>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        //        var elements = $('li');
        //
        //        elements.append('&nbsp;&nbsp;<a href="#">阅读更多</a>')

        var element = $('ul');

        //        element.append('<li>append</li>')
        //        element.prepend('<li>prepend</li>')
        //        element.after('<li>after</li>')
        //        element.before('<li>before</li>')

        //        element.append($('h2'))
        //        element.append($('.item1'))
        //        element.append('<p>p1</p>', ['<p>p2</p>', $('h2')], $('.item1'))
        $('h2').appendTo(element);//和append一样。。
    });
    </script>
</body>

</html>

包裹

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
    <div class="item"></div>
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <a href="#">link5</a>
    <a href="#">link6</a>
    <a href="#">link7</a>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var element = $('p');

        element.wrap('<div class="box"></div>');
            //        element.wrap($('.item'))

        //        $('a').wrap('<p></p>');
        //        $('a').wrapAll('<p></p>');
        //
        //        element.wrapInner('<div class="box"></div>');//只包裹内容
        //        $('a').wrapInner('<p></p>');

        element.unwrap();
    });
    </script>
</body>

</html>

wrapAll方法是把所有匹配的元素用参数中的元素包裹起来；

wrap方法的参数可以是一段html片段，也可以是某个jquery对象；

如果我们只是想把所有匹配的元素包裹在一个父元素内，这时候就可以使用 wrapAll方法；

移除元素

remove和detach empty

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    p {
        font-size: 12px;
    }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
    <div class="item"></div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var element = $('p');

        //        element.on('click', function () {
        //            $(this).css('fontSize', '+=5')
        //        }).data('data', 'demo')
        //
        //        element.detach() 保存对象的事件和数据
        //        element.remove（）把事件删除了  没删除数据
        //        console.log(element);
        //
        //        element.appendTo($('.item'))
        //
        //        console.log(element.data());

        element.empty();//保留元素  清除内容
    });
    </script>
</body>

</html>

复制和替换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <h2>title</h2>
    <div class="item">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
//clone两个参数  第一个是自己本身的事件和数据是否复制 第二个是子元素的事件和数据
        var element = $('ul');
        //        $('h2').clone().appendTo(element)

        //        $('.item').data('item', 'item')
        //        $('p').data('p', 'p')
        //
        //        $('.item').clone(true, true).appendTo(element)
        //
        //        console.log($('ul .item').data())
        //        console.log($('ul p').data())

        $('h2').replaceWith('<p>hello</p>');
        $('<p>hello</p>').replaceAll($('li'));


    });
    </script>
</body>

</html>

replaceWith 方法会将所有匹配的元素替换成指定的元素；

clone方法有两个参数，一个是是否复制事件处理函数和数据，一个是是否执行深度复制；

appendTo, prependTo, insertBefore, insertAfter,和 replaceAll这个几个方法都是破坏性操作；

处理表单值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<form>
    <p><input type="text" name="text"></p>
    <p>
        <input type="radio" name="radio" value="1"> radio1
        <input type="radio" name="radio" value="2"> radio2
    </p>
    <p>
        <input type="checkbox" name="checkbox" value="1"> checkbox1
        <input type="checkbox" name="checkbox" value="2"> checkbox2
    </p>
    <p>
        <select name="select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </p>
    <p>
        <select name="multiSelect" multiple>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </p>
</form>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //        console.log($('[name=aaa]').val());
        //        console.log($('[name=text]').val());//出现问题 还没选择就返回了value值
        //        console.log($('[name=radio]:checked').val());//单选框正确方式
        //        console.log($('[name=select] option:selected').val());
        //        console.log($('[name=multiSelect]').val());//下拉框可以直接val
        //        console.log(
        //            $('[name="checkbox"]:checked').map(function () {
        //                return $(this).val();
        //            }).toArray()//复选框要遍历
        //        );
        $('[name=text]').val('text')
        $('[name=select]').val('2')
        $('[name=radio]').val(['1'])
        $('[name=checkbox]').val(['2'])
        $('[name=multiSelect]').val(['1', '2'])

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

花江夏树

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery的DOM操作

创建HTMLDOM对象和jquery对象的区别DOM对象是浏览器渲染出来的元素 jquery对象是对0、1个或者多个DOM对象的包装例如最后一个返回jquery版本号创建HTML &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta c...
复制链接

扫一扫

jquery的DOM操作

“相关推荐”对你有帮助么？