jQuery——DOM元素 和 表单值操作

移动或插入元素

插入

元素内部

.append()    最后面

.prepend()   最前面

元素外部

.before()   前面

.after()    后面

移动

当我们使用以上方法，参数是一个jQuery对象时，元素会做相应移动。

补充

以上方法的参数，可以是jQuery对象，可以是html片段，还可以是数组，字符串等等。

另一种逻辑

上面的方法，都是往什么里面添加元素；

其实还有另一种逻辑，就是把元素添加到什么里面。

语法

appendTo(target)

prepengTo(target)

insertBefore(target)

insertAfter(target)

包裹元素

wrap(wrapper)

所有匹配到的结果，都会分别进行一次包裹。

例如，用p包裹a，

最终结果是每一个a外部，都有一个p，而不是一个p包裹所有a。


参数说明

可以是html片段 或 jQuery对象。

如果是jQuery对象，它不会移动该元素，而是复制一份出来去包裹。

wrapAll(wrapper)

将所有结果，用一个元素包裹。

也就是一个p，包裹所有a。

wrapInner(wrapper)

简单来说，就是只包裹标签内的内容。

相当于，wrapper成为了原标签内容的直接父级。

取消包裹

unwrap( )

取消上面的包裹方法。

移除元素

remove([selector])

页面不显示了，html结构里也没有了，jQuery对象里仍然有该元素，但是这个元素绑定的事件和附加的数据去除了。

如果把该元素移动到别的地方，假设这个元素是p，那么它就会重新在页面显示出来，但是数据、事件都没有了。

detach([selector])

页面不显示了，html结构里也没有了，但仍然保留事件和数据。

empty()

如果只是想把内容清空，可以使用这方法。

html结构里还有，只是没有了内容。事件、属性、数据都还在。

如果元素里还有子节点，会被移除掉。

复制和替换元素

复制元素

clone([Even[deepEven]])

参数说明：

两个参数是布尔值

如果都为空，默认第一个是false；

如果只传一个参数，设置的是第二个参数。

第一个参数是，元素自身的事件和数据；

第二个参数是元素自身以及子节点的事件和数据。

替换元素

(target).replaceWith(content) && (content).replaceAll(target)

前者，匹配元素被参数所替换

后者，元素用来替换参数

特别注意破坏性操作

本节提到的以下方法，都是破坏性操作。

• appendTo()

• prependTo()

• insertBefore()

• insertAfter()

• replaceAll

处理表单元素值

.val( )      获取值

.val(value)  设置值 

单选框： <input type = "radio">

在获取单选框的值得时候，需要加上“:checked”选择器。

复选框：<input type = "checkbox">

不能用val( )来获取，val只能获取到一个。

1. 使用map()或each()方法，遍历参数，然后返回每个参数的值

2. 再使用val()

3. 最后用jQuery对象的toArray()方法，转换成数组

实例

$('[name = "checkbox"]:checked').map(function(){
    return $(this).val();
}).toArray();

设置值

下拉选择框（单选和多选）、复选框（checkbox）设置时，都是用数组方式设置。