3.1 DOM 操作分类

①DOM Core

包括（getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ）

//获取表单对象

docuement.getElementsByTagName("form");

//获取某元素的src属性

element.getAttribute("src");

②HTML DOM

专属HTML_DOM属性，提供一些更简明的记号来描述各种HTML元素属性（只能用来处理web文档）

//获取表单

document.forms   //HTML_DOM提供了一个forms对象

//获取元素的src属性

element.src

③CSS_DOM

CSS_DOM是针对CSS的操作，该技术主要作用是获取和设置 style 对象的各种属性

element.style.color = "red";

3.2jQuery中的DOM操作

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p title="选择你最喜欢的水果">你最喜欢的水果？</p>

    <ul>

        <li title="苹果">苹果</li>

        <li title="橘子">橘子</li>

        <li title="菠萝">菠萝</li>

    </ul>

</body>

</html>

3.2.1查找节点

1查找元素节点

var $li = $("ul li:eq(1)");   //获取ul中的第二个li节点

var li_txt = $li.text();      //获取第二个li元素节点的文本内容

alert(li_txt);                //打印文本内容

2查找属性节点

使用 attr() 方法来获取各种属性值

var $para = $("p")

var p_txt = $para.attr("title");

alert(p_txt);

3.2.2 创建节点

1创建元素节点

例如创建2个<li>元素节点，并将其添加到<ul>中

使用 jQuery 的工厂函数 $() 完成

$(  html )

//$(html) 方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery 对象后返回

①创建<li>

var $li_1 = $("<li></li>");

var $li_2 = $("<li></li>");

②添加到ul中

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

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

    //或者采用连写

    $("ul").append($li_1).append($li_2);

* 创建单标签元素时，要采用XHTML格式

$("br/");

2创建文本节点

var $li_1 = $("<li>香蕉</li>");

var $li_2 = $("<li>雪梨</li>");

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

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

3 创建属性节点

创建属性节点与文本节点类似，也是在元素节点创建时一起创建

var $li_1 = $("<li title='香蕉'>香蕉</li>");   //属性 title = ‘’  要用单引号

var $li_2 = $("<li title='雪梨'>雪梨</li>");

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

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

3.2.3 插入节点

方法

描述

示例

append()

向每个匹配的元素内部追加内容

将B追加到A

<p>我想说</p>

$(“p”).append(“<b>你好</b>”);

结果：<p>我想说</p><b>你好</b>

appendTo()

将A追加到B

<p>我想说</p>

$(“<b>你好</b>”).append(“p”);

结果：<p>我想说</p><b>你好</b>

prepend()

前置内容

<p>我想说</p>

$(“p”).prepend(“<b>你好</b>”);

结果：<b>你好</b><p>我想说</p>

prependTo()

将A前置到B

<p>我想说</p>

$(“<b>你好</b>”).prependTo(“p”);

结果：<b>你好</b><p>我想说</p>

after()

在每个匹配的元素之后插入内容（将B插入到A后）

<p>我想说</p>

$(“p”).after(“<b>你好</b>”);

结果：<p>我想说</p><b>你好</b>

insertAfter()

将A插入到B后

<p>我想说</p>

$(“<b>你好</b>”).after(“p”);

结果：<p>我想说</p><b>你好</b>

before()

在匹配元素之前插入内容

<p>我想说</p>

$(“p”).before(“<b>你好</b>”);

结果： <b>你好</b><p>我想说</p>

insertBefore()

将A插入到B前面

<p>我想说</p>

$(“<b>你好</b>”).insertBefore(“p”);

结果： <b>你好</b><p>我想说</p>

插入节点的方法不仅能将新创建的 DOM 元素插入到文档中，也能对原有 DOM 元素进行移动

①插入

var $li_1 = $("<li title='香蕉'>香蕉</li>");

var $li_2 = $("<li title='雪梨'>雪梨</li>");

var $li_3 = $("<li title='其他'>其他</li>");

var $parent = $("ul");

var $two_li = $("ul li:eq(1)");

$parent.append($li_1);             //append() 方法将创建的第1个<li>元素添加到父元素最后

$parent.prepend($li_2);            //prepend() 方法将创建的第2个<li>添加到父元素最前面

$li_3.insertAfter($two_li);       //insertAter() 方法将创建的第3个<li>元素插入到获取的<li> 元素之后

②移动

var $one_li = $("ul li:eq(1)");   //获取第二个

var $two_li = $("ul li:eq(2)");   //获取第三个

$two_li.insertBefore($one_li);    //将第三个移动到第二个之前

移动后

3.2.4 删除节点

remove() 和 empty()

1 remove() 方法

从DOM中删除所有匹配元素

var $li = $("ul li:eq(1)").remove();   //获取第2个元素后删除

$li.appendTo("ul");                    //又重新添加到<ul>元素中

某个元素使用 remove() 方法删除后，该节点包含的所有后代将同时被删除，这个方法返回值是一个指向已被删除的节点的引用。因此可以在以后再使用这些元素 （用remove()方法删除后，还可以继续使用）

选择元素属性删除

$("ul li").remove("li[title!=菠萝]");

2 empty() 方法

严格来讲，empty() 方法并不是删除节点，而是清空节点，能清空元素中的所有后代节点

3.2.5 复制节点

    $("ul li").click(function(){

        $(this).clone().appendTo("ul");   //复制当前单击的节点，并将它追加到<ul>元素中

    })

被复制出的节点是不具备再次复制的功能，如果需要具备，可以在clone()中传入 true

$("ul li").click(function(){

        $(this).clone(true).appendTo("ul");   //复制当前单击的节点，并将它追加到<ul>元素中

})

3.2.6 替换节点

replaceWith() 和 replaceAll()

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");

replaceAll() 只是颠倒了 replaceWith() 顺序

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

3.2.7 包裹节点

将节点用其他标记包裹起来 用 wrap()

$("strong").wrap("<b></b>");  //用<b>标签把 <strong>元素包裹起来

//得到结果：

<b><strong title = "选择你最喜欢的水果"> 你最喜欢的水果是？</strong></b>

包裹节点操作还有2个方法  wrapAll()  和 wrapInner()

①wrapAll() 方法

该方法会将所有的元素用一个元素来包裹。不同于wrap() 方法，wrap() 方法是酱所有的元素单独包装

wrap() 单独包裹每个元素

<strong title="选择你最喜欢的水果">你最不喜欢的水果是？</strong>

<strong title="选择你最喜欢的水果">你最不喜欢的水果是？</strong>

<ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

</ul>

$("strong").wrap("<b></b>");

结果

wrapAll() 包裹整个元素

<strong title="选择你最喜欢的水果">你最不喜欢的水果是？</strong>

<strong title="选择你最喜欢的水果">你最不喜欢的水果是？</strong>

<ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

</ul>

$("strong").wrapAll("<b></b>")

结果

wrapInner()   包裹元素的子元素

<strong title="选择你最喜欢的水果">你最不喜欢的水果是？</strong>

<strong title="选择你最喜欢的水果">你最不喜欢的水果是？</strong>

<ul>

    <li title="苹果">苹果</li>

    <li title="橘子">橘子</li>

    <li title="菠萝">菠萝</li>

</ul>

$("strong").wrapInner("<b></b>")

结果

3.2.8 属性操作

在jQuery中，庸attr()方法来获取和设置元素属性，removeAttr() 方法来删除元素属性

1 获取属性和设置属性

    var $para = $("p");

    var p_txt = $para.attr("title");   //获取 p 元素的节点属性 title

    $("p").attr("title","your title");  //设置单个属性值

    $("p").attr({"title":"your title","name":"test"}); //设置多个属性

2 删除属性

$("p").removeAttr("title");  //删除P元素的属性 title

3.2.9 样式操作

1 attr获取样式和设置样式     2 追加样式addClass

    $("p").attr("class","high")   //使用attr() 为p元素设置class

    $("input:eq(2)").click(function(){

        $("p").addClass("high");

    })                             //使用addClass追加样式

3移除样式

    $("p").removeClass("high");                    //移除单个

    $("p").removeClass("high").removeClass("another");

    //或者

    $("p").removeClass("high another");            //移除多个

    $("p").removeClass();                          //移除所有

4 切换样式 toggle()

$toggleBtn.toggle(function(){

        //显示元素

        }，function(){

        //隐藏元素

    })

toggleClass() 方法控制样式上的重复切换

$("p").toggleClass("another");   //重复切换类名 "another"

5 判断是否含有某个样式

hasClass() 可以用来判断元素中是否含有某个class，如果有，返回 true ，否则返回 false

$("p").hasClass("another");

$("p").is(".another");   //hasClass 相当于调用了 is() 方法

3.2.10 设置和获取HTML、文本和值

1 html()

html() 类似于JS中的 innerHTML 属性，用来读取或者设置某个元素中的HTML内容

<p title="选择你最喜欢的水果"><strong>你最喜欢的水果</strong></p>

var p_html = $("p").html();

alert(p_html);

html() 设置元素的 HTML 代码

$("p").html("<b>你最不喜欢的水果是？</b>");  //设置<p>元素的HTML代码

2 text()

类似于JS中的innerText() ，可以用来设置某个元素中的文本内容。和 html() 用法一样

3 val()

类似于JS中value()。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="text" id="address" value="请输入邮箱地址" name=""><br/><br/>

    <input type="text" id="password" value="请输入邮箱密码" name=""><br/><br/>

    <input type="button" value="登录" name="">

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

    $("#address").focus(function(){

        var txt_value = $(this).val();  //获取地址文本框的值

        if(txt_value=="请输入邮箱地址"){  //如果值==“请输入邮箱地址” 则清空

            $(this).val("");

        }

    })

    $("#address").blur(function(){

        var txt_value = $(this).val();

        if(txt_value == ""){

            $(this).val("请输入邮箱地址");

        }

    })

</script>

</body>

</html>

使用 defaultValue 属性来实现同样功能。defaultValue 属性包含该表单元素的初始值。

$("#address").focus(function(){

        var txt_value = $(this).val();      //获取地址文本框的值

        if(txt_value==this.defaultValue){   //如果值==“请输入邮箱地址” 则清空

            $(this).val("");

        }

    })

$("#address").blur(function(){

        var txt_value = $(this).val();

        if(txt_value == ""){

            $(this).val(this.defaultValue);

        }

    })

* this 指向当前的文本框， “this.defaultValue” 就是当前文本框的默认值

3.2.11  遍历节点

1 children() 方法

用于取得匹配元素的子元素集合

2 next() 方法

用于取得匹配元素后面紧邻的同辈元素

3 prev() 方法

用于取得匹配元素前面紧邻的同辈元素

4 siblings() 方法

用于取得匹配元素前后所有的同辈元素

3.2.12 CSS-DOM 操作

1利用CSS直接获取元素的样式属性

$("p").css("color");  //获取P元素的样式颜色

$("p").css("color","red")  //获取并修改样式颜色

$("p").css({"color":"red","fontSize":"12px"}); //设置多个样式

2height()  width()

$("p").height();  //获取元素高度

$("p").height(100)  //设置元素高度为100px

//1.offset() 方法

//获取元素在当前视窗的相对偏移，返回的对象包含2个属性，top和left。只对可见元素有效

var offset = $("p").offset();   //获取元素的offset()

var left = offset.left;        //获取左偏移

var top  = offset.top;       // 获取右偏移

//2.position() 方法

//获取元素相对于最近的一个position样式属性设置为 relative或absolute的祖父节点的相对偏移。用法同 offset()

//scrollTop() 和 scrollLeft()

//获取元素的滚动条距离顶端和距离左端的距离

var $p = $("p");

var scrollTop = $p.scrollTop();   //距离顶端距离

var scrollLeft = $p.scrollLeft();   //距离左端距离

//还可以设置滚动到指定位置

$("p").scrollTop(300);   //垂直滚动条到指定位置

$('p').scrollLeft(300);   //横向滚动条滚动到指定位置

第三章（jQuery中的DOM操作）的更多相关文章

  1. 第三章 jQuery中的DOM操作

    DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树. jQuery继承了JavaScript对DOM对象操作的特性,使开发 ...

  2. 第3章 jQuery中的DOM操作

    parent() .parents().closest() 区别示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  3. 锋利的jQuery ——jQuery中的DOM操作（三）

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  4. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  5. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  6. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  7. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  8. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  9. Jquery：jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  10. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

随机推荐

  1. wifi驱动总结（1）

    一.wifi平台设备驱动注册过程Path:Rtw_android.c (rk3399\kernel\drivers\net\wireless\rockchip_wlan\rtl8723au\os_de ...

  2. Spring 日期时间处理

    1 Spring自身的支持 1.1 factory-bean <bean id="dateFormat" class="java.text.SimpleDateFo ...

  3. 20170515-20170523学习计划---学习java(1)

    背景: 组内搞了一个读书会,我是负责人,我们学习的主题是java,为了更好服务读书会,所以安排一下学习计划,到时候在读书会上做分享. 这是第二次读书会,第一次讲了java的一些基本知识,这次只要学习对 ...

  4. 习惯的PHP命名规则

     从C++转PHP也已经很长一段时间了,一直有点代码洁癖,对于文件名,接口名,类名,方法名等都使用严格的驼峰命名法, 但是有时候会犹豫到底用首字母大写区分还是用下划线区分.今天简单总结和规约一下. 1 ...

  5. 关于struts2 Could not find action or result错误

    今天来配置这个S2SH框架的的时候,刚把环境搭建好,启动时并没有报错,但是当我写了一个action,我也准备通过这个action来访问页面,但是这里我访问的时候却给我报Could not find a ...

  6. java加密解密研究6、MD算法家族

    一.简述 MD5算法是典型的消息摘要算法,其前身有MD2.MD3和MD4算法,它由MD4.MD3和MD2算法改进而来.不论是哪一种MD算法,它们都需 要获得一个随机长度的信息并产生一个123位的信息摘 ...

  7. 【2017-06-02】Jquery基础

    Jquery就是Js集成的一些方法包. 注意:Jquery的引入位置在<head></head>里. 一.选择器 1.Id选择器 $("#div1") 2. ...

  8. 磁盘文件I/O，SSD结构，局部性原理 笔记

    磁盘文件I/O过程 进程向内核发起read scene.dat请求: 内核根据inode获取对应该进程的address space,在address space查找page_cache,如果没有找到, ...

  9. Spring+SpringMVC+MyBatis深入学习及搭建(十一)——SpringMVC架构

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6985816.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十)--My ...

  10. java加密算法入门（二）-对称加密详解

    1.简单介绍 什么是对称加密算法? 对称加密算法即,加密和解密使用相同密钥的算法. 优缺点: 优点:算法公开.计算量小.加密速度快.加密效率高. 缺点: (1)交易双方都使用同样钥匙,安全性得不到保证 ...