jQuery DOM元素的操作总结一

最新推荐文章于 2024-08-15 19:25:35 发布

原创最新推荐文章于 2024-08-15 19:25:35 发布 · 712 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jQuery #jq

前端专栏收录该内容

31 篇文章

订阅专栏

本文深入讲解了使用jQuery进行DOM元素操作的技巧，包括创建、选择、筛选、遍历及特性、属性和数据操作。从创建HTML元素到通过关系查找元素，再到筛选和遍历jQuery对象，以及操作元素的特性、属性和数据，全面覆盖了jQuery元素操作的核心内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM元素操作

创建HTML

创建一个div并显示到页面上

<script>
$(function() {
    var div = $('<div>Hello</div>');
    console.log(div);
    div.appendTo('body'); //将div添加到body最后面
    console.log($('div'));
}
</script>

创建一个a标签并为其添加属性的两种方法

<script>
	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>

DOM元素选择

<script>
    $(function () {
        var elements = $('li');
        console.log(elements.length); //获取li的数量
        
        console.log(elements[0]); //获取指定的DOM元素
        console.log(elements.get()); //获取全部的DOM元素
        console.log(elements.get(0)); //获取指定的DOM元素
        console.log(elements.get(-1)); //获取指定的DOM元素(从后向前)

        console.log(elements.eq(0));  //获取指定的jQuery对象
        console.log(elements.eq(-1)); //(从后向前)
        console.log(elements.first()); //获取第一个jQuery对象
        console.log(elements.last()); //获取最后一个jQuery对象

        console.log(elements.toArray()); //和get()作用一样
    });
</script>

通过关系查找jQuery对象的方法

<!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">通过关系查找jQuery对象的方法</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="jquery-1.12.4.js"></script>
<script>
    $(function () {
        console.log($('#box3').children()); //获取匹配元素集合中每个元素的所有子元素
        console.log($('#box3').children('p')); //获取匹配元素集合中每个元素的所有p元素

        console.log($('#box3').contents()); //获取匹配元素集合中每个元素的所有子元素，包括文本的注释节点

        console.log($('#box3').find('.item1')); //获取当前匹配元素集合中每个元素的后代，有选择器筛选

        console.log($('ul, #box3').parent()); //获取当前匹配元素集合中每个元素的父元素
        console.log($('ul, #box3').parent('#box2')); //获取当前匹配元素集合中父元素为box2的元素

        console.log($('ul, #box3').parents()); //获取当前匹配元素集合中每个元素的祖先元素(从父到祖先)
        console.log($('ul, #box3').parents('#box2')); //获取当前匹配元素集合中祖先元素为box2的元素

        console.log($('.item1').parentsUntil('#box1')); //获取当前匹配元素集合中每个元素的祖先元素，知道遇到匹配的元素为止

        console.log($('.item1').closest('div')); //从元素本身开始，逐级向上级元素匹配，返回最先匹配的祖先元素
        
        console.log($('.item4').next('li')); //获取匹配元素集合中每个元素紧邻的后一个同辈元素
        console.log($('.item4').nextAll('li')); //获取匹配元素集合中每个元素之后的所有同辈元素
        console.log($('.item4').nextUntil('.item7')); //获取匹配元素集合中每个元素之后的所有同辈元素，直到遇到匹配选择器的元素为止

        console.log($('.item4').prev('li')); //获取匹配元素集合中每个元素紧邻的前一个同辈元素
        console.log($('.item4').prevAll('li')); //获取匹配元素集合中每个元素之前的所有同辈元素
        console.log($('.item4').prevUntil('.item1')); //获取匹配元素集合中每个元素之前的所有同辈元素，直到遇到匹配选择器的元素为止
        
        console.log($('.item4').siblings()); //获取匹配元素集合中所有元素的同辈元素
        console.log($('.item4').siblings('.item2')); 
    });
</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="jquery-1.12.4.js"></script>
<script>
    $(function () {
        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')); //将匹配元素集合缩减为包含特定元素的后代的集合

        console.log($('li').slice(0)); //将匹配的元素集合缩减为指定范围的子集(左闭右开)
        console.log($('li').slice(3, 5));
        console.log($('li').slice(-2)); //从后向前查两个

        console.log($('div').map(function (index, domElement) { //把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery对象
            return this.id;
        }));

        console.log($('li').each(function (index, domElement) { //对jQuery对象进行迭代，为每个匹配元素执行函数
            this.title = this.innerText;
        }));
        
		console.log($('#box3').children().is('p')); //根据选择器检查当前匹配元素集合

		console.log($('#box3').children().end()); //结束当前链接中最近一次删选操作，并将匹配元素集合返回到前一次的状态
        console.log($('#box3').end());
		
		console.log( //将item3也改变样式
            $('.item3').nextUntil('.item6').addBack().css('color', 'red')
        );
    });
</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');

        console.log(img.attr('id')); //返回匹配元素的值(特性)
        console.log(checkbox.attr('TABINDEX')); //大小写都可以

        console.log(img.attr({ //设置元素的属性和值
            title: 'new title2',
            alt: 'new alt2'
        }));
        console.log(img.attr('title', function(index, previousValue) { //函数方法
            return previousValue + '-' + index;
        }));

        console.log(img.removeAttr('title alt')); //移除所有匹配的元素
		
		console.log(checkbox.prop('checked')); //返回匹配元素的值(属性)
		console.log(checkbox.prop('checked', true)); //设置元素的属性和值
		console.log(checkbox.removeProp('checked')); //移除属性

		img.data('description', 'jquery logo'); //设置数据的值
        console.log(img.data('description')); //获取数据的值
		$('#logo').removeData(); //删除数据
        console.log($('#logo').data());
    });
    </script>
</body>

</html>