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>
    <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. js学习--DOM操作详解大全 前奏(认识DOM)

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

  5. js学习--DOM操作详解大全二(window对象)

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

  6. 触碰jQuery:AJAX异步详解

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

  7. jQuery调用AJAX异步详解[转]

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

  8. 触碰jQuery:AJAX异步详解(转)

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

  9. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

随机推荐

  1. eclipse逐步调试

    Eclipse 的单步调试 1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上.2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面 ...

  2. C#开发中常用方法3------Cookie的存取

    ---------------------------------------------------------------------------------------------------- ...

  3. ADO.NET数据访问模板整理

    /// <summary> /// 数据访问类:hi_test /// </summary> public partial class TestDA { public Test ...

  4. 从C#到Objective-C,循序渐进学习苹果开发(4)--代码块(block)和错误异常处理的理解

    本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台苹果开发的一系列感想和体验历程,本系列文章是在起步阶段逐步积累的,希望带给大家更好,更真实的转换历程体验.本文继续上一篇随笔<从 ...

  5. composer更新不成功,启用国内镜像网站的配置更改办法

    通过 composer config -l -g 命令可以列出 composer 的全局配置信息 [home] 配置项就是 composer 的主目录 修改config.json { "co ...

  6. QT学习之路--深入了解信号槽

    槽函数可以和一个信号相连接,当这个信号发生时,它可以被自动调用.connect()语句的原型类似于:connect(sender, SIGNAL(signal), receiver, SLOT(slo ...

  7. JavaScript实现级联下拉框

    <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...

  8. javascript 快速排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery去掉或者替换字符,设置指定options为selected状态

    <html> <body> <div><select id="queryYear">                 <opt ...

  10. OC中的属性、方法及内存管理

    普通方法:关注(代表)对象可以”干什么”,过程中需要实例变量.-(void)show;输出 … 访问属性    属性:属性专门处理实例变量.(程序执行过程当中)    初始化方法:一创建对象(第一时间 ...