亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Monthai: jQuery事件實踐總結(jié)

??? 2018-11-11 18:42:10 267
????:事件清單.blur() //失去焦點 .focus() //獲得焦點 .change() //元素值發(fā)生變化 .click()  .dblclick() //雙擊 .mouseover() //不論鼠標指針穿過被選元素或其子元素,都會觸發(fā) mouseover 事件 .mouseenter() //只有在鼠標指

事件清單

.blur() //失去焦點
.focus() //獲得焦點
.change() //元素值發(fā)生變化
.click() 
.dblclick() //雙擊
.mouseover() //不論鼠標指針穿過被選元素或其子元素,都會觸發(fā) mouseover 事件
.mouseenter() //只有在鼠標指針穿過被選元素時,才會觸發(fā) mouseenter 事件
.mouseleave() //只有在鼠標指針離開被選元素時,才會觸發(fā) mouseleave 事件
.mouseout() //不論鼠標指針離開被選元素還是任何子元素,都會觸發(fā) mouseout 事件
.mousedown()
.mouseup()
.resize() //縮放窗口
.pageX //相對于文檔左邊緣的鼠標位置
.pageY //相對于文檔上邊緣的鼠標位置

(1)pageX、pageY是對象屬性,不是方法,后面不需要加(),但是前面需要指定對象,該對象為function的參數(shù)。如果坐標是針對整個窗口的,函數(shù)對象應該是document。

$(document).mousemove(function(aa){
      $('span').text('X:'+aa.pageX+'Y:'+aa.pageY)
})

(2)resize()的對象是window。

(3)text()輸出問題

//方法一:
var num = 0
$(window).resize(function(){
     $('b').text('調(diào)整次數(shù)'+ num++) //此方法調(diào)整一次后依然返回0
     alert('窗口已被調(diào)整')
}
//方法二:
var num = 0
$(window).resize(function(){
     $('b').text(num+=1) //從1開始,但不能用"文本"+輸出,會出錯,無提示
     alert('窗口已被調(diào)整')
}

完整代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery事件</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready( function(){
            $('div').css({'width':'300px','height':'100px','border':'2px blue dashed'})
            $('input').blur(function(){
                $('input').css('background','#B3D4FC')
            })
            $('input').focus(function(){
                $('input').css('background','#EDBCC8')
            })
            $('div').dblclick(function(){
                $('div').css('background','#EDBCC8')
            })
            $('div').mouseup(function(aa){
                $('span').text('X:'+aa.pageX+'Y:'+aa.pageY)
            })
            var num = 0
            $(window).resize(function(){
                $('b').text(num+=1)
                alert('窗口已被調(diào)整!')
            })
        })
    </script>
</head>
<body>
    <input type="text" >
    <div>
        雙擊觸發(fā)變色<br>
        坐標<span></span><br>
        窗口調(diào)整次數(shù):<b></b>
    </div>
</body>
</html>

END

??? ??

?? ??