JQuery基础

慕课网总结

环境搭建

 http://jquery.com/download/ 

head引入

<sctipt type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></sctipt>

 

点击事件（click单击/dbclick双击）

<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});

监听用户鼠标按下的操作（mousedown鼠标按下/mouseup鼠标弹起同理）

<div id="test">点击触发<div>
$("ele").mousedown(function(){
    alert('触发指定事件')
})
$("#test").mousedown(function(){
     $("ele").mousedown()  //手动指定触发事件 
});

监听用户移动的操作（mousemove）

<div id="test">点击触发<div>
$("ele").mousemove(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").mousemove()  //指定触发事件 
});

监听用户的移入移出操作（mouseover/mouseout）

<div id="test">点击触发<div>
$("ele").mouseover(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").mouseover()  //指定触发事件 
});

监听用户移动到内部的操作（mouseover和mouseout）

mouseover为例：

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

1. p元素响应事件
2. div元素响应事件

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

简单的切换效果

$(selector).hover(handlerIn, handlerOut)

如：

$("p").?(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );

• handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
• handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

用户点击聚焦

<div id="test">点击触发<div>
$("ele").focusin(function(){
    alert('触发指定事件')
})
$("#test").mouseup(function(){
     $("ele").focusin()  //指定触发事件 
});

用户在点击失去焦

<div id="test">点击触发<div>
$("ele").focusout(function(){
    alert('触发指定事件')
})
$("#test").mouseup(function(){
     $("ele").focusout()  //指定触发事件 
});