jQuery - HTML/CSS 方法（三） - 《计算机

捕获/设置

text() - 设置文本内容
- 设置文本内容（会覆盖后代元素）或返回元素所有的文本内容（包括后代元素的文本）
html() - 设置元素内容
- 设置元素内容（包括后代元素和文本）或设置元素内容（会覆盖后代元素）
- 如果设置的内容中包含标签，会进行解析
val() - 设置或返回被选元素的属性值（针对表单元素）
- 设置值时，该方法设置所有匹配元素的 value 属性的值
- 返回值时，该方法返回第一个匹配元素的 value 属性的值
attr() - 设置或返回被选元素的属性/值（HTML 属性）
- 回属性值，则返回第一个匹配元素的值（没有属性返回 undefine）
- 设置属性值，则为匹配元素设置一个或多个属性/值对（自定义属性也能设置）
- 设置多个属性值时以对象的方式

append() - 在被选元素的结尾插入内容
- 父元素的方法，作为最后一个子元素添加
- 如果元素在页面中存在，将会剪切后作为最后一个子元素添加
prepend() - 在被选元素的开头插入内容
- 父元素的方法，作为第一个子元素添加
- 如果元素在页面中存在，将会剪切后作为第一个子元素添加
after() - 在被选元素之后插入内容
- 作为后一个兄弟元素添加
before() - 在被选元素之前插入内容
- 作为前一个兄弟元素添加
appendTo() - 在被选元素的结尾插入 HTML 元素
- 子元素方法，作为最后一个子元素添加到指定的父元素
- 如果元素在页面中存在，将会剪切后作为最后一个子元素添加
- 可以是 HTML 标签
prependTo() - 在被选元素的开头插入 HTML 元素
- 子元素方法，作为第一个子元素添加到指定的父元素
- 如果元素在页面中存在，将会剪切后作为最后一个子元素添加
- 可以是 HTML 标签

addClass() - 向被选元素添加一个或多个类
- 不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性
- 如需添加多个类，请使用空格分隔类名
removeClass() - 从被选元素删除一个或多个类
- 如果没有规定参数，则该方法将从被选元素中删除所有类
- 如需移除多个类，请使用空格分隔类名
toggleClass() - 对被选元素进行添加/删除类的切换操作
- 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除类
- 如需规定若干个类，请使用空格分隔类名
- 第二个值指定布尔值，规定是否仅仅添加（true）或移除（false）类
css() - 设置或返回被选元素的一个或多个样式属性
- 获取包含了多个 dom 元素的 jQuery 对象的样式时，只能获取到第一个 dom 对象的样式
- 设置包含了多个 dom 元素的 jQuery 对象的样式时，会给所有 dom 设置样式
- 设置的样式是行内样式
- 在 ie 浏览器中，要获取边框的样式需要指定一个准确的边框，例如 border-top-width
- 设置多个样式时以对象的方式
hasClass() 检查是否包含指定的类名
- 如果被选元素包含指定的类，则方法返回 “true”，否则返回 “false”

过 css() 获取到的宽度是字符串，并且带单位，通过以下方法获取的宽度不带单位

当该方法用于返回宽度/高度时，则返回第一个匹配元素的宽度/高度（不带单位）

当该方法用于设置宽度/高度时，则设置所有匹配元素的宽度/高度

offset() - 设置或返回被选元素的偏移坐标
- 相对于文档
- 当用于设置偏移时，该方法设置所有匹配元素的偏移坐标（以对象方式）
- 当用于返回偏移时，该方法返回第一个匹配元素的带有两个属性（以像素为单位的 top 和 left 位置）的对象
position() 返回被选元素的位置
- 相对于父元素
- 返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象
scrollTop() - 设置或返回被选元素的水平滚动条位置
- $(window).scrollTop 获取页面滚动条水平位置
scrollLeft() - 设置或返回被选元素的垂直滚动条位置
- $(window).scrollLeft 获取页面滚动条垂直位置

生成被选元素的副本（包含子节点、文本和属性）

克隆的节点只存在于内存，如果要在页面上显示，需要追加到页面中

参数

$(document).ready(function(){
    $("button").click(function(){
        $("p").clone().appendTo("body");
    });
});

从被选元素移除一个或多个属性

如需移除若干个属性，请用空格分隔属性名称

$(document).ready(function(){
    $("button").click(function(){
        $("p").removeAttr("alt");
    });
});

设置或返回被选元素的属性/值（DOM 属性）

在 jQuery1.6 之后，对于 checked、selected、disable 这类 boolean 类型的属性只能用 prop 方法

当该方法用于返回属性值，则返回第一个匹配元素的值

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值

以对象形式可以设置多个值

参数

attribute 规定属性的名称
value 规定属性的值
function(index, currentValue) 使用函数设置属性和值
- index - 接受集合中元素的 index 位置
- currentvalue - 接受被选元素的当前属性值

$(document).ready(function(){
    $("button").click(function(){
        $("input").prop("checked");
    });
});