组团学
学习方向
登录/注册

JQuery 元素操作

阅读 (295)

一、元素内容

指定义元素的起始标记和结束标记之间的内容，可以分为文本内容和HTML内容

文本内容：不包含元素的子元素，只包含元素的文本内容

HTML内容：不仅包含元素的文本内容，而且还包含元素的子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div>
        	<p>sunck is a good man!</p>
        </div>
	</body>
</html>

div元素的文本内容为：sunck is a good man!

div元素的HTML内容为：<p>sunck is a good man!</p>

二、文本内容操作

  • text()

    作用：用于获取全部匹配元素的文本内容

    注意：也可以解析XML文档元素的文本内容

  • text(val)

    作用：用于设置全部匹配元素的文本内容，元素原来的内容将被新设置的内容替换掉，包括HTML内容

    注意：设置文本内容时，即使内容包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div>
        	<p>sunck is a good man!</p>
        </div>
        <div>
        	<p>sunck is a nice man!</p>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // 获取文本内容
                console.log($("div").text());
                console.log(typeof $("div").text());

                // 设置文本内容
                $("div").text("<span>sunck is a cool man!</span>");
            });
        </script>
	</body>
</html>

三、HTML内容操作

  • html()

    作用：用于获取第一个匹配元素的HTML内容

  • html(val)

    作用：用于设置全部匹配元素的HTML内容

    注意：内容中包含HTML代码可以被浏览器解析

  • 注意

    html()和html(val)不能用于XML文档，但是可以用于XHTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div>
        	<p>sunck is a good man!</p>
        </div>
        <div>
        	<p>sunck is a nice man!</p>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // 获取文本内容
                console.log($("div").html());
                console.log(typeof $("div").html());

                // 设置文本内容
                $("div").html("<span>sunck is a cool man!</span>");
            });
        </script>
	</body>
</html>

四、属性操作

  • prop(attrName)

    作用：对html标签本身的属性进行获取值

  • prop(attrName, value)

    作用：对html标签本身的属性赋值

  • attr(attrName)

    作用：对html标签以外的属性（自定义DOM属性）进行获取值

  • attr(attrName, value)

    作用：对html标签以外的属性（自定义DOM属性）赋值

  • removeAttr(attrName)

    作用：删除属性

  • 区别

    • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
    • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法

  • 注意

    像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form action="" method="">
            <input type="text" id="inp" name="sunck" age=18>
            <input id="chk1" type="checkbox" />是否可见
            <input id="chk2" type="checkbox" checked="checked" />是否可见
        </form>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // console.log($("#inp").prop("name"));//sunck
                // console.log($("#inp").prop("age"));//undefined
                // $("#inp").prop("class", "myClass");//设置成功
                // $("#inp").prop("sex", 1);//设置失败

                // console.log($("#inp").attr("age"));//18
                // console.log($("#inp").attr("name"));//sunck
                // $("#inp").attr("class", "myClass");//设置成功
                // $("#inp").attr("sex", 1);//设置成功

                console.log($("#chk1").prop("checked"));
                console.log($("#chk2").prop("checked"));
                console.log($("#chk1").attr("checked"));//underfined
                console.log($("#chk2").attr("checked"));
              
                // $("#inp").removeAttr("name");
            });
        </script>
	</body>
</html>

五、值操作

  • val()

    作用：用于获取第一个匹配元素的当前值，返回值可能是一个字符串，也可能是一个数组

  • val(value)

    作用：用于设置所有匹配元素的值

  • val(valueArr)

    作用：用于为check、select和radio等元素设置值，参数为字符串数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form action="#" method="get">
            <input type="text" value="123">
            <input type="text" value="456">
            
            <select name="like" size="3" multiple="multiple" id="like">
                <option>列表项1</option>
                <option selected="selected">列表项2</option>
                <option selected="selected">列表项3</option>
            </select>
        </form>
        
        <script type="text/javascript">
            $(document).ready(function(){
                console.log($("input").val());
                $("input").val("789");
                $("#like").val(['列表项1','列表项2']);
            });
        </script>
	</body>
</html>

六、修改CSS类实现样式修改

  • addClass(className)

    作用：为所有匹配的元素添加指定的CSS类名

  • removeClass(className)

    作用：从所有匹配的元素中删除全部或者指定的CSS类

  • toggleClass(className)

    作用：如果存在就删除一个CSS类，如果不存在就添加一个CSS类

  • toggleClass(className, switch)

    作用：如果switch参数为true则加上对应的CSS类，否则就删除

  • hasClass(className)

    作用：检查元素含有指定的class

  • 注意

    使用addClass()方法添加CSS类时，并不会删除现有的CSS类。同时，在使用以上方法时，其className参数都可以设置多个类名，类名与类名之间用空格分开

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            .box{
                width: 100px;height: 100px;background-color: red;
            }
            .change1{
                background-color: yellow;
            }
            .change2{
                height: 200px;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div class="box" id="box1"></div>
        <hr />
        <div class="box" id="box2"></div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("div").addClass("change1");
                $("div").removeClass("change1");

                $("#box1").addClass("change1 change2");
                $("#box2").toggleClass("change1");
                $("#box2").toggleClass("change1");
              
                console.log($("#box1").hasClass("change1"));
            });
        </script>
	</body>
</html>

七、修改CSS属性实现样式修改

  • css(name)

    作用：返回第一个匹配元素的样式属性值

  • css(name, value)

    作用：为所有匹配元素的指定样式设置值

  • css(properties)

    作用：以{属性:值, 属性:值, ……}的形式为所有匹配的元素设置样式属性

  • 注意

    如果属性名带有横线-，可以使用CSS表示法(background-color)，也可以使用DOM表示法(backgroundColor)

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            .box{
                width: 100px;height: 100px;
            }
            #box1{
                background-color: yellow;
            }
            #box2{
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div class="box" id="box1">1</div>
        <hr />
        <div class="box" id="box2">2</div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                console.log($("div").css("background-color"));
                console.log($("div").css("backgroundColor"));

                $("div").css("background-color", "blue");
                $("div").css({"background-color":"pink", "font-size": "30px"});
            });
        </script>
	</body>
</html>

八、创建节点

  • 创建元素节点

    $(htmlStr)：根据传入的HTML标记字符串，创建一个DOM对象，并且将这个DOM对象包装成一个jQuery对象后返回

  • 创建文本节点

    在创建元素节点是直接把文本内容写出来，然后使用append()等方法将他们添加到文档中

  • 创建属性节点

    与创建文本节点类似，也是直接在创建元素节点是一起创建

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            .box{
                width: 100px;height: 100px;
            }
            #box1{
                background-color: yellow;
            }
            #box2{
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div class="box" id="box1"></div>
        <hr />
        <div class="box" id="box2"></div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                var $jqP1 = $("<p></p>");
                $("div").append($jqP1);

                var $jqP2 = $("<p>sunck</p>");
                $("div").append($jqP2);

                var $jqP3 = $("<p title='good'>sunck</p>");
                $("div").append($jqP3);
            });
        </script>
	</body>
</html>

九、元素内部插入节点

说明：向一个元素中添加子元素和内容

  • append(content)

    作用：为所有匹配的元素的内部追加内容

  • apendTo(content)

    作用：将所有匹配元素添加到另一个元素的元素集合中

  • prepend(content)

    作用：为所有匹配的元素的内部插入前置内容

  • prependTo(content)

    作用：将所有匹配元素前置到另一个元素的元素集合中

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            .box{
                width: 200px;height: 100px;
            }
            #box1{
                background-color: yellow;
            }
            #box2{
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div class="box" id="box1"></div>
        <hr />
        <div class="box" id="box2"></div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                var $p_1 = $("<p>sunck is a good man</p>"); 
                var $p_2 = $("<p>sunck is a nice man</p>");

                // $div = $("div");
                // $div.append($p_1);
                // $p_2.appendTo($div);

                $div = $("div");
                $div.prepend($p_1);
                $p_2.prependTo($div);
            });
        </script>
	</body>
</html>

十、元素外部插入节点

说明：将要添加的内容添加到元素之前或元素之后

  • after(content)

    作用：在每个匹配的元素之后插入内容

  • insertAfter(content)

    作用：将所有匹配的元素插入到另一个指定元素的元素集合的后面

  • before(content)

    作用：在每个匹配的元素之前插入内容

  • insertBefore(content)

    作用：把所有匹配的元素插入到另一个指定元素的元素集合的前面

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            .box{
                width: 200px;height: 100px;
            }
            #box1{
                background-color: yellow;
            }
            #box2{
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div class="box" id="box1"></div>
        <hr />
        <div class="box" id="box2"></div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                var $p_1 = $("<p>sunck is a good man</p>"); 
                var $p_2 = $("<p>sunck is a nice man</p>");

                $div = $("div");
                $div.after($p_1);
                $p_2.insertAfter($div);

                var $p_3 = $("<p>sunck is a very good man</p>");
                var $p_4 = $("<p>sunck is a very nice man</p>");
                $div = $("div");
                $div.before($p_3);
                $p_4.insertBefore($div);
            });
        </script>
	</body>
</html>

十一、删除节点

  • remove()

    作用：用于从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素

    注意：remove()方法删除某个几点之后，该节点所包含的所有后代节点将同时被删除。该方法的返回值是一个指向已被删除的节点的引用，以后也可以继续使用这些元素

  • detach()

    作用：和remove()方法一样，也是删除DOM中匹配的元素，但是这个方法不会把匹配的元素从jQuery对象中删除，因此，在将来仍然可以使用这些匹配的元素。与remove()不同的是，所有绑定的事件或附加的数据都会保留下来

  • empty()

    作用：该方法并不是删除节点，而是将节点清空，该方法可以清空元素中所有的后代节点

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div>
        	<p>sunck is a good man!</p>
        	<p>sunck is a nice man!</p>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                //给p绑定事件
                $("div p").click(function(){
                  alert($(this).text());
                })

                // var $p2 = $("div p:eq(1)").remove();
                // console.log($p2);
                // $("div").append($p2);

                // var $p3 = $("div p:eq(1)").detach();
                // console.log($p3);
                // $("div").append($p3);

                // $("div p:eq(1)").empty();
            });
        </script>
	</body>
</html>

十二、复制节点

  • clone(flag)

    当参数为true时，表示克隆匹配的元素以及其所有的事件处理程序并选中这些克隆的副本，当参数为false时，表示不复制元素的事件处理程序，不传参数默认为false

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div>
        	<p id="te"><span>sunck is a good man!</span></p>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                //给p绑定事件
                $("div p:eq(0)").click(function(){
                  alert($(this).text());
                })

                $("div p:eq(0)").clone().insertAfter($("div p:eq(0)"));
                $("div p:eq(0)").clone(true).insertAfter($("div p:eq(0)"));
            });
        </script>
	</body>
</html>

十三、替换节点

  • replaceAll(selector)

    作用：用于使匹配的元素替换掉所有selector匹配到的元素

  • replaceWith(content)

    作用：用于将所有匹配的元素替换成指定的HTML或DOM元素

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <span>div1:</span>
        <div id="div1">1</div>
        <span>div2:</span>
        <div id="div2">2</div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#div1").replaceWith("<div>replaceWith()方法的替换结果1</div>");
                // $("#div1").replaceWith($("<div>replaceWith()方法的替换结果2</div>"));
                $("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2");
            });
        </script>
	</body>
</html>

十四、包裹操作

  • 包裹节点

    wrap(element)

  • 去除包裹

    unwrap()

  • 整体包裹

    wrapAll(element)

  • 包裹内部

    wrapInner(element)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div>
            <span>sunck is a good man</span>
            <span>sunck is a nice man</span>
            <span>sunck is a handsome man</span>
            <span>sunck is a elegant man</span>
        </div>
        
        <button>包裹节点</button>
        <button>去除包裹</button>
        <button>整体包裹</button>
        <button>包裹内部</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("button:eq(0)").click(function(){
                    // 把匹配到每一个span标签用p标签包裹起来
                    // $("span").wrap($("<p></p>"));
                    // 会自动将DOM封装为jQuery包装集
                    $("span").wrap("<p></p>");
                });

                $("button:eq(1)").click(function(){
                    // 把匹配到每一个span标签的父节点去除掉
                    $("span").unwrap();
                });

                $("button:eq(2)").click(function(){
                    // $("span").wrapAll($("<p></p>"));
                    $("span").wrapAll("<p></p>");
                });

                $("button:eq(3)").click(function(){
                    // $("span").wrapInner($("<b></b>"));
                    $("span").wrapInner("<b></b>");
                });
            });
        </script>
	</body>
</html>

十五、遍历节点

  • each(callback)

    作用：callback是一个函数，该函数可以接收一个形参index，这个形参是遍历元素的序号

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <img height=60 src="img/01.jpg" width=80 />
        <img height=60 src="img/02.jpg" width=80 />
        <img height=60 src="img/03.jpg" width=80 />
        <img height=60 src="img/04.jpg" width=80 />
        <img height=60 src="img/05.jpg" width=80 />
        
        <script type="text/javascript">
            $(document).ready(function(){
                var $imgs = $("img");
                // console.log($imgs);

                // for (var i = 0; i < $imgs.length; i++){
                //     // console.log($imgs[i]);
                //     // console.log($imgs.eq(i));
                //     $imgs.eq(i).attr("title", "第"+(i+1)+"张图片");
                // }

                $imgs.each(function(i){
                    // console.log($imgs[i]);
                    // console.log($imgs.eq(i));
                    // $imgs.eq(i).attr("title", "第"+(i+1)+"张图片");
                    $(this).attr("title", "第"+(i+1)+"张图片");
                })
            });
        </script>
	</body>
</html>
需要 登录 才可以提问哦
头像
：
回复