JQuery DOM

来源：互联网发布：pptv网络电视在线直播编辑：程序博客网时间：2024/05/16 19:45

一、文本操作

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