jQuery(尚硅谷)笔记------08

jQuery练习

全选，全不选，反选

我们先来做一个前端页面：

页面：

 

 

 

 

 

 

 

 点击反选按钮之后:

 如果反选前为都未选中状态:

点击反选后：

 

 

 

点击提交后：

 

 

 

 

第一次点击全选/全不选时：

再点击一次时:

 

 但是此时我们并未完成该功能

因为这个时候只是点击全选/全不选与球类框实现了同步，但是点击球类并不能让全选/全不选也实现同步。

当我们把足球勾选去掉时:

 

仍然显示全选状态。所以我们还要再做一个单击事件：

 我们只需要加上和反选相同的代码就行了。

 

 
 练习二 DOM的增删改 

内部插入：

appendTo()        a.appendTo(b)        把a插入到b子元素末尾，成为最后一个子元素

prependTo()        a.prependTo(b)      把a插入到b子元素前面，成为第一个子元素

 

 

 

 

 

 我们也可以用选择器的方式写：

 外部插入：

insertAfter()        a.insertAfter(b)        得到ba

insertBefore()        a.insertBefore(b)        得到ab

 

 

 

 

 

 替换：

replaceWith()        a.replaceWith(b)        用b替换掉a

replaceAll()            a.replaceAll(b)          用a替换掉所有的b

 

 

 

全部替换：

删除：

 remove()        a.remove();        删除a标签

empty()        a.empty();        清空a标签里的内容

清空div标签

清空内容，保留div标签：

 

 

 练习 从左到右 从右到左练习 

 先创建一个前端页面：

 

 页面效果：

 然后我们开始逐步实现操作：

选中添加到右边:

 

 

全部添加到右边：

 

 

 

 我们把左边的做完了 右边的只要反过来写就可以了相对简单。

选中删除到左边：

 

 

 全部删除到左边：