![daf5e0bc01eb10a317623960eadb382a.png](https://i-blog.csdnimg.cn/blog_migrate/4fae51542c3117610ccc33a575a376d3.jpeg)
全选框
我们来看这样一个例子
![b723e59901e2328391c92ca0084588ff.png](https://i-blog.csdnimg.cn/blog_migrate/2f1344372ecb50c9564e3d412af1c5e5.jpeg)
当1选中时2里面全部选中,当2里面全部选中时,对应的1也要选中
![f2b16c34790815a0dd92529c4f62d954.png](https://i-blog.csdnimg.cn/blog_migrate/f8db48c80e2747c7b36a3b26d336433c.jpeg)
先来看一下这个表格的编写:
![dd95ab1fcd6bcd85541e9b622b199823.png](https://i-blog.csdnimg.cn/blog_migrate/92f784c8a181b98d4e3b4d4b8ff2033b.jpeg)
不要忘了引入jQuery文件!
运行结果如下:
![4ac3a5cdd21efa9d256dcdf8699622b4.png](https://i-blog.csdnimg.cn/blog_migrate/c959b4e67150ad7f4b12749746691a19.jpeg)
先来实现选中第1个框后全部选中效果:
![b782e3502b19617474221cbbc22fc10b.png](https://i-blog.csdnimg.cn/blog_migrate/712d519100a663b126e8b195a74b4c3c.jpeg)
运行结果如下:
![1e58d7c346063c907f02c5e271115d2c.png](https://i-blog.csdnimg.cn/blog_migrate/250e361b0d072607fd5aa1f6919c467b.jpeg)
点击姓名前的复选框后,下面的全部选中,再点一下全部取消;
但是依次选中下面三个时,最上面的无法选中
![30649026f4706983681dcacbffb18766.png](https://i-blog.csdnimg.cn/blog_migrate/c10fb227c9986c01f214a60522c69c96.jpeg)
接着来控制最下面的三个复选框依次选中时,第1个复选框就会被选中:
在这个change中,判断tbody所有复选框的个数,和被选中的个数相等
![fca69574fd0ddb2282f3d6f5e7f73a91.png](https://i-blog.csdnimg.cn/blog_migrate/7ac5ab9fb81f8fe34f15a4dac0626c81.jpeg)
此时只是将后三个依次选中了,运行结果如下:
![a0c21602cec6896d144569d9df61e4d2.png](https://i-blog.csdnimg.cn/blog_migrate/1481dd7ddcc883bb12c1a07549d01ab8.jpeg)
大家可以想一下,整个效果的实现如果使用js原生来写,代码量有多大
![488b6a5b2128af7b456d0b2c42ae0e26.png](https://i-blog.csdnimg.cn/blog_migrate/a1aaef8ca002a060eb28c8c903865d3b.jpeg)
动画
接着我们来看jQuery的动画
为我们提供了4种动画方式:
1.show/hide
2.fadeIn/fadeOut
3.slideUp/slideDown
4.animate/stop
![83d3f090c953bf35fc24429b4c71f499.png](https://i-blog.csdnimg.cn/blog_migrate/91e42a3e310e1a4060ccd4c3e42dbe04.jpeg)
我们来逐一介绍一下:
show/hide在默认情况下是没有动画效果的,当我调用一个元素show/hide时会直接显示/隐藏
要想有动画效果,就要给show/hide参数中传入数字,就表示要以固定的时间进行show和hide
我们来试一下这个效果:
先建一个div
![7b2f2072efe9a4e6474382344f683093.png](https://i-blog.csdnimg.cn/blog_migrate/fbd45dab6279dc811b73404eec52e3e7.jpeg)
再来写jQuery代码:
![ce3ef46bf7374d46c8c2c806adbc2c4a.png](https://i-blog.csdnimg.cn/blog_migrate/f8d7f963baa3f7824d95a848d44b52bc.jpeg)
这个效果是等比缩放显示和隐藏,运行结果如下:
![2a95f57a4628128794a825fbf0e97128.gif](https://i-blog.csdnimg.cn/blog_migrate/eaeeb493892e579965fcea97d666ff04.gif)
![912104429159e738bcd49caf140f8b2d.png](https://i-blog.csdnimg.cn/blog_migrate/e4a80fb3defd08eafe515e6b343dde6d.jpeg)
第二种动画:
fadeIn/fadeOut 它的效果是让元素进入/退出页面;
与show/hide从表面上来看它的区别是只有透明度在变化,不缩放
为了使效果更快速显示,可以修改一下传入的毫秒数
![0367840ad01e3c9a820abb7b97da9241.png](https://i-blog.csdnimg.cn/blog_migrate/5ab60601dfdb738f9a8d232d9ce18e73.jpeg)
运行效果如下:
![30631c015ecf878c818143a3f05d247e.gif](https://i-blog.csdnimg.cn/blog_migrate/b006f6b455e5d062e773e92e53e99b38.gif)
![a8cdc42704a0b6a7b90c1d3495e85d28.png](https://i-blog.csdnimg.cn/blog_migrate/2e9024918be165dcedafd2aedbad838e.jpeg)
再来看第三个动画:
slideDown/slideUp 它的效果就像向下拉窗帘的效果那样
![bca5f808a732413ea43c72df51687896.png](https://i-blog.csdnimg.cn/blog_migrate/1297042bd0ecb394fbbb03996c9b06ab.jpeg)
运行结果如下:
![fd6d6f305374eed26c1338798fc98959.gif](https://i-blog.csdnimg.cn/blog_migrate/d8d91ebf5a91992b9c069fb9a7eb3f14.gif)
![414d01c3f1f7caf938e674d1d6fb382e.png](https://i-blog.csdnimg.cn/blog_migrate/890c21817fe28b6930c60feef0035458.jpeg)
第四个动画:
animate/stop
animate:第一个参数:要改变的属性
![7faa493cb91300fe012329a29a4ae91b.png](https://i-blog.csdnimg.cn/blog_migrate/249d4da83a4abbdc3b979f433389723a.jpeg)
运行结果如下:
![e14c749941c3f55255c3f345fccb947a.gif](https://i-blog.csdnimg.cn/blog_migrate/9b73f4b2f9ed7e314e266ed0b1b6a329.gif)
如果我们想要宽和高分开变化,就需要再调用一次animate:
![460520f0e5c31c9f42bffd96bd9b096d.png](https://i-blog.csdnimg.cn/blog_migrate/a3a2f1c79ab7e2077eb39259645745ad.jpeg)
运行效果如下:
![48104a61217a6a3ef43760d9da8d03d3.gif](https://i-blog.csdnimg.cn/blog_migrate/b2a347095ba559b3f0d8c406a980a2a2.gif)
![ec6179052aa421cc169e6d20ce21488b.png](https://i-blog.csdnimg.cn/blog_migrate/ace3f106b7045d8eaaa3739ae3f76b74.jpeg)
stop:停止当前运动的动画
我们再添加一个button,停止动画
这时我们的按钮last需要改一下:
![0550fadc713ac07cdefae00efda10271.png](https://i-blog.csdnimg.cn/blog_migrate/af61ff6a32006292b3cd5db9cf4cd28c.jpeg)
运行结果如下:
![e8517e071e2d302b9b01d7c7758d139a.gif](https://i-blog.csdnimg.cn/blog_migrate/6ce62fd21e70411e29bc752a1ea41f0e.gif)
![56b4c606f98a5b63921acfb470514acb.png](https://i-blog.csdnimg.cn/blog_migrate/494fb875b9f737c2d9332e029f0a744d.jpeg)
当然在animate中也可以加入第二个参数,多少毫秒
![588cbdfe3e1e4ea8583a10403b23b6d0.png](https://i-blog.csdnimg.cn/blog_migrate/7011814dc1ba6b269ec7cc29447001be.jpeg)
这时候动画就非常慢了,运行效果如下:
![806d6311571c46b957972296fe61673d.gif](https://i-blog.csdnimg.cn/blog_migrate/177ac8e180eb33f6de35d8f28424f8f0.gif)
但是点击停止动画时,水平虽然停止了,但是垂直方向的动画仍然继续执行
如果我们想要让stop功能使其同时停止,就需要给stop一个true
![2b6f021311ced8b51b9ab0b697b46e48.png](https://i-blog.csdnimg.cn/blog_migrate/949d9e787239e02bfb280e14a1e2c391.jpeg)
运行结果如下:
![cfe93bb252f6acda83dc7adbceb54e5b.gif](https://i-blog.csdnimg.cn/blog_migrate/008c229ace0c1a957789b0799bfbc91e.gif)
![122671b329319d783e51fd1e917b5cd9.png](https://i-blog.csdnimg.cn/blog_migrate/93eba6d02c7f357ccf9c65c36efa3d89.jpeg)
- 写作不易,大家多多关注,谢谢啦-
---web分享,分享的不只是web
![af138f188bad1eebd62904be83575174.png](https://i-blog.csdnimg.cn/blog_migrate/88d746f051ec2f00196338e6ac30ee5a.jpeg)