JQuery DOM

最新推荐文章于 2022-12-05 18:11:26 发布

文洛

最新推荐文章于 2022-12-05 18:11:26 发布

阅读量1.7k

点赞数

分类专栏： JQuery 文章标签： jquery dom

本文链接：https://blog.csdn.net/a126789/article/details/77198376

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、文本操作

1、内容操作

（1）text():文本内容的操作

<body>
    <p id="p1">要捕获的内容</p>
</body>
<script>
	//JS内容
    /*var p1 = document.getElementById("p1");
    alert(p1.textContent);*/
    alert($("#p1").text());//JQuery内容
</script>

作用：获取或者设置文本内容（等价于DOM操作中的innerText属性）

<body>
    <p id="p1">要捕获的内容</p>
</body>
<script>
    //捕获内容
    var p1 = document.getElementById("p1");
    alert(p1.textContent);
    alert($("#p1").text());
    
    //更改内容
    var p1 = document.getElementById("p1");
     p1.innerText = "改变内容";
    alert($("#p1").text("改变内容"));
</script>

（2）html():获取或设置元素中的所有元素（其中包括html的标签）

<body>
    <p id="p1">要<span style="color: red">捕获</span>的内容</p>
</body>
<script>
//    alert($("#p1").text());
    alert($("#p1").html());
</script>

设置：

<body>
    <p id="p1">要<span style="color: red">捕获</span>的内容</p>
</body>
<script>
//    alert($("#p1").text());
    alert($("#p1").html("<div style='background-color: aqua'>我是新设置的div</div>"));
</script>

（3）val():获取或者设置表单中的值

<body>
<input type="text" id="text1" value="请输入文本内容"/>
</body>
<script>
    alert($("#text1").val());
    $("#text1").val("内容");
</script>

（4）attr():获取或者设置元素的属性值

<body>
<input type="text" id="text1" name="第一章" value="请输入文本内容"/>
</body>
<script>
    /*var txt1 = document.getElementById("text1");
    alert(txt1.getAttribute("name"));*/
    //alert($("#text1").attr("name"));
    $("#text1").attr("name","第二段");
</script>

2、元素添加

（1）append()：在元素的最后面添加内容

<body>
    <button id="btnApp">点击尾部添加元素</button>
    <div id="div1"></div>
</body>
<script>
    //在元素的最后面添加内容
    $("#btnApp").click(function(){
        $("#div1").append("<p>这是添加尾部的段落</p>");
    });
</script>

可以同时添加多个内容，这些内容可以是通过html、JQuery、DOM创建的

<body>
    <button id="btnApp">点击添加尾部元素</button>
    <div id="div1"></div>
</body>
<script>
    $("#btnApp").click(function(){
        var txt1 = "<p>姓名：</p>";//HTML创建
        var txt2 = $("<p></p>").text("电话：");//JQuery创建
        var txt3 = document.createElement("p");//DOM创建
        txt3.innerHTML = "住址：";
        $("#div1").append(txt1,txt2,txt3);
    });
</script>

（2）prepend()：在元素的最前面添加内容

<body>
    <button id="btnPre">点击头部添加元素</button>
    <div id="div1"></div>
</body>
<script> 
    //在元素的最前面添加内容
    $("#btnPre").click(function(){
        $("#div1").prepend("<p>这是添加头部的段落</p>");
    });
</script>

可以同时添加多个内容，这些内容可以是通过html、JQuery、DOM创建的

<body>
    <button id="btnPre">点击添加头部元素</button>
    <div id="div1"></div>
</body>
<script>        
    $("#btnPre").click(function(){
        var txt1 = "<p>个人信息：</p>";//HTML创建
        var txt2 = $("<p></p>").text("个人电话：");//JQuery创建
        var txt3 = document.createElement("p");//DOM创建
        txt3.innerHTML = "个人住址：";
        $("#div1").prepend(txt1,txt2,txt3);
    });
</script>

（3）after()和before()

两组添加的区别：append()和prepend()添加后成为了其子元素

After()和before()添加后成为了其兄弟元素

3、元素删除

remove()：删除的是被选元素及其子元素；

empty()：删除的是被选元素的子元素。

<style>
        #div1{
            width: 200px;
            height: 100px;
            background-color: aqua
        }
        #div2{
            width: 200px;
            height: 100px;
            background-color: aqua
        }
    </style>
</head>

<body>
    <button id="remDiv1">删除div1</button>
    <button id="remDiv2">删除div2</button>
    <div id="div1">
        <p>我是div1中的内容</p>
    </div>
    <div id="div2">
        <p>我是div2中的内容</p>
    </div>
</body>
<script>
    $("#remDiv1").click(function(){
        $("#div1").remove();
    });
    $("#remDiv2").click(function(){
        $("#div2").empty();
    });
</script>

remove()：还有过滤删除的作用，可以删除指定元素，里面的参数就是指定元素的名字。

<body>
    <button id="remDiv1">删除div1</button>
    <button id="remDiv2">删除div2</button>
    <div id="div1">
        <p>我是div1中的大儿子</p>
        <p class="p2">我是div1中的二儿子</p>
        <p>我是div1中的三儿子</p>
        <p class="p2">我是div1中的小儿子</p>
    </div>
</body>
<script>
    $("#remDiv1").click(function(){
        $("p").remove(".p2");
    });
</script>

这个代码的作用就是：删除所有p标签class中名为“p2”的元素。

4、操作css类

（1）addclass()：添加class类

//添加
$("#btnAdd1").click(function(){
    $("#p1").addClass("style1");
});
$("#btnAdd2").click(function(){
    $("#p1").addClass("style2");
});

（2）removeclass()：删除class

//删除
$("#btnAdd1").click(function(){
    $("#p1").removeClass("style1");
});

（3）toggleclass()：切换class

//切换
$("#btnAdd1").click(function(){
    $("#p1").toggleClass("style1");
});

5、操作css()方法

css()：里面要传两个参数：第一个参数是要设置的属性；第二个参数是设置的属性值

<style>
        .style1{
            color: red;
            font-size: 20px;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p id="p1" class="style1">修改样式测试</p>
<input type="button" id="btnAdd1" value="改变颜色">
</body>
<script>
    $("#btnAdd1").click(function(){
        $("#p1").css("color","aqua");
    });
</script>

css()：也可以设置多个属性，不同属性用逗号隔开，属性名:属性值，最外层用{……}。

$("#p1").css({"color":"aqua","font-size":"30px"});

二、JQuery导航

1、祖先

（1）parent()：找到的是当前元素的父元素

//找到父元素
$("#myself").parent().css("backgroundColor","aqua");

（2）parents()：找到的是当前元素的所有祖先元素，注意：如果在传入参数，就可以找到你所指定的那一个父元素

$(".myself").parents("[name = 'zhang']").css("backgroundColor","aqua");

（3）parentsUntil()：选中两个指定元素中的父元素

$(".myself").parentsUntil("[name = 'zhang']","[class = 'ancestor']").css("backgroundColor","aqua");

2、后代

（1）childdren():找到的是当前元素直接后代

//找到子元素
$("#myself").children().css("backgroundColor","yellow");

（2）传入参数，找到的是你指定的那一个子元素

$(".myself").children(".firstSon").css("backgroundColor","yellow");

（3）find():找到的是当前元素的所有后代，一直向下查找直到找到最后一个子元素

$(".myself").find("*").css("backgroundColor","yellow");

3、同胞

（1）next():找到的是当前元素的下一个兄弟元素

//找到下一个兄弟元素
$("#myself").next().css("backgroundColor","green");

（2）nextAll()：找到的是当前元素的所有弟弟元素

$(".myself").nextAll().css("backgroundColor","blue");

（3）nextUntil()：找到的是两个参数之间的同胞元素

$(".p6").nextUntil(".myself").css("backgroundColor","blue");

prev():找到的是上一个兄弟元素

//找到上一个兄弟元素
$("#myself").prev().css("backgroundColor","blue");

（4）prevAll()：找到的是当前元素的哥哥元素

$(".myself").prevAll().css("backgroundColor","blue");

（5）prevUntil()：找到的是两个指定元素之间的同胞元素

$(".p6").prevUntil(".myself").css("backgroundColor","blue");

（6）siblings()：找到当前元素的所有兄弟元素

$(".myself").siblings().css("backgroundColor","blue");

传入参数是选中其中一个兄弟元素

$(".myself").siblings(".div3").css("backgroundColor","blue");

文洛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery DOM

一、文本操作1、内容操作（1）text():文本内容的操作要捕获的内容 //JS内容 /*var p1 = document.getElementById("p1"); alert(p1.textContent);*/ alert($("#p1").text());//JQuery内容作用：获取或者设置文本内容（等价于DOM操作中
复制链接

扫一扫