jQuery笔记（二）jQuery中DOM操作
前言
本篇主要介绍DOM操作，在说DOM操作之前，首先我们应该熟悉DOM树，以一个例子为例来说明DOM树。首先看这段HTML代码.(本文后面的代码如果没有特别指出，都是针对下述HTML代码进行操作)
|
<!DOCTYPE html PUBLIC "-//W3C//DTD <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>爱好</title> <meta http-equiv="Content-Type" content="text/html; </head> <body> <p title="你最喜欢的运动">你最喜欢的运动是什么呢</p> <ul> <li <li <li </ul> </body> </html> |
其DOM结构如图1 所示。
图1
图一就是该HTML代码的一颗DOM数。对DOM的各种操作事实上都是对这颗DOM树展开的。
在掌握各种DOM操作之前，首先需要了解DOM操作的分类。
一. DOM操作的分类
1. DOM Core
DOM Core 可以处理任何一种使用标签的语音，不只是HTML，还有XML等等。在JS中我们常用到的getElementById()、getElementByTagName()、getAttribute()、setAttribute()等方法都属于DOM Core中的核心方法。
2. HTML-DOM
一般而言，HTML-DOM只是用于处理Web文档。
3.CSS-DOM
CSS-DOM主要用于获取和设置style对象的各种属性。
二.jQuery中的各种DOM操作
jQuery作为js的一种类库，不仅继承了DOM的一些操作，更加发扬了DOM操作，使其对DOM操作更加的灵活。
1. 查找节点
主要是通过jQuery选择器来完成。结合文章开头的DOM树实例就行说明。
1.1查找元素节点
以上述DOM树为例，来说明如何执行查找元素节点，执行下述代码就可打印出“篮球”。
|
var $li=$("ul li:eq(0)"); //查找ul中第一个<li> alert($li.text()); //打印出第一个节点中的文本内容 |
1.2 查找属性节点
通过使用attr()获取属性的值，参数可以为多个。执行下述代码就会弹出“你最喜欢的运动”.
|
var $p=$("p"); //获取节点<p> var p_text=$p.attr("title"); //获取节点<p>的属性title的值 alert(p_text); //打印title的值 |
2. 创建节点
很多时候，我们不仅仅是要查找节点，还需要创建节点，例如我们在浏览淘宝网店的时候，当鼠标放到一幅图片上的时候，鼠标旁马上就会有一张更大的图片来显示，其实这张大的图片就是开辟了一个新的<div>区域，或者更准确的来说是创建了一个新的节点挂在了DOM树上。
2.1 创建元素节点
创建元素节点并不只是单单创建元素节点，还需要将其挂到DOM树上。例如我们创建一个<li>节点然后将其挂在<ul>上，具体代码如下：
|
var $("ul").append($li_new); |
2.2 创建文本节点
刚才只是创建了一个节点，并没有先该节点中添加任何文本内容，如果我们要创建文本节点，只需要向刚才的元素节点中添加文本内容就行。具体代码如下：
|
var $("ul").append($li_new); |
此时HTML显示如图2所示
2.3 创建属性节点
与创建文本节点相似，也是在创建元素节点时候一起创建。如下行代码。
|
var $li_new1=$("<li title='羽毛球'>羽毛球</li>");//创建属性节点 $("ul").append($li_new1); //将该属性节点挂在<ul>上 |
可见，title属性在随着<li>节点创建的时候也一起创建了。
【PS：JS虽然对单引号、双引号没有太多区别，但是如果是单引号里面还有引号的话，则里面的必须用双引号；反之亦然。】
3. 插入节点
从上面的例子可以看出一种插入节点的方法是通过jQuery中的append()方法，下面通过表1将插入节点的各种方法进行总结。
表1
插入节点的各种方法
|
方法 |
描述 |
示例 |
|
append() |
向每个匹配元素内部追加节点或是内容 |
HTML代码：<p>你好吗?</p> jQuery代码：$("p").append(“<b>还不错哦.</b>”); 结果：<p>你好吗？<b>还不错哦.</b></p> |
|
appendTo() |
$(A).append(B):是将B追加到A上 $(A).appendTo(B):是将A追加到B上 |
HTML代码：<p>你好吗?</p> jQuery代码：$("<b>还不错哦.</b>").appendTo(“p”); 结果：<p>你好吗？<b>还不错哦.</b></p> |
|
prepend() |
向每个匹配的元素内部追加内容 |
HTML代码：<p>你好吗?</p> jQuery代码：$("p").prepend(“<b>还不错哦.</b>”); 结果：<p><b>还不错哦.</b>你好吗？</p> |
|
prependTo() |
$(A).prepend(B):是将B追加到A上 $(A).prependTo(B):是将A追加到B上 |
HTML代码：<p>你好吗?</p> jQuery代码：$("<b>还不错哦.</b>").aprependTo(“p”); 结果：<p><b>还不错哦.</b>你好吗？</p> |
|
after() |
在每个匹配的元素之后添加内容 |
HTML代码：<p>你好吗?</p> jQuery代码：$("p").after(“<b>还不错哦.</b>”); 结果：<p>你好吗？</p><b>还不错哦.</b> |
|
insertAfter |
$(A).after(B):将B插入到A后 $(A).insertAfter(B):将A插入到B后 |
HTML代码：<p>你好吗?</p> jQuery代码：$(“<b>还不错哦.</b>”).insertAfter(“p”); 结果：<p>你好吗？</p><b>还不错哦.</b> |
|
before() |
在每个匹配元素之前插入内容 |
HTML代码：<p>你好吗?</p> jQuery代码：$(“p”).before(“<b>还不错哦.</b>”); 结果：<b>还不错哦.</b><p>你好吗？</p> |
|
insertBefore() |
$(A).before(B):将B插入到A前 $(A).insertBefore(B):A插入到B前 |
HTML代码：<p>你好吗?</p> jQuery代码：$(“<b>还不错哦.</b>”).insertBefore(“p”); 结果：<b>还不错哦.</b><p>你好吗？</p> |
【PS：（记忆）append、after、before翻译成 追加、后面是、前面是；appendTo、insertAfter、insertBefore翻译成 追加到、插入到...后、插入到...前】
【PS：指定的内容可以是：html字符串、DOM元素(或数组)、jQuery对象】
4. 删除节点
jQuery中提供了三种方法删除多余的节点。分别是remove()、detach()、empty()。下面一一介绍。
4.1 remove()方法
|
$("ul li:eq(0)").remove(); //获取ul下的第一个<li>节点后，删除该节点 |
值得注意的有两点：1.经remove()方法删除后的节点还可以恢复， 例如上述代码被删除后可以通过以下代码恢复
|
var $li_delete=$("ul li:eq(0)"); //获得ul下第一个li节点 $li_delete.remove(); //将该节点删除 $("ul").append($li_delete); //在将被删除的节点添加到ul上，需要注意的是此时该li节点被放置到ul的最后面 |
但是这种恢复节点，该节点上所绑定的事件将不会恢复。
2.remove()可以带参数，例如一下这行代码
|
$("ul li").remove(“li[title=篮球]”); //在<ul>下，删除属性title为篮球的li的节点 |
4.2 detach()方法
具体用法与remove方法基本一样。与remove()方法相同的是该方法在删除元素节点后，也可以恢复元素。与remove()方法不同的是该方法删除所匹配的元素时，并不会删除该元素所绑定的事件、附加的数据，比如说：一个<p>绑定了一个click(function(){ alert("能恢复吗？");});事件，如果用remove()删除之后，再次恢复该元素时候并不会恢复click()事件，而detach()方法则在恢复时，同时也可以恢复其click()事件。
4.3empty()方法
准确的说，empty()方法并不是删除节点，而是清空节点，清空元素中的所有后代节点。最后只剩一个空节点（该元素的属性依然存在）。例如我们清空第三个羽毛球的<li>节点。可以用下述代码完成。
|
$("ul |
清空后HTML页变为图3所示。
图3
该图说明只是清空节点，并没有情况该节点所对应的属性。
5. 复制节点
通过使用clone()方法，值得注意的是：如果只写clone()则表示说明只复制节点，复制节点后，被复制的新元素并不具有任何行为，如何想复制原节点所绑定的行为（事件）,那么写法应该为clone(true).
6.替换节点
两个方法replaceWith()与replaceAll()：
$(A).replaceWith(B)：用B替换A
$(A).replaceAll(B)：用A替换B
7. 包裹节点
jQuery提供的方法是wrap().参考下行示例代码。
|
$("p").wrap(""<b></b>""); 用<b>标签将<p>包裹起来 |
8. 属性操作
8.1. 获取属性和设置属性
通过attr()方法。
【PS：注意attr()和css()的区别，attr()可以设置除了style之外的样式，而css就是来设置style的样式的，包括长宽颜色等等】
8.2. 删除属性
通过removeAttr();如下例代码。
|
$("p").removeAttr("title"); //删除<p>的title属性 |
9. 样式操作
9.1.获取样式和设置样式
我们知道，在HTML中改变样式的方法是通过CSS来完成的，一般都通过在元素中定义id或者class，而id或者class也输入该元素的一个属性，故可以通过attr()方法来获取和设置其属性。例如<p>标签中原始属性是class=start，在CSS中又定义了一个end的样式。这时我们就可以通过以下代码进行设置样式。
|
$("p").attr("class",“end”); //将<p>标签的样式class从start该为end |
9.2. 追加样式
通过jQuery中提供的addClass()方法进行追加样式，值得注意的是addClass()是该原先的样式中添加了一种新的样式(多了一种样式,如果以前样式是一种则使用该方法后样式变为两种)，而attr()则是该变了元素的初始样式(样式没有增多)。
9.3. 移除样式
通过jQuery中的removeClass()方法。如果参数为空，则代表是移除其所有的样式。
9.4. 切换样式
通过使用jQuery中的toggle()方法，该方法在jQuery中有着广泛的应用，以后要出一篇blog要把常用的jQuery方法进行总结。这里只说toggle()方法应该如何切换样式。实际上，通过的是tooggleClass()方法进行切换。该方法可以控制样式的重复切换，如果类名存在就删除它，如果类名不存在就添加它。示例代码如下。
|
$("p").tooggleClass("another"); //重复切换类名anohter |
9.5. 判断是否含有某个样式
通过hasClass()方法进行判断，如果有则返回true，没有返回false。
10. 设置和获取HTML、文本、值
10.1. html()方法
该方法类似于javascript中的innerHTML属性，获取的是HTML代码。
10.2.text()方法
该方法类似于javascript中的innerText属性，获取的是文本内容。
10.3.val()方法
该方法类似与javascript中的value属性，获取或者设置元素的值。需要注意的是，如果获取的是多个元素，那么返回值也将是含多个元素值的集合。
11. 遍历节点
11.1. children()方法
children()方法只考虑子元素，而不考虑后代元素。我们重点关注下该方法。首先我们还是回顾下blog开头的DOM树。然后在看下述代码。
|
var $body=$("body").children(); var var alert($body.length); //结果为2 alert($p.length); //结果为0 alert($ul.length); //结果为3 |
如果要遍历li元素，我们则可以通过一个for循环进行遍历。在返回的结果也可以看出children()方法并没有考虑后代元素。
11.2.next()方法
获得匹配元素后面紧邻的同辈元素。
11.3. prev()方法
获得匹配元素前面紧邻的同辈元素。
11.4.siblings()方法
取得匹配元素前后所有的同辈元素。
12. CSS-DOM操作
该技术一句话来说就是控制sytle对象的各种属性。如果我们要设置blog开头DOM树中的<p>的样式，我们可以通过以下代码就行设置。
|
$("p").css({"color":"red","font-size":"14px"}); //设置<p>的颜色和字体 |
小结
对DOM的操作就先写到这里吧，这篇博客也是对上一篇博客中的jQuery选择器的一种实际应用，jQuery中的对DOM操作应是jQuery的核心部分之一。掌握好DOM操作之后才能把jQuery中的事件、动画、表单表格应用甚至是AJAX才能充分利用好。
转自：http://www.cnblogs.com/yanfengfree/p/3529437.html，并对其中的一些文字进行了修改，也添加了一些自己的想法。
jQuery笔记（二）jQuery中DOM操作的更多相关文章
- jQuery总结或者锋利的jQuery笔记二
第三章 jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) , 层次选择器(div ul),(div> ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- [置顶] Jquery中DOM操作（详细）
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- 第75天：jQuery中DOM操作
一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- JQuery选择器，事件，DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...
- 前端学习(二十三）DOM操作，事件（笔记）
javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文 ...
随机推荐
- MySQL学习笔记——基础与进阶篇
目录 一.###MySQL登录和退出 二.###MySQL常用命令 三.###MySQL语法规范 四.###基础查询 五.###条件查询 六.###排序查询 七.###常见函数的学习 八.###分组查 ...
- How to check sqlsever table data type identity status ?
Unlike in Oracle, sqlserver has an special data type in order by make identity growth. But what abou ...
- kendo-ui 几个有用的数据操作
在工作中发现几个有用的api: 一,grid1.获得grid var grid = $("#proList").data("kendoGrid");2.获得da ...
- bootstrap 按钮组件
按钮组件主要的类名: .btn-toolbar 把几个 .btn-group 组合在一起,更复杂的组件 .btn-group .btn-group-vertical 垂直堆叠显示 ...
- coroutine - 示例
分享流畅的python一书, coroutine 章节中的出租车仿真的例子. from collections import namedtuple import queue import random ...
- 二叉树的非递归遍历C++实现
#include<iostream> #include<stdlib.h> #define maxsize 100 using namespace std; typedef s ...
- PWA 学习笔记
深入学习网址:https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 一. 基本介绍 1. 渐进式:适用所有浏览器,因为它是 ...
- centos6.5和centos7.5统一字符集为zh_CN.UTF-8解决系统和MySQL数据库乱码问题
linux的服务器需要做的操作 centos6.5下: 修改默认字符集为 zh_CN.UTF-8,如果没有中文语言包可能需要安装中文语言包支持 [root@meinv01 ~]# yum groupi ...
- Mybatis随记（一）update动态SQL
<update id="updateUser"> UPDATE user_info SET <if test="gzhOpenId != null an ...
- 解决shiro自定义filter后，ajax登录无法登录，并且无法显示静态资源的问题
这个问题困扰了我一天,看了下面两个文章,豁然开朗: https://www.cnblogs.com/gj1990/p/8057348.html https://412887952-qq-com.ite ...