jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
这是段落中的粗体文本。
获取属性 - attr()
设置内容 - text()、html() 以及 val()
这是段落。
这是另一个段落。
Input field:
text()、html() 以及 val() 的回调函数
这是粗体文本。
这是另一段粗体文本。
添加新的 HTML 内容,我们将学习用于添加新内容的四个 jQuery 方法:
append() - 在被选元素的结尾插入内容This is a paragraph.
This is another paragraph.
- List item 1
- List item 2
- List item 3
prepend() - 在被选元素的开头插入内容
This is a paragraph.
This is another paragraph.
- List item 1
- List item 2
- List item 3
after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
通过 jQuery,可以很容易地删除已有的 HTML 元素。
remove() - 删除被选元素(及其子元素)
This is some text in the div.This is a paragraph in the div.
This is another paragraph in the div.
empty() - 从被选元素中删除子元素
This is some text in the div.This is a paragraph in the div.
This is another paragraph in the div.
jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
标题 1
标题 2
这是一个段落。
这是另一个段落。
这是非常重要的文本!
removeClass() - 从被选元素删除一个或多个类
标题 1
标题 2
这是一个段落。
这是另一个段落。
toggleClass() - 对被选元素进行添加/删除类的切换操作
标题 1
标题 2
这是一个段落。
这是另一个段落。
css() - 设置或返回样式属性
head>这是标题
这是一个段落。
这是一个段落。
这是一个段落。
设置多个 CSS 属性
这是标题
这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。
jQuery 提供多个处理尺寸的重要方法:
width() height()
width() - 返回元素的宽度。
height() - 返回元素的高度。
innerWidth() innerHeight()
innerWidth() - 返回元素的宽度(包括内边距)。
innerHeight() - 返回元素的高度(包括内边距)。
outerWidth() outerHeight()
outerWidth() - 返回元素的宽度(包括内边距和边框)。
outerHeight() - 返回元素的高度(包括内边距和边框)。