Mr.Xiong使用jQuery实现键盘事件and复选框的勾选效果

使用jQuery实现键盘事件and复选框的勾选效果

我们先来实现键盘事件的效果

 

1. 布局：先放一个div并且给div一个类为box，然后再在div中放一张图片，图片用img来装，img中的src就是图片的入境/位置
2. 设置样式：我们也不需要设置太多，就给div盒子设置样式还有装图片的img设置样式就好了，给box设置：width：100px，height：100px，再给个定位position：absolute，给box设置绝对定位是因为后面写完jQuery后我们去按下设置好的按钮图片会相应的移动，接着再给img设置样式：就给图片设置宽度高度就行了，和box的宽度高度一样，这只是设置图片的大小，设置完这些我们还可以给通配符设置一下margin和padding的值为零，也可以不设置

3. 

    

 

接下来就是要去写jQuery，实现按下某个键盘按键后图片的位置会发生改变的效果，先声明两个全局变量为t = 0和l = 0，然后再给window绑定键盘事件$（window）.keydown（function（）{ }），除了键盘事件之外还有很多其他事件，比如：窗口事件、表单元素事件、鼠标事件等，我在这绑定的是keydown当键盘被按下时执行脚本，也可以绑定keypress当键盘被按下后又松开时执行脚本，或者给window绑定keyup当键盘被松开时执行脚本

1. 我们还可以在方法里面传入一个参数event， 再声明一个event来接收event||$（event），这个是检测浏览区是否兼容的问题，然后再通过parseInt将装图片的盒子的top值和left值分别赋值给t和l，parseInt的意思大概是整形
2. 然后再通过if嵌套来设置上下左右四个键盘按键的键盘码，这四个按键的键盘码分别是38、40、37、39，设置键盘码又要通过keyCode是否等于这四个键盘码，如果是按下相应的按键图片的位置就会发生改变，具体如何改变就要看是我们想让图片怎么改变，在这里我让四个按钮上下左右都是改变100px，比如按下向上按键，图片就向上移动100px，键盘效果就完成了

实现复选框的勾选效果

1. 老样子还是先来布局，先给一个div标签，然后在div标签放入六个input标签，input标签里面的type属性值可以是radio，也可以是CheckBox，radio是将input设置为单选框，点击了单选框再点击还是选中的效果，而CheckBox是将input设置为复选框，可以反复勾选，然后在input标签后写入相应的文字，比如吃、喝、玩、跑步、篮球、羽毛球等
2. 接着在div标签外面再给三个button按钮并且添加的类分别为button1、button2、button3，同样在button按钮中分别写入全部选、全不选、两级反转，布局就完成了，样式不需要设置
3. 然后我们直接去写jQuery来实现效果

1. 首先我们先声明一个变量s来接收通过jQuery获取到的所有input标签，var s = $（“input”），然后再通过我们前面给button按钮添加的类获取到三个button按钮，然后再给三个button按钮绑定点击事件，接下来就是去遍历一下所有的input标签，我们可以通过平时的for循环声明一个变量来遍历，还可以通过 $ . each（ s，function（index，value）{}）这个方法来遍历获取到的所有input标签，回调函数里面需要传入两个参数分别为input标签的索引和值
2. 遍历完后，要让第一个button按钮点击后不管是单选框还是复选框都勾选上了，就要把遍历到的所有input标签添加上checked属性，再让这个属性值为true，这就是代表勾选的意思，然后第二个button按钮点击后要让所有input标签不选中，就要让checked属性的值为false，这是表示不勾选的意思，而第三个button按钮就是要让勾选了的input标签变为没有勾选，而没有勾选的input标签变为勾选，这时就要用到三目运算了，先判断input标签的checked属性值是否为true，如果是，则input标签的checked的属性值变为false，反之，则变为true，这就写完了，最后再去页面上点击button按钮看看是否达到了我们需要的效果。