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. JAVA并发编程实战---第三章：对象的共享

    在没有同步的情况下,编译器.处理器以及运行时等都可能对操作的执行顺序进行一些意想不到的调整.在缺乏足够同步的多线程程序中,要对内存操作的执行顺序进行判断几乎无法得到正确的结果. 非原子的64位操作 当 ...

  2. 1.javascript节点的操作 创建、添加、移除、移动、复制、插入（修改）

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

  3. Linux学习第二步(Java环境安装)

    jdk版本:jdk-8u131-linux-x64.rpm 注:以下操作在root用户或具有root权限的用户下操作 一.将 dk-8u131-linux-x64.rpm拷贝到/home目录下 cp ...

  4. 【WPF】三维模型中的“照相机”

    WPF 部分支持三维模型,为啥说是部分支持?毕竟 WPF 的侧重点还是在应用开发上,虽然也有些游戏是用 WPF 开发的,不过,老周想啊,如果真要开发游戏,最好用专门的框架,WPF 应当用于开发应用功能 ...

  5. 简单RPC框架-基于Consul的服务注册与发现

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. swift学习 - 分类(Extensions)

    在oc中为了增强已有类的功能,我们经常使用分类.使用分类,我们可以在不破坏原有类的结构的前提下,对原有类进行模块化的扩展. 但是在swift中没有分类这种写法了.相对应的是swift中只有扩展(Ext ...

  7. 基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...

  8. [转]ef使用dbfirst方式连接mysql

    为了学习ORM,选择了EntityFramework,经历了三天两夜的煎熬,N多次错误,在群里高手的帮助下,终于成功,现在将我的心路历程记录下来,一是让自己有个记录,另外就是让其它人少走些弯路. 我的 ...

  9. Python进阶 - 对象，名字以及绑定

    Python进阶 - 对象,名字以及绑定 1.一切皆对象 Python哲学: Python中一切皆对象 1.1 数据模型-对象,值以及类型 对象是Python对数据的抽象.Python程序中所有的数据 ...

  10. Vulkan Tutorial 05 逻辑设备与队列

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在选择要使用的物理设备之后,我们需要设置一个逻辑设备用于交 ...