jQuery笔记（四）-- 操作DOM

DOM操作可分为3个方面：DOM Core(核心)、HTML DOM和CSS DOM
（1）DOM Core不属于JavaScript语言范畴，任何一种支持DOM的程序设计语言都可以操作它，它的用于不限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。JavaScript中的createElement()、getElementById()和removeAttribute()等方法都是DOM Core的组成部分。
（2）HTML DOM的出现比DOM Core要早，它提供了一些更简明的记号来描述各种HTML元素的属性，如访问表单document.forms等。
（3）CSS DOM主要操作CSS。在JavaScript中，CSS DOM主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出不同的效果。
jQuery作为一种JavaScript库，继承并优化了JavaScript访问DOM对象的特性，是开发人员更加方便的操作DOM对象。

1、创建节点

在Web开发中，要创建动态网页内容，主要操作的节点包括元素、属性和文本。

• 创建元素：DOM中的createElement()方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。在jQuery中，简化了DOM操作，直接使用构造函数$()创建元素对象。用法：$(html)，该函数能够根据参数html所传递的HTML字符串，创建一个DOM对象，并将该对象包装为jQuery对象返回。执行效率上还是原生的JavaScript创建效率高
• 创建文本：DOM中的createTextNode()方法可以创建文本节点，jQuery中直接将文本字符串添加到元素标记字符串中即可，然后使用append()等方法将它们添加到DOM文档树中。执行效率上还是原生的JavaScript创建效率高
• 创建属性：DOM中使用setAttribute(name,value)方法可以创建属性节点，并设置属性节点包含的值。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则setAttribute()方法将为元素创建该属性并赋值，jQuery中直接使用即可
• jQuery以一种简单的方法代替繁琐的操作，简化了Web开发的难度和门槛，但是由于jQuery是对JavaScript的封装，所以执行速度并没有得到优化，相反却影响了代码的执行效率。因此，在可能的情况下，建议混合使用JavaScript和jQuery方法，以提高代码执行效率

2、插入节点

• 内部插入

方法	说明
append()	向每个匹配的元素内部追加内容
appendTo()	把所有匹配的元素追加到另一个指定的元素集合中。实际上，该方法颠倒了append()的用法。例如$(A).append(B)与$(B).appendTo(A)是等价的
prepend()	向每个匹配的元素内部前置内容
prependTo()	把所有匹配的元素前置到另一个指定的元素集合中。实际上，该方法颠倒了prepend()的用法。例如$(A).prepend(B)与$(B).prependTo(A)是等价的

• 外部插入

方法	说明
after()	在每个匹配的元素之后插入内容
before()	在每个匹配的元素之前插入内容
insertAfter()	把所有匹配的元素插入到另一个指定的元素集合后面
insertBefore()	把所有匹配的元素插入到另一个指定的元素集合前面

3、删除节点

方法	说明
remove()	从DOM中删除所有匹配的元素
empty()	清空元素包含的内容，不删除当前匹配元素
detach()	将匹配的元素从DOM中分离出来

    
    
    
    
    


段落文本1
布局文本
段落文本2
清除段落文本

4、复制节点

jQuery使用clone()方法复制节点，用法：clone([withDataAndEvents])、clone([withDataAndEvents], [deepWithDataAndEvents])。参数withDataAndEvents表示一个布尔值，可以是true也可以是false，用来设置是否复制事件处理函数等数据，默认是false。参数deepWithDataAndEvents也是一个布尔值，用来设置对事件处理函数和复制元素的所有子元素的数据是否应该被复制。默认情况下它的值为相匹配的第一个参数的值（默认值是false）

    
    
    
    
    


加粗文本
段落文本

5、替换节点

• replaceWith()方法能够将所有匹配的元素替换成指定的HTML或DOM元素。用法：replaceWith(newContent)、replaceWith(function)
• replaceAll()方法能够用匹配的元素替换掉所有指定参数匹配到的元素。用法：replaceAll(selector)
• 上述两种方法实际上是一对相反的操作，$(A).replaceAll($B)等价于$B.replaceWith($A)

   
   
   
   
   


按钮1
按钮2
按钮3

6、包裹元素

DOM没有提供包裹元素的方法，jQuery定义了3种包裹元素的方法：wrap()、wrapAll()和wrapInner()

• 外包：wrap()方法能够在每个匹配的元素外层包上一个html元素。用法：wrap(wrappingElement)和wrap(wrappingFunction)
• 内包：wrapInner()方法能够在匹配元素的内容外包裹一层结构。用法：wrapInner(wrappingElement)和wrapInner(wrappingFunction)
• 总包：wrapAll()方法能够在所有匹配元素外包一层结构
• 卸包：unwrap()方法与wrap()方法的功能相反，能够将匹配元素的父级元素删除，保留自身在原来的位置。用法：unwrap()

   


   
   
   
   
   


首页
社区
新闻
包装/卸包

7、操作属性

jQuery和DOM都提供了属性的基本操作方法。属性操作包括设置属性、访问属性、删除属性和修改属性等。

• 设置属性
  • prop()能够为匹配的元素设置一个或更多的属性。用法：prop(propertyName, value)、prop(map)、prop(propertyName, function(index, oldPropertyValue))
  • attr()也能够为匹配的元素设置一个或更多的属性。用法：attr(attributeName, value)、attr(map)、attr(attributeName, function(index, attr))
  • attr()和prop()方法都可以用来设置元素属性，但在用法上还是有一些细微差别。一般使用prop()方法获取表单属性值。使用prop()方法的时候，返回值是标准属性，如$('#checked').prop('disabled')，不会返回disabled或者空字符串，只会是true/false。

属性(Attribute/Property)	attr()	prop()
accessKey	✔️
align	✔️
class	✔️
contenteditable	✔️
draggable	✔️
href	✔️
id	✔️
label	✔️
rel	✔️
src	✔️
tabindex	✔️
title	✔️
type	✔️
width(if needed over width())	✔️
async		✔️
autofocus		✔️
checked		✔️
loaction(IE window.loaction)		✔️
multiple		✔️
readOnly		✔️
selected		✔️

• 访问属性：当为prop()和attr()方法传递两个参数时一般用来为指定的属性设置值，而当为这两个方法传递一个参数时，则表示读取指定属性的值
  • prop()方法只获得jQuery对象中第一个匹配元素的属性值。如果元素的一个属性没有设置或者没有匹配的元素，则该方法将返回undefined值。为了获得每个单独的元素的属性值，可以使用循环结构的jQuery.each()或map()方法来逐一读取
  • 根据W3C表单规范，checked属性是一个布尔属性，这意味着该属性值为布尔值，那么如果属性没有值，或者为空字符串值，这就为脚本中进行逻辑判断带来了麻烦。考虑到不同浏览器对其处理结果的不同，可以采取以下方式进行检测：
    • if(elem.checked)
    • if($(elem).prop("checked"))
    • if($(elem).is(":checked"))
    • 使用attr()进行检测，就容易出现问题
  • attr()方法只获取jQuery第一个匹配元素的属性值。如果要获取每个单独的元素的属性值，需要使用jQuery的each()或者map()方法做一个循环

    
    
    
    
    



复选框
激活文本框

• 删除属性
  • removeProp()方法主要用来删除由prop()方法设置的属性集
  • removeAttr()方法使用DOM原生的removeAttribute()方法，该方法的优点是能够直接被jQuery对象访问调用，而且具有良好的浏览器兼容性

8、操作类

jQuery定义了几个与类样式相关的操作方法。

• 添加类样式：addClass()方法为元素追加样式，用法：addClass(className)、addClass(function(index, class))
• 删除类样式：removeClass([className])、removeClass(function(index, class))
• 切换类样式：演示切换在Web开发中比较常用，如折叠、开关、伸缩及Tab切换等动态效果。jQuery使用toggleClass()方法开/关定义类样式。用法：toggleClass(className)、toggleClass(className, switch)、toggleClass(function(incex, class), [switch])
• 判断类样式：hasClass(className)方法判断元素是否包含指定的类样式

   
   
   
   
   


床前明月光
疑是地上霜
举头望明月
低头思故乡

9、操作内容

jQuery提供多个方法操作文档内容，它们把HTML结构视为字符串，并以字符串的形式进行操作

• 读写HTML字符串：html()方法以字符串的形式读写HTML文档结构。用法：html()、html(htmlString)、html(function(index, html))。当html()方法不包含参数时，表示以字符串形式读取指定节点下的多有HTML结构，当该方法包含参数的时候，表示向指定节点下写入HTML结构字符串，同时会覆盖该节点原来包含的所有内容。注意：html()方法实际上是对DOM的innerHTML属性包装，因此不支持XML文档
• 读写文本：text()方法读写指定元素下包含的文本内容，这些文本内容主要是指文本节点包含的数据。用法：text(textString)、text(function(index, text))。当text()方法不包含参数时，表示以字符串形式读取指定节点下的所有文本内容。当text()方法包含参数时，表示向指定节点下写入文本字符串，同时会覆盖该节点原来包含的所有文本内容

   
   
   
   
   



   
标题
   
段落文本


   

• 读写值：val()方法用来读写指定表单对象包含的值。当val()不包含参数并调用时，表示将读取表单元素的值，当val()方法包含参数时，表示向指定表单元素写入值。用法：val()、val(value)、val(function(index, value))。val()方法在读写单选按钮、复选框、下拉菜单和列表框的值时，比较实用且操作速度快。对于val()方法来说，可以传递一个参数设置表单的显示值。由于下拉菜单和列表框，显示为每个选项的文本，而不是value属性值，故通过设置选项的显示值，可以决定应显示的项目。对于其他表单元素来说，必须制定value值方才有效。如果为元素指定多个值，则可以以数组的形式进行参数传递。

   
   
   
   



   
       单选1
       单选2
   
   
       多选1
       多选2
       多选3
   
   复选框1
   复选框2

   单选按钮1
   单选按钮2


   显示各个表单对象的值
   设置各个表单对象的值

10、操作样式表

jQuery把所有与CSS样式相关的操作都封装到css()方法中。

• 读写CSS样式：CSS样式存在三种形式：行内样式、文档内部样式和文档外部样式。行内样式以元素属性的形式存在，使用style属性即可读写，而文档内部样式和文档外部样式统一被视为外部样式，这些外部样式只能通过DOM的StyleSheets、CSS和CSS2模块提供的对象、方法和属性才能访问和操作。jQuery使用css()方法读取指定的样式，也能够为元素设置CSS样式。用法：css(propertyName)、css(propertyName, value)、css(propertyName, function(index, value))、css(map)。参数map表示属性名值对构成的对象，如：{name:value;}
  • css()方法能够读取指定元素的所有CSS样式，不管它是行内样式、文档内部样式还是文档外部样式
  • css()方法可以传入一个字符串形式的属性名。对于多单词构成的属性名，jQuery既可以解释连字符的CSS表示法，如background-color，也可以解释驼峰大小写形式的DOM表示法，如backgroundColor
  • 在设置样式属性时，css()方法能够接受的参数有两种：一种是为它传递一个单独的样式属性和值；应以重视为它传递一个由属性名值对构成的映射map，用户可以将这些jQuery映射看成是JavaScript对象直接量。
  • 如果属性值是数字值不需要加引号，而字符串值需要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法，则可以省略引号。

    
    
    
    
    


段落文本

• 绝对定位：在DOM中使用offsetLeft和offsetTop属性可以获取元素的最近偏移位置。但是不同的浏览器定义元素的偏移参照对象不同。例如：IE总是以父元素为参照对象进行偏移，而非IE浏览器会以最近非静态定位元素为参照对象进行偏移。所有浏览器都支持offsetParent属性，该属性能够自动识别当前元素偏移的参照对象。jQuery简化了定位操作，使用offset()方法可以获取匹配元素在当前视口的相对偏移。用法：offset()、offset(coordinates)、offset(function(index, coods))。参数coordinates表示一个对象，包含top和left属性，用整数指明元素的新顶部和左边坐标。
  • 如果调用offset()方法没有传递参数，则将返回一个对象，包含两个属性top和left，分别存储匹配元素的顶部偏移和左侧偏移。注意，该方法仅对可见元素有效
  • offset()方法允许用户重新设置元素的位置，这个元素的位置是相对于document对象的。如果对象原先的position样式属性是static(静态定位)的话，会被改成relative(相对定位)来实现重定位。

    
    
    
    
    


盒子1
盒子2
盒子3

• 相对定位：使用JavaScript获取指定元素的相对便宜位置设计思路：利用offsetParent属性获取最近的父级定位元素，然后判断该元素的位置，如果它是父元素，则可以直接读取当前元素的offsetLeft和offsetTop属性值，如果不是父元素，则可以获取当前元素的绝对偏移位置减去定位元素的绝对偏移位置，即可获得当前元素距离定位元素的偏移距离。jQuery使用position()方法可以获取匹配元素的相对偏移位置。用法：position()
  • position()方法的用法与offset()方法相同，都返回一个包含两个属性(top和left)的对象。注意：为精确计算结果，在补白、边框和填充属性上使用像素单位，该方法只对可见元素有效
  • 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。offset parent指离钙元素最近的而且被定位过的祖先元素。position()方法获得该元素相对于offset parent的当前坐标。与offset()不同，offset()是获得钙元素相对于document的当前坐标，当把一个新元素放在同一个容器里边另一个元素附近时，用position()最好
  • jQuery还定义了scrollTop()和scrollLeft()两个方法分别获取匹配元素相对滚动条顶部和左侧的偏移值

  
  
  
  
  


盒子1

  
盒子2

• 控制大小：jQuery使用width()和height()方法读写元素的大小。用法：width()、width(value)、width(function(index, value))、height()、height(value)、height(function(index, value))
  • width()和height()方法在没有传递参数的时候，表示读取元素的宽度和高度，返回值的单位是像素。也可以传递参数设置元素的宽和高，如果直接传递一个数值，则默认单位是像素px，也可以以字符串形式传递值和单位
  • 除了width()和height()方法，jQuery还定义了innerHeight()、innerWidth()、outerHeight()、outerWidth()方法，这些方法实际上是在width()和height()方法基础上，计算了元素的边框或补白。其中outerHeight()、outerWidth()方法能够返回元素总宽和总高(包括宽高、补白和边框宽度)，innerHeight()、innerWidth()方法能够返回元素的内容宽度和高度(包括宽高和补白）

    
    
    
    
    


盒子

11、遍历文档

jQuery使用children()、next()、prev()、parent()方法遍历文档中任何元素。其中children()方法获取当前元素包含的所有子元素，next()方法获取当前元素相邻的而下一个同级元素，prev()方法获取当前元素相邻的上一个同级元素，parent()犯法获取当前元素的父元素，这些方法返回值都是jQuery对象，而不是DOM集合或对象。

    
    
    
    


《望岳》
杜甫

    
岱宗夫如何，齐鲁青未了。
    
造化钟神秀，阴阳割昏晓。
    
荡胸生层云，决眦入归鸟。
    
会当凌绝顶，一览众山小。