[JavaScript知识库]jQuery DOM操作

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery DOM操作 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS

作者：一条狗的离别

一起复习一下！！！

1、内容&属性操作

1.1、内容

text() 设置或返回所选元素的文本内容

html() 设置或返回所选元素的内容（包括 HTML 标记）

val() 设置或返回表单字段的值

1.2、属性 方法 描述

attr() 设置或返回被选元素的属性值。

removeAttr() 从每一个匹配的元素中删除一个属性

prop() 1.6+ 获取在匹配的元素集中的第一个元素的属性值。

removeProp()1.6+ 删除由.prop()方法设置的属性集

attr()和 prop()区别：

l 对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

l 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

l 具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled,使用prop()

prop()函数的结果:有相应的属性，返回指定的属性值；否则返回空字符串；

attr()函数的结果：有相应的属性，返回指定的属性值；否则返回 undefined。

1.3、CSS 类 方法 描述

addClass() 向被选元素添加一个或多个类removeClass() 从被选元素删除一个或多个类

toggleClass() 对被选元素进行添加/删除类的切换操作

2、添加/删除/替换元素

2.1、添加元素

append() 在被选元素的结尾插入内容（结束标签之前插入）

appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend() 在被选元素的开头插入内容（开始标签之后插入）

prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。

after() 在被选元素之后插入内容

insertAfter() 在被选元素后插入 HTML 元素

before() 在被选元素之前插入内容

insertBefore() 在被选元素前插入 HTML 元素

2.2、删除元素

empty() 从被选元素中删除子元素

remove() 从 DOM 中删除所有匹配的元素，绑定的事件，附加的数据等都会被移除

detach() 从 DOM 中删除所有匹配的元素，所有绑定的事件、附加的数据等都会保留下来

2.3、替换元素 方法 描述

replaceWith() 将所有匹配的元素替换成指定的 HTML 或 DOM 元素。

1. $(selector).replaceWith(content)

replaceAll() 用匹配的元素替换掉所有 selector 匹配到的元素

1. $(content).replaceAll(selector)
2. 3、CSS()方法

css() 方法设置或返回被选元素的一个或多个样式属性。 返回 CSS 属性值：

1. $(selector).css("propertyname") 设置 CSS 属性值：（注意属性和值之间是 ， ）

1. $(selector).css("propertyname","value")

设置多个 CSS 属性值：（注意属性与属性之间用 ，隔开，属性和值之间是 ： ）

1. $(selector).css({"propertyname":"value","propertyname":"value",...})

更多 CSS 方法： 方法 描述

offset() 设置/获取匹配元素在当前视口的相对偏移。

position() 获取匹配元素相对父元素的偏移。

scrollTop() 设置/获取匹配元素相对滚动条顶部的偏移

scrollLeft() 设置/获取匹配元素相对滚动条左侧的偏移。

heigh() 设置/取得匹配元素当前计算的高度值（px）。

width() 设置/取得第一个匹配元素当前计算的宽度值（px）。

innerHeight() 设置/获取第一个匹配元素内部区域高度（包括内边距 padding、不包

括边框 border）。

innerWidth() 设置/获取第一个匹配元素内部区域宽度（包括内边距 padding、不包括边框 border）。

outerHeight() 设置/获取第一个匹配元素外部高度（默认包括内边距 padding 和边框 border）。

outerWidth() 设置/获取第一个匹配元素外部宽度（默认包括内边距 padding 和边框 border）

初来乍到，请多多指教，大神勿喷。若有错误之处，欢迎指导