jQuery的DOM操作详解

2021-07-29 08:19:42

DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件
DOM操作的分类
　　核心-DOM: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
　　HTML-DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性，例如：divElement.innerHTML=“哈哈”
　　CSS-DOM：针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性，例如imgElement.style.visibiliby=“hidden”
jQuery提供DOM操作的API
　　each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

<script type="text/javascript">

    //用JS语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式一）

    var nameArray = new Array("哈哈", "呵呵", "嘻嘻");

    for ( var i = 0; i < nameArray.length; i++) {

        document.write(nameArray[i] + "<br/>");

    }

    //用JSON语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式二）

    var nameArray = [ "哈哈", "呵呵", "嘻嘻", "都都" ];//js对象

    var $nameArray = $(nameArray);//jquery对象

    $nameArray.each(function() {

        //this表示数组中每一个元素，this属性js对象，this代表string类型

        alert(this);

    });

    //用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代

    var nameArray = [ {

                        name : "哈哈",

                        sal : 6000

                    }, {

                        name : "嘿嘿",

                        sal : 7000

                    }, {

                        name : "笨笨",

                        sal : 8000

                    } ];

    var $nameArray = $(nameArray);

    $nameArray.each(function() {

        //this代表object类型

        alert(this.name + ":" + this.sal);

    });

</script>

　　append(content) :向每个匹配的元素的内部的结尾处追加内容
　　prepend(content):向每个匹配的元素的内部的开始处插入内容（父子关系）
　　after(content) ：在每个匹配的元素之后插入内容，例如A.after(B)，即B在后
　　before(content)：在每个匹配的元素之前插入内容，例如A.before(B)，即B在前（兄弟关系）

<body>

    <ul>

        <li>第一项</li>

        <li>第二项</li>

        <li>第三项</li>

    </ul>

    <div>这是子元素，要插入到父元素内</div>

    <script type="text/javascript">

        //DIV标签插入到(<li>第三项</li>)标签之后

        $("ul").append($("div"));

        //DIV标签插入到(<li>第一项</li>)标签之前

        $("ul").prepend($("div"));

        //DIV标签插入到UL标签之后

        $("ul").after($("div"));

        //DIV标签插入到UL标签之前

        $("ul").before($("div"));

    </script>

</body>

　　attr(name)：获取属性值
　　attr(name,value)：给符合条件的标签添加key-value属性对

<body>

    <form>

        <table>

            <tr>

                <td><input type="text" name="username" value="张三" /></td>

                <td><input type="password" name="password" value="123456" /></td>

            </tr>

        </table>

    </form>

    <script type="text/javascript">

        //取得form里第一个input元素的type属性

        alert($("form input:first").attr("type"));

        //设置form里最后个input元素的为只读文本框

        //$(":password").attr("readonly","readonly")也可以

        $("form input:last").attr("readonly", "readonly")

    </script>

</body>

　　$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
　　remove()：删除自已及其后代节点

<body>

    <ul id="a">

        <li>第一项</li>

        <li id="secondID">第二项</li>

        <li>第三项</li>

    </ul>

    <script type="text/javascript">

        //创建div元素，添加"哈哈"文本，ID属性，并添加到文档中,即<body><div id="2015">哈哈</div></body>

        //js方式

        var divElement = document.createElement("div");

        divElement.innerHTML = "哈哈哈";

        divElement.setAttribute("id", "2015");

        divElement.id = "2015";

        document.body.appendChild(divElement);

        //jquery方式

        var $div = $("<div id='2015'>哈哈哈哈哈</div>");

        //$(document.body).append( $div );

        $("body").append($div);

        //删除ID为secondID的LI元素

        $("#secondID").remove();

        //删除所有LI元素

        $("#a li").remove();

        //删除UL元素及其子元素

        $("#a").remove();

    </script>

</body>

　　val()：获取value属性的值
　　val("")：设置value属性值，""为空串，相当于清空
　　text()：获取HTML或XML标签之间的值
　　text("")：设置HTML或XML标签之间的值为""空串

<body>

    <select id="city">

        <option value="帝都">北京</option>

    </select>

    <script type="text/javascript">

        //取得<option value="帝都">北京</option>中的内容

        alert( $("#city").text() );//北京

        alert( $("#city option").text() );//北京

        alert( $("#city").html() );//<option value="帝都">北京</option>

        alert( $("#city option").val() );//帝都

        //修改text和value

        $("#city option").text("上海");

        $("#city option").val("魔都");

        alert( $("#city option").text() );//上海

        alert( $("#city option").val() );//魔都

    </script>

</body>

　　clone()：只复制样式，不复制行为
　　clone(true)：既复制样式，又复制行为
　　replaceWith()：替代原来的节点
　　removeAttr()：删除已存在的属性

<body>

    <input type="button" value="原按钮" />

    <div style="width:500px;height:23px" align="right">双击会被替换成文本框,单击改变位置</div>

    <script type="text/javascript">

        //为原input元素动态添加单击事件，且复制原input元素，

        var $old = $(":button");

        $old.click(function() {

            $("body").append($("<div id='2015'>哈哈哈哈哈</div>"));

        });

        //复制原input元素，添加到原input元素后，与其同级

        var $old = $(":button");

        var $new = $(":button").clone();//无点击事件

        $new.val("新按钮1");

        $old.after($new);

        //添加到原input元素后，与其同级，且和原按钮有一样的行为

        var $new = $old.clone(true);//有点击事件

        $new.val("新按钮2");

        $old.after($new);

        //双击<div>中的文本，用文本框替换文本

        $("div").dblclick(

            function() {

                var $text = $("<input type='text' style='width:165px;height:23px'/>");

                //文本框替代div标签

                $(this).replaceWith($text);

            });

        //单击改变<div>中的文本

        $("div").click(

            function() {

                $(this).removeAttr("align");

            });

    </script>

</body>

　　addClass()：增加已存在的样式
　　removeClass()：删除已存在的样式
　　hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
　　toggleClass()：如果标签有样式就删除，否则增加样式

<style type="text/css">

　　.myClass {

    　　font-size: 30px;

    　　color: red

　　}

</style>

<body>

    <div>无样式</div>

    <div class="myClass">有样式</div>

    <script type="text/javascript">

        //为无样式的DIV添加样式

        $("div:first").addClass("myClass");

        //为有样式的DIV删除样式

        $("div:last").removeClass("myClass");

        //切换样式，即有样式的变成无样式，无样式的变成有样式

        $("div").toggleClass("myClass");

        //最后一个DIV是否有样式

        var flag = $("div:last").hasClass("myClass");

        alert(flag ? "有样式" : "无样式");

    </script>

</body>

　　offset()：获取对象的left和top坐标
　　offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
　　width()：获取对象的宽
　　width(300)：设置对象的宽
　　height()：获取对象的高
　　height(500)：设置对象的高

<body>

    <img src="../images/zgl.jpg" />

    <script type="text/javascript">

        //获取图片的坐标

        var offset = $("img").offset();

        var x = offset.left;

        var y = offset.top;

        alert(x+":"+y);

        //设置图片的坐标

        $("img").offset({

            top:100,

            left:200

        });

        //获取图片的宽高

        var w = $("img").width();

        var h = $("img").height();

        alert(w+":"+h);

        //设置图片的宽高

        $("img").width(500);

        $("img").height(600);

    </script>

</body>

　　children()：只查询子节点，不含后代节点（多个）
　　next()：下一个兄弟节点（一个）
　　prev()：上一个兄弟节点（一个）
　　siblings()：上下兄弟节点（多个）

<body>

    <span>Span</span>

    <p>p1</p>

    <p>Hello</p>

    <div>

        <span> Hello Again <b> Bold </b> </span>

    </div>

    <p>And Again</p>

    <span>And Span</span>

    <script type="text/javascript">

        //取得div元素的直接子元素内容，不含后代元素

        alert($("div").children().size());//1

        //取得div元素的下一个同级的兄弟元素内容

        var $p = $("div").next();

        alert($p.text());//And Again

        //取得div元素的上一个同级的兄弟元素内容

        alert($("div").prev().size());//1

        //依次取得div元素的上下一个同级的所有兄弟元素的内容

        var $all = $("div").siblings("p");

        $all.each(function() {

            alert($(this).html());//p1 Hello And Again

        });

    </script>

</body>

　　show()：显示对象
　　hide()：隐藏对象
　　fadeIn()：淡入显示对象
　　fadeOut()：淡出隐藏对象

<body>

    <p>

        <img src="../images/zgl.jpg" />

    </p>

    <script type="text/javascript">

        //图片隐蔽

        $("img").hide(5000);

        $("img").show(5000);

        //淡出隐蔽图片

        $("img").fadeOut(3000);

        //淡入显示图片

        $("img").fadeIn(3000);

    </script>

</body>

　　slideUp()：向上滑动
　　slideDown()：向下滑动
　　slideToggle()：上下切换滑动，速度快点

<body>

    <div id="div1">

        111111<br /> 111111<br /> 111111<br />

    </div>

    <input id="but1" type="button" value="上移动" />

    <input id="but2" type="button" value="下移动" />

    <input id="but3" type="button" value="上下移动" />

    <script type="text/javascript">

        //向上下滑动

        $("#but1").click(function() {

            //div标标上移动

            $("#div1").slideUp(100);

        });

        //向上下滑动

        $("#but2").click(function() {

            //div标标下移动

            $("#div1").slideDown(100);

        });

        //向上下滑动

        $("#but3").click(function() {

            //div标标上下移动

            $("#div1").slideToggle(100);

        });

    </script>

</body>

码农公寓

相关文章