前端笔记 —— JQuery（三）dom操作

最新推荐文章于 2024-07-13 13:49:40 发布

JohnnyLin00

最新推荐文章于 2024-07-13 13:49:40 发布

阅读量92

点赞数

分类专栏：前端学习文章标签： dom元素操作 jquery

本文链接：https://blog.csdn.net/weixin_44855907/article/details/115037445

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

操作 dom元素常见有操作 dom元素的属性、操作 dom元素节点

操作dom元素属性

样式操作

操作单个属性值

 $("选择器").css("该选择器对象的属性名","属性值");

操作多个属性值

 $("选择器").css({
 "该选择器对象的属性名1":"属性值1",
 "该选择器对象的属性名2":"属性值2",
 ……,
 "该选择器对象的属性名":"属性值",
 });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom元素操作</title>
</head>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function (){
            //操作dom元素的单个属性
            $("#myTitle").css("color","red");
            //操作 dom属性的多个属性
            $("#myTitle2").css({
                "color": "blue",
                "background-color":"gray",
                "font-size":"22px"
            });
        });

    </script>
<body>
        <p id="myTitle"> 这是一段文字</p>
        <p id="myTitle2"> 这是一段文字,且使用JQuery操作文本对象的多个属性……</p>
</body>
</html>

注意样式是写在标签下的

    <style type="text/css">
        .mystyle3{
            color: aqua;
        }
        .mystyle4{
            font-size: 25px;
            background-color: yellow;
        }
    </style>

class操作

添加单个样式

 $("选择器").addClass("样式名称")

添加多个样式

 $("选择器").addClass("样式1名称 样式1名称2")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom元素操作</title>
</head>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <style type="text/css">
        .mystyle3{
            color: aqua;
        }
        .mystyle4{
            font-size: 25px;
            background-color: yellow;
        }
    </style>
    <script>
        $(document).ready(function (){
            $("#myTitle3").addClass("mystyle3");
            $("#myTitle4").addClass("mystyle3 mystyle4");



        });

    </script>
<body>
        <p id ="myTitle3"> 添加单个class</p>
        <p id ="myTitle4"> 添加多个class</p>
</body>
</html>

移除样式同理
移除单个样式

 $("选择器").removeClass("样式名称")

移除多个样式

 $("选择器").removeClass("样式1名称 样式1名称2")

移除全部样式

 $("选择器").removeClass()

内容操作

$("选择器").html()  // 获得该选择器的对应标签的所有内容，包括该标签下的所有标签
$("选择器").html("xxxx")  //将该选择器对象标签的内容替换为xxxx，先渲染后显示

$("选择器").text()  		// 获得该选择器的对应标签的文本内容，不包括html标签，而是文本内容
$("选择器").text("xxxx")  //将该选择器对象标签的内容替换为xxxx，原样显示，不渲染

属性值操作

$("选择器").val()  		// 获取该标签value属性的值
$("选择器").val("xxxx")  //设置该标签value属性的值

对于属性值操作更加通用的是使用 attr()

$("选择器").attr("属性名")  		// 获取该标签属性 为 “属性名” 的值
$("选择器").attr("属性名","属性值")  //设置该标签属性 为 “属性名”的值

//批量设置
$("选择器").attr({ 
	"属性名1":"属性值1",
	"属性名2":"属性值2",
	"属性名3":"属性值3"
})  
$("选择器").removeAttr("属性名")  		// 删除属性

节点操作

节点操作：
1、查询节点，就是使用JQuery选择器,$(“选择器”)。
2、创建节点，使用 $(html字符串);
3、插入节点。
4、替换节点
上面两种操作在前面都已经见过了，这里就不赘述了。

插入节点

内部插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom元素操作</title>
</head>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#myBtn").click(function(){
                var $myElement = $("<li>11111</li>"); //创建<li>标签
                //$("#myUl").append($myElement); //追加到<ul>内部的尾部
                $myElement.appendTo( $("#myUl") );//与上面效果等价
				
				 var $myElement2 = $("<li>0000</li>");
                //$("#myUl").prepend( $myElement2 );//添加到<ul>内部的头部
                $myElement2.prependTo( $("#myUl") );//与上面效果等价
            });
        });

    </script>
<body>

        <ul id = "myUl">
            <li>aaaa</li>
            <li>bbbb</li>
            <li>cccc</li>
            <li>dddd</li>
        </ul>
        <button id="myBtn" type="button">追加</button>

</body>
</html>

外部插入

外部插入与内部插入写法类似

写法	含义
$(A).after(B)	将B插入到A之后
B.insertAfter( $(A) )	同上
$(A).before(B)	将B插入到A之前
B.insertBefore( $(A) )	同上

替换节点

写法	含义	用例
$A.repalceWith( $B)	用 $B 替换$ A	$(“ul>li:eq(1)”).replaceWith(“ xxx ”)
$A.repalce( $B)	用 $A 替换$ B	$(“ xxx ”).replaceWith( “ul>li:eq(1)”)

删除节点

写法	含义
remove()	彻底删除
detach()	将节点删除但关联的事件、数据不会被删除
empty()	将节点内容清空

节点集合获取与遍历

用例	含义
$(“ul”).children(“li”)	获得ul的所有子节点是li的节点
$(“ul”).find(“li”)	获得ul的所有后代节点是li的节点
$(“ul>li:eq(1)”).next()	获得ul的的第二个li子节点的后继节点
$(“ul>li:eq(1)”).pre()	获得ul的的第二个li子节点的前驱节点
$(“ul>li:eq(1)”).siblings()	获得ul的的第二个li子节点的所有兄弟节点
$(“ul>li:eq(1)”).parent()	获得ul的的第二个li子节点的父节点
$(“ul>li:eq(1)”).parents()	获得ul的的第二个li子节点的祖先节点

过滤选择器
1、上面绝大多数方法的括号就是一个过滤选择器

遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom元素操作</title>
</head>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function (){
          
            $("ul>li").each(function(index, element){
                //index,element 这两个参数可选，index表示当前元素在集合的下标
                //element 表示当前元素（dom对象） 与this等同
                alert(index+"" + $(element).html() + " "+$(this).html());
            });



        });

    </script>
<body>
        <ul id = "myUl">
            <li>aaaa</li>
            <li>bbbb</li>
            <li>cccc</li>
            <li>dddd</li>
        </ul>
        <button id="myBtn" type="button">追加</button>

</body>
</html>