jQuery--DOM控制

节点结构

一个元素节点往往由属性节点和文本节点构成。

本篇文章主要讲解如何利用jQuery来获取，设置属性节点和文本节点。

属性节点

获取属性值

通过attr(属性名)方法可以获取元素节点的某个属性名的属性值，如果没有匹配项则返回undefined。

• 当选择器就有多个元素节点时，该方法只返回第一项元素节点的相应属性值

设置属性

通过attr(属性名, 属性值)方法可以设置元素节点的属性。

• attr(属性名, 属性值) 将该属性的属性值设为某个字符串
• attr(属性名, func) 将该属性的属性值设为函数，函数的形参为index，返回值为字符串。则属性的属性值为该函数的返回值
• attr({属性1:属性值1, 属性2:属性值2}) 将该元素的多个属性，设置为相应的属性值。

删除属性

通过removeAttr(属性名)方法可以删除元素的属性。

样式操作

添加CSS类

通过addClass(类名1, 类名2, ...)方法，可以向元素中添加一些CSS样式类名。以此来修改CSS的样式。

删除CSS类

通过removeClass(类名1, 类名2, ...)方法，可以从元素中删除一些CSS样式类名，以此来修改CSS的样式。

判断CSS类

通过hasClass(类名)方法，可以判断元素中时候具有某个类名的CSS样式类，如果有则返回true，否则返回false。

动态切换CSS类

通过toggleClass(类名)方法，可以在元素的CSS样式类中，动态切换的添加和删除类名。

获取样式

通过css(样式名)来获取元素的某个样式名的，样式值。

设置样式

通过css({样式名1:样式值1, 样式名2:样式值2, ...})来同时设置多个样式。

通过css(样式名, 样式值)来设置某个样式名的样式值。

文本节点

获取文本节点

通过html()用于获取元素的文本节点，返回结果既包含子节点的文本节点内容，又包含子节点的html标签

通过text()用于获取元素的文本节点，返回结果只包含子节点的文本节点内容，不包括子节点的html标签

设置文本节点

通过html(文本节点内容)用于设置元素的文本节点的内容，如果文本节点内容包括html标签时，将会在页面中进行相应的渲染。

通过text(文本节点内容)用于设置元素的文本节点的内容，如果文本节点内容包括html标签时，页面不会进行渲染，而直接以字符串显示。

子节点

添加子节点

通过append()方法可以向元素中添加子节点。其参数具有两种形式：

• 字符串形式append("添加的文本节点内容")，如果字符串中包括html标签时，页面将进行渲染append("<b>添加的内容</b>")
• 包含单个元素的选择器，该选择器将被剪切到指定的位置。例如append($("p:eq(0)"))
• 包含多个元素的选择器，这些选择器都将被剪切到指定的位置。例如append($("p"))

通过appendTo(父节点选择器)方法可以将元素剪切到父节点选择器中，作为其子节点。例如$("a:eq(0)").appendTo($("p:eq(0)"))

删除节点

通过remove()方法可以删除该元素节点。

通过empty()方法只保留当前节点标签，但是删除其间所有的内容。

克隆节点

通过clone()方法可以克隆该元素节点

通过clone(true)方法可以不仅可以克隆该元素节点，而且可以克隆该元素节点上的事件

表单元素值

通过val()方法可以获取表单元素的value属性值。

通过val(value)方法可以设定表单元素的value属性值

元素尺寸

尽管元素的尺寸可以通过css属性来获取，jQuery为了方便提供了相关的方法来获取元素的相关尺寸的值。

元素位置

offset

offset方法用于返回或设置匹配元素相对于文档(浏览器左上角)的偏移。返回的值为一个对象，可以通过top和left属性，获取距离顶部和左侧的像素数量。

// 设置元素位置
$("div").click(function(){
  $(this).offset({
    left:50,
    top:100
  }）
})

position

position方法用于返回元素相对于祖先元素的位置。这里的祖先元素指的是有定位的祖先元素，如果祖先元素没有定位，则返回值与offset方法的返回值一致。

scrollTop

scrollTop方法用于返回或设置匹配元素的滚动条的垂直位置。

scrollTop(offset)指的是滚动条相对于其顶部的偏移。如果该方法未设置参数，则返回以像素为单位的相对于滚动条顶部的偏移。