jQueryDay02：鼠标事件，键盘事件，表单事件，事件绑定，加载事件，常用方法，动画效果

目录

0x00 鼠标事件

0x01 键盘事件

0x02 表单事件

0x03 事件绑定

0x04 加载事件

0x05 常用方法:

0x06 动画效果:

---

0x00 鼠标事件

$().click() 单击事件

$().dblclick() 双击事件

$().hover() 鼠标进入和离开事件

$().mousedown() 鼠标左键按下事件

$().mouseup()鼠标左键松开事件

$().mouseover() 鼠标悬停

$().mouseout() 鼠标离开

0x01 键盘事件

$().keydown() 键盘按下事件

$().keypress()  同上，但是ctrl shift键不能触发

$().keyup() 键盘抬起事件

通过事件对象获取键值

$().keydown(function(e){

console.log(e);

})

0x02 表单事件

$().blur() 光标焦点离开表单事件

$().focus() 光标焦点进入表单事件

$().submit() 表单提交事件

注意：submit()事件必须选择整个表单

html:

<form action="javascript:;" id="form">
        <input type="text" id="input">
        <input type="submit" value="submit">
</form>

其中action="javascript:;"的作用是阻止表单跳转，也可以这样写：javascript:void(0);

   $('#form').submit(function(){
        alert("submit");
    })

也有人监控input submit的点击事件来实现同样的效果

$('').click(function(){})

$('#input').blur(function(){

$(this)就代表$('input')这个节点

})

例如：

 $('#input').keydown(function(){
        console.log($(this).val());
    })

0x03 事件绑定

$().one('事件名',函数) 多用来阻止表单被重复提交

例如：

    $('#submit').one('click',function(){
        console.log("submit");
    })

$().bind()； 为一个元素绑定一个时间处理程序

例如：

$(),bind('click',function(){})

好处:可以绑定多个

$().bind('click mouseover',function());

$().unbind(‘事件名’) 解绑事件

$(el).on('事件名','节点',函数) 事件委托，el将事件委托给节点

委托事件对于新增加的节点仍然起效果

    <ul id="uu">
        <li>line</li>
        <li>line</li>
        <li>line</li>
        <li>line</li>
        <ul>
            <li><strong>lineline</strong></li>
            <li><div>lineline</div></li>
            <li>lineline</li>
            <li>lineline</li>
        </ul>
    </ul>

    $('#uu').on('click','li',function(){
        $(this).append('<li>new line</li>');
    })

0x04 加载事件

$(document).ready(function(){

});

表示当整个页面加载完毕时，执行function代码

写法二：

$(function(){

})

效果同上

0x05 常用方法:

1.$().each()  用来无缝迭代对象和数组。

用法一:

  var arr=["liudehua",23];
    var obj={"username":"liudehua","age":23};
    $.each(arr,function(i,v){
        console.log(i+'===='+v);
    })
    $.each(obj,function(i,v){
        console.log(i+'===='+v);
    })

用法二:

    $('li').each(function(index){
        console.log($(this).text());
        console.log(index);
    })

2.$.inArray(value,array) 在数组中查找指定值并返回它的索引

var arr=["liudehua",23];
console.log($.inArray(23,arr));

3.$.isArray(array) 确定参数是否是一个数组

4.$.isNumeric() 确定参数是否是一个数字

5.$.trim() 去掉字符串起始和结尾的空格。

6.$(this).serialize() 获取表单中所有带name属性的input框的输入值并转化为字符串形式

    <form action="javascript:void(0);" id="form">
        <input type="text" id="input" name="username">
        <input type="text" id="input" name="pwd">
        <input type="submit" value="submit" id="submit">
    </form>
    
<script>    
  $('#form').submit(function(){
      console.log($(this).serialize());
  })
</script>

7.$().serializeArray() 将用作提交的表单元素的值编译成拥有name和value对象组成的数组

8.$().parseJSON()

将json字符串表示的json对象反序列化为json对象

var obj ='{"username":"liudehua","age":25}';
console.log($.parseJSON(obj).username);

0x06 动画效果:

1.hide 和 show

$('#hide').click(function(){
    $('ul').hide(2000);
})
$('#show').click(function(){
    $('ul').show(2000);
})

2.等效方法：

$('#hide').click(function(){
    $('ul').toggle(2000);
})

3.从上而下隐藏:

$('#hide').click(function(){
    $('ul').slideToggle(2000);
})

对应的有:

$().slideUp();

$().slideDown();

颜色变淡型隐藏：

$().fadeIn();

$().fadeOut();

$().fadeToggle();