移动或插入元素
插入
元素内部
.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只能获取到一个。
使用map()或each()方法,遍历参数,然后返回每个参数的值
再使用val()
最后用jQuery对象的toArray()方法,转换成数组
实例
$('[name = "checkbox"]:checked').map(function(){
return $(this).val();
}).toArray();
设置值
下拉选择框(单选和多选)、复选框(checkbox)设置时,都是用数组方式设置。