【知了堂学习笔记】_Jquery基础知识之DOM操作（二）

来源：互联网发布：毕向东java全套视频编辑：程序博客网时间：2024/06/07 00:55

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.对DOM操作

节点操作
- 查找节点
  - 通过选择器
  - 通过属性选择器
  - 通过parent（[expr]）函数方法查找父级元素节点
  - 通过parents([expr])函数方法来查找祖先元素
    示例：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn01">parents([expr])</button>        </p>        <div><p><span>Hello World</span></p></div>    </body></html><script>    $(function(){        $("#btn01").click(function(){            //通过parents函数来找祖先元素，返回元素的集合//          console.log($("span").parents()[1  ]); //          通过each()函数遍历他的祖先元素            $("span").parents().each(function(){                //如何将js对象专长jQuery对象                //js对象 不能用JQuery中的函数和方法                //只有把js对象转成jQuery对象才能使用jQuery中的函数和方法                console.log($(this).html());            })        });    })</script>

插入内容
- append():在元素的内部添加内容
- prepend()：在元素的内部追加内容
- after():在元素的后面追加内容
- before():在元素的前面追加内容

示例：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script></script>        <script src="../../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn04">prepend()</button>            <button id="btn05">after()</button>            <button id="btn06">before()</button>        </p>        <div><p><span>hello world</span></p></div>        <div id="d01"></div>        <p><button class="btn01">button</button></p>    </body></html><script>    $(function(){        $("#btn04").click(function(){            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容            $("#d01").prepend("<p>hello prepend</p>");        });        $("#btn05").click(function(){            //在元素后面节点添加内容            $("#d01").after("hello after");        });        $("#btn06").click(function(){            //在元素前面添加内容            $("#d01").before("<p>hello before</p>");        });    })</script>

删除节点
- remove（[expr]）：把元素本身一起删除掉
- empty():清空元素内部的节点，但是元素本身不会删除掉

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script></script>        <script src="../../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn04">prepend()</button>            <button id="btn05">after()</button>            <button id="btn06">before()</button>            <button id="btn07">empty()</button>            <button id="btn08">remov()</button>            <button id="btn09">clone()</button>        </p>        <div><p><span>hello world</span></p></div>        <div id="d01"></div>        <p><button class="btn01">button</button></p>    </body></html><script>    $(function(){        $("#btn04").click(function(){            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容            $("#d01").prepend("<p>hello prepend</p>");        });        $("#btn05").click(function(){            //在元素后面节点添加内容            $("#d01").after("hello after");        });        $("#btn06").click(function(){            //在元素前面添加内容            $("#d01").before("<p>hello before</p>");        });        $("#btn07").click(function(){            //删除            $("#d01").empty();        });        $("#btn08").click(function(){            //移除            $("div").remove("#d01");        });        $("#btn09").click(function(){            //复制            $(".btn01").clone(true).appendTo("body");        });    })</script>

赋值元素节点
- 调用clone（attr）

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script></script>        <script src="../../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn04">prepend()</button>            <button id="btn05">after()</button>            <button id="btn06">before()</button>            <button id="btn07">empty()</button>            <button id="btn08">remov()</button>            <button id="btn09">clone()</button>        </p>        <div><p><span>hello world</span></p></div>        <div id="d01"></div>        <p><button class="btn01">button</button></p>    </body></html><script>    $(function(){        $("#btn04").click(function(){            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容            $("#d01").prepend("<p>hello prepend</p>");        });        $("#btn05").click(function(){            //在元素后面节点添加内容            $("#d01").after("hello after");        });        $("#btn06").click(function(){            //在元素前面添加内容            $("#d01").before("<p>hello before</p>");        });        $("#btn07").click(function(){            //删除            $("#d01").empty();        });        $("#btn08").click(function(){            //移除            $("div").remove("#d01");        });        $("#btn09").click(function(){            //复制            $(".btn01").clone(true).appendTo("body");        });        $(".btn01").click(function(){            //复制            window.alert("我是一个按钮");        });    })</script>

属性操作
- $(“div”).attr(“title”):获取元素属性节点值
- $(“div”).attr(“title”,”helloworld”)
- $(“div”).removeAttr(“title”):删除元素节点的属性

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn01">attr("title")</button>            <button id="btn02">attr("title","hello")</button>            <button id="btn03">removeAttr("title")</button>        </p>        <div></div>    </body></html><script>    $(function(){        $("#btn01").click(function(){            //获取节点属性的值            console.log($("div").attr("title"));        });        $("#btn02").click(function(){            //给节点属性复制 或者改变            $("div").attr("title","hello");        });        $("#btn03").click(function(){            $("div").removeAttr("title");        });    })</script>

样式操作
- css（name,value）:添加单个样式
- addClass(cssname):添加一个或多个样式，若果是多个样式请用空格隔开
- removeClass(cssname):移除样式

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <style type="text/css">        .div{            width: 100px;            height:100px;            border: 1px solid black;        }    </style>    <body>        <p>            <button id="btn1">css("background","#FFFFF")</button>            <button id="btn2">addclass</button>            <button id="btn3">removeclass</button>            <button id="btn4">还原样式</button>        </p>        <div></div>    </body></html><script>    $(function(){        $("#btn1").click(function(){            //添加单个样式            $("div").css("width","100px").css("border","1px solid red");        });        $("#btn2").click(function(){            // 添加一个样式            $("div").addClass("div");        });        $("#btn3").click(function(){            // 删除一个样式            $("div").removeClass("div");        });        $("#btn4").click(function(){            // 还原样式            $("div").removeAttr("style").removeAttr("class");        });    })</script>

阅读全文

0 0