(jQuery笔记)基础DOW和css操作

DOM 是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。

D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M

表示模型，即页面上的元素节点和文本节点

方法名 描述

html() 获取元素中 HTML 内容

html(value) 设置元素中 HTML 内容 有HTML会自动解析

text() 获取元素中文本内容

text(value) 设置原生中文本内容 有HTML会自动转义

val() 获取表单中的文本内容

val(value) 设置表单中的文本内容

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递

操作。//////////直接把表单的input的value传到数组里，就可以别选定

$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定

元素属性操作

方法名 描述

attr(key) 获取某个元素 key 属性的属性值

attr(key, value) 设置某个元素 key 属性的属性值

attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值

attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置

删除指定的属性，这个方法就不可以使用匿名函数，传递 index 和 value 均无效。

$('div').removeAttr('title'); //删除指定的属性

方法名 描述

css(name) 获取某个元素行内的 CSS 样式

css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式

css(name, value) 设置某个元素行内的 CSS 样式

css(name, function (index, value) ) 设置某个元素行内的 CSS 样式

css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式

hasClass() 方法检查被选元素是否包含指定的 class。

addClass(class) 给某个元素添加一个 CSS 类

addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类

removeClass(class) 删除某个元素的一个 CSS 类

removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类

toggleClass(class) 来回切换默认样式和指定样式

toggleClass(class1 class2 class3...) 同上

toggleClass(class, switch) 来回切换样式的时候设置切换频率

toggleClass(function () {}) 通过匿名函数设置切换的规则

toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率

toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数

jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻

松的遍历对象数组。

$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组

alert(attr + ':' + value);

});

使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使

用.each()方法呢？

$('div').each(function (index, element) { //index 为索引，element 为元素 DOM

alert(index + ':' + element);

});

css方法

方法名 描述

width()方法

width() 获取某个元素的长度,,,,,,,会自动parseInt转换

width(value) 设置某个元素的长度

width(function (index, width) {}) 通过匿名函数设置某个元素的长度

height()

height() 获取某个元素的长度

height(value) 设置某个元素的长度

height(function (index, width) {}) 通过匿名函数设置某个元素的长度

内外边距和边框尺寸方法

innerWidth() 获取元素宽度，包含内边距 padding

innerHeight() 获取元素高度，包含内边距 padding

outerWidth() 获取元素宽度，包含边框 border 和内边距 padding

outerHeight() 获取元素高度，包含边框 border 和内边距 padding

outerWidth(ture) 同上，且包含外边距

outerHeight(true) 同上，且包含外边距

元素偏移方法

offset() 获取某个元素相对于视口的偏移位置

position() 获取某个元素相对于父元素的偏移位置

scrollTop() 获取垂直滚动条的值

scrollTop(value) 设置垂直滚动条的值

scrollLeft() 获取水平滚动条的值

scrollLeft(value) 设置水平滚动条的值