细说 jQuery DOM操作篇（一） - 属性操作

ideaa 发布于2019-08-19 14:52 / 3020人阅读

摘要：之前已经知道可以使用和等方法来修改类属性，今天来具体讨论下各种属性的操作。非类属性有时候，我们还需要对一些其他的属性进行操作，例如，，等等。例如单选按钮的属性。

之前已经知道可以使用 addClass 和 removeClass 等方法来修改类属性，今天来具体讨论下各种属性的操作。

非类属性

有时候，我们还需要对一些其他的属性进行操作，例如 href，title，id 等等。这里，我们可以使用 jQuery 的 attr 和 removeAttr 方法。举例如下：

segmentfault

使用 attr 方法同时修改 href 和 title 属性如下：

  $("a").attr({href: "http://baidu.com/", title: "baidu"})

除了简单的赋值，我们还可以使用值回调的方法来修改属性值，例如我希望把上例中的 href 值从 segmentfault 主页修改为我的个人主页：

  $("a").attr({
    href: function(index, content) {
      return content + "stephenlee";
    }
  })

结果为：

DOM 元素属性

DOM 元素属性指的是通过 Javascript 存取的值，而 HTML 属性指的是放在引号内的值，大部分情况下，两者的名字和值都是相同的，但在有些情况下也存在区别。例如单选按钮的 checked 属性。

A
B

我们可以使用 prop 方法来获得 DOM 元素属性：

$("#b").attr("checked"); // 值为 checked
$("#b").prop("checked"); // 值为 true

prop 方法的使用与 attr 方法一样，也可以对多个属性进行操作，接收值回调函数等。
大多数情况，DOM 元素属性和 HTML 属性都是对应的，可能在名称上有些差异，例如 class 和 className，文本框的 value 和 defaultValue 等。但也存在不对应的情况，例如 DOM 元素属性 nodeName，在 HTML 属性中就没有跟它对应的属性。

参考

http://book.douban.com/subject/24669823/

私有云专线服务 Dom操作 dom对象操作 DOM交互操作 PHP操作DOM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78155.html

细说 jQuery 元素篇（二） - 选择符

摘要：为了更方便对元素操作，提供了完整的选择符体系，可以分为选择符属性选择符以及自定选择符。选择符几乎支持到规范中的所有选择符。介绍个比较有用的自定义选择符选择符。为了更方便对 DOM 元素操作，jQuery 提供了完整的选择符体系，可以分为 CSS 选择符、属性选择符以及自定选择符。 CSS 选择符 jQuery 几乎支持 CSS1 到 CSS3 规范中的所有选择符。举例如下： ...

104828720 2019-08-19 14:51 评论0 收藏0
细说 jQuery 元素篇（一） - 理解 DOM

摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 事件篇（一） - 代码执行时机

摘要：在元素一篇介绍过，可以使用来使得代码在加载完毕后自动执行代码，接下来具体介绍下这个机制。这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为属性只能保存对一个函数的引用，如果我们写成以下形式最后代码执行后的效果是会覆盖。在元素一篇介绍过，jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码，接下来具体介绍下这...

dunizb 2019-08-19 14:51 评论0 收藏0
细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0