jQuery的DOM操作详解

时间：2022-09-21 21:51:54

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>

jQuery的DOM操作详解的更多相关文章

  1. Jqurey DOM 操作详解

    一.获取 1.获取内容----.text()  .html()   .value() text() - 设置或返回所选元素的文本内容                         格式:$(选择器) ...

  2. js学习--DOM操作详解大全一（浏览器对象）

    一.客户端中的window对象 window对象表示当前浏览器的窗口,它是一个*对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. w ...

  3. JavaScript基础：DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

  4. javascript dom 操作详解 js加强

    js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...

  5. js学习--DOM操作详解大全 前奏（认识DOM）

    一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...

  6. js学习--DOM操作详解大全二（window对象）

    一.window - 计时器 1､setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...

  7. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  8. jQuery调用AJAX异步详解&lbrack;转&rsqb;

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. 触碰jQuery：AJAX异步详解（转）

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

随机推荐

  1. 关于http协议的理解

    一.状态码 1.200:请求成功. 2.302:浏览器进行重定向. 3.304:资源已使用,即有缓存. 4.404:请求失败,请求的资源未在服务器上发现. 5.500:服务器端发生错误. 二.php获 ...

  2. 【python cookbook】【数据结构与算法】9&period;在两个字典中寻找相同点

    问题:寻找两个字典中间相同的地方(相同的键.相同的值等) 解决方案:通过keys()或者items()方法来执行常见的集合操作(比如求并集.交集和差集)

  3. 微信支付WxpayAPI&lowbar;php&lowbar;v3 错误修改

    微信sdk:WxpayAPI_php_v3 这是下载压缩包的目录结构. https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 ce ...

  4. Drool实战系列&lpar;二&rpar;之eclipse安装drools插件

    这里演示是drools7.5.0,大家可以根据自己需要安装不同的drools版本 drools安装地址: http://download.jboss.org/drools/release/ 一. 二. ...

  5. Java 中的&OpenCurlyDoubleQuote;implements Runnable” 和&OpenCurlyDoubleQuote;extends Thread”

    知识点 “implements Runnable” 和“extends Thread”的不同 具体分析 最近在学习Android中的Handler消息传递机制时,创建新线程有两种方式:一种是实现Run ...

  6. Unity3D深入浅出 -组件与节点之间的调用关系

    一.transform组件用途 1.维护场景树 2.对3D物体的平移,缩放,旋转 二.场景树定义 在Hierarchy视图中显示的: 一个game_scene场景,下面有Main Camera节点,D ...

  7. 逆向project第005篇：跨越CM4验证机制的鸿沟（下）

    一.前言 本文是逆向分析CM4系列的最后一篇,我会将该游戏的序列号验证机制分析完成,进而编写出注冊码生成器. 二.分析第二个验证循环 延续上一篇文章的内容,来到例如以下代码处: 图1 上述代码并没有特 ...

  8. JAVA虚拟机&lpar;JVM&rpar;以及跨平台原理&lpar;JDK、JRE、JVM&rpar;

    相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的. 那么,跨平台是怎样实现的呢?这就 ...

  9. mysql &colon; mysql 5&period;6&period;13 免安装版配置

    前言:真正用到mysql是在公司的第二个项目下,具体的一些在之前的博客文章(http://www.cnblogs.com/zhengzeze/p/5623440.html)中也提到了,其中涉及到,免安 ...

  10. JavaScript编程艺术-第10章-10&period;2-实用的动画

    10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=&quot ...

相关文章