亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

python 之 前端開發( jQuery事件、動畫效果、.each

系統 1529 0
11.58 事件
11.581 事件綁定方法與解綁

綁定事件:

            
              //
            
            
               綁定方式一:
            
            
$('.box1').click(
            
              function
            
            
               () {
    alert(
            
            '綁定方式一'
            
              )
});
?

            
            
              //
            
            
               綁定方式二:
            
            
$('.box1').on("click",
            
              function
            
            
               () {
    alert(
            
            '綁定方式一'
            
              )
});
?

            
            
              //
            
            
               綁定方式三:
            
            
$('.box1').bind('click',{'a':'b'} 
            
              function
            
            
               (e) {
    alert(
            
            '綁定方式二'
            
              );
    console.log(e.data);
});
?
$(
            
            '.box1').bind('mouseover mouseout', 
            
              function
            
             () { 
            
              //
            
            
               綁定多個事件做同一件事
            
            
    console.log('綁定多個事件做同一件事'
            
              )
});
$(
            
            '.box1'
            
              ).bind({
    
            
            'mouseup': 
            
              function
            
            
               () {
        console.log(
            
            'mouseover'
            
              );
    },
    
            
            'mousedown': 
            
              function
            
            
               () {
        console.log(
            
            'mouseout'
            
              );
    }
});
            
          

解綁事件:

            
              //
            
            
               移除事件,unbind沒有參數則代表移除所有事件
            
            
setTimeout(
            
              function
            
            
               () {
    $(
            
            '.box1').unbind('mouseover'
            
              );
}, 
            
            3000
            
              );
?
setTimeout(
            
            
              function
            
            
               () {
    $(
            
            '.box1'
            
              ).unbind();
}, 
            
            10000
            
              )
?
.off(
            
            "click",
            
              function
            
            
              (){
    xxxxx
})
            
          
11.582 綁定事件示例

點擊事件:click

            
              //
            
            
               click與dblclick只應該存在一個,大多數都是單擊事件
            
            
$('.box1').click(
            
              function
            
            
               (event) 
    
            
            
              //
            
            
               console.log(event.type);                 // event.type事件的類型為:click
            
            
    console.log(event.target);                  
            
              //
            
            
               event.target指的是點擊的那個元素
            
            
              })
$(
            
            '.box1').dblclick(
            
              function
            
            
               (event) {
    console.log(event.target);                  
            
            
              //
            
            
               event.target指的是點擊的那個元素
            
            
})
          

鼠標:mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave

            $('.box1').mousedown(
            
              function
            
            
               (event) {
        console.log(
            
            '按照鼠標左鍵不松手'
            
              );
    });
$(
            
            '.box1').mouseup(
            
              function
            
            
               (event) {
    console.log(
            
            '按照鼠標左鍵松手'
            
              );
});
?
$(
            
            '.box1').mousemove(
            
              function
            
            
               (event) {
    console.log(
            
            '移動鼠標'
            
              , event.pageX, event.pageY);
});
$(
            
            '.box1').mouseover(
            
              function
            
            
               (event) {
    console.log(
            
            '元素以及該元素的子元素在鼠標移入時都會觸發,當前的div是:'
            
              , event.target.innerText);
});
?
$(
            
            '.box1').mouseout(
            
              function
            
            
               (event) {
    console.log(
            
            '元素以及該元素的子元素在鼠標離開時都會觸發,當前的div是:'
            
              , event.target.innerText);
});
$(
            
            '.box1').mouseenter(
            
              function
            
            
               (event) {
    console.log(
            
            '元素以在鼠標移入時都會觸發(與子元素無關),當前的div是:'
            
              , event.target.innerText);
});
$(
            
            '.box1').mouseleave(
            
              function
            
            
               (event) {
    console.log(
            
            '元素以在鼠標移入時都會觸發(與子元素無關),當前的div是:'
            
              , event.target.innerText);
});
            
          

對于input框:focus、blur、input

input能夠實時檢測 textarea input:text input:password input:search 這幾個元素的內容變化,但IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代,使用jQuery庫的話直接使用on同時綁定這兩個事件即可

            $('#inp').on("focus", 
            
              function
            
            
               () {
    console.log(
            
            '鼠標聚焦'
            
              );
});
$(
            
            '#inp').on("blur", 
            
              function
            
            
               () {
    console.log(
            
            '鼠標失去焦點'
            
              );
});

            
            
              //
            
            
               當input框的值發生變化時,實時觸發
            
            
$("#inp").on("input", 
            
              function
            
            
               () {
    console.log($(
            
            
              this
            
            
              ).val());
})
$(
            
            "#i1").on("input propertychange", 
            
              function
            
            
               () {
    alert($(
            
            
              this
            
            
              ).val());
  })
            
          

按鍵:keydown、keyup

            $('#inp').keydown(
            
              function
            
            
               (e) {
    console.log(e.keyCode);
});
$(window).on(
            
            "keydown", 
            
              function
            
             (e) {      
            
              //
            
            
               獲取用戶按下那個按鍵
            
            
                  console.log(e.keyCode);
    
            
            
              if
            
             (e.keyCode === 16
            
              ){
        flag 
            
            = 
            
              true
            
            
              ;
    }
});
?
$(
            
            '#inp').keyup(
            
              function
            
             (event) {          
            
              //
            
            
               綁定一個按鍵抬起的事件
            
            
    console.log('鍵盤按鍵彈起'
            
              );
});
$(window).on(
            
            "keyup", 
            
              function
            
            
               (e) {
    console.log(e.keyCode);
    
            
            
              if
            
             (e.keyCode === 16
            
              ){
        flag 
            
            = 
            
              false
            
            
              ;
    }
});
            
          

change:

            
              //
            
            
              表單事件change
            
            
$('#inp').change(
            
              function
            
            
               () {
    console.log(
            
            
              this
            
            .value);            
            
              //
            
            
              失去焦點時就會得到值
            
            
              });
$(
            
            'input[name=sex]').change(
            
              function
            
            
               (event) {
    console.log(
            
            
              this
            
            
              .value);
});
$(
            
            '#select').change(
            
              function
            
            
               () {
    console.log(
            
            
              this
            
            
              .value);
});
            
          

選中checkbox框:select

            
              //
            
            
              表單事件select,CheckBox框被選中時觸發
            
            
$('#inp1').select(
            
              function
            
            
               () {
    console.log(
            
            
              this
            
            
              .value);
});
$(
            
            '#inp2').select(
            
              function
            
            
               () {
    console.log(
            
            
              this
            
            
              .value);
});
            
          

提交事件:submit

            
              //
            
            
              表單事件submit
            
            
$('#form').submit(
            
              function
            
            
               (event) {
console.log($(
            
            'input[name=user]'
            
              ).val());
console.log($(
            
            'input[name=pwd]'
            
              ).val());
event.preventDefault();
});
            
          

hover:不能使用on綁定hover事件

            
              //
            
            
              hover事件
            
            
$(".father").hover(                         
            
              //
            
            
               鼠標移到.father上時讓.son添加一個.show 
            
            
              function
            
            
               () {
        $(
            
            
              this
            
            ).find(".son").addClass("show"
            
              );
    },
    
            
            
              function
            
             () {                            
            
              //
            
            
               鼠標移出.father上時讓.son移除一個.show 
            
            
        $(
            
              this
            
            ).find(".son").removeClass("show"
            
              );
    })
            
          
11.583 事件冒泡應用之事件委托

添加的事件不能用于動態增加事件,例如之前我們在做表格的增刪改時,每新增一行內容都需要重新綁定事件,基于事件委托就可以解決該問題

事件委托是通過事件冒泡的原理,利用父標簽去捕獲子標簽的事件

            $('ul').on('mouseover','li',
            
              function
            
            
               (e) {
    $(e.target).css(
            
            'background-color','#ddd').siblings().css('background-color','white'
            
              );
    
            
            
              //
            
            
               e.stopPropagation();
            
            
              return
            
            
              false
            
            
              ;
})
?
$(
            
            "table").on("click", ".delete", 
            
              function
            
            
               () {
  
            
            
              //
            
            
               刪除按鈕綁定的事件
            
            
})
          
11.584 頁面加載完成執行
            $(document).ready(
            
              function
            
            
              (){
    在這里寫你的JS代碼...
})
?
簡寫:
$(
            
            
              function
            
            
              (){
    你在這里寫你的代碼
})
            
          

與window.onload()函數的區別:window.onload()函數有覆蓋現象,必須等待著圖片資源加載完成之后才能調用,且只能使用一次;jQuery的這個入口函數沒有函數覆蓋現象,文檔加載完成之后就可以調用(建議使用此函數),可以使用多次

11.59 動畫效果
            1
            
              、show() 顯示隱藏的匹配元素 語法:show(speed,callback) 
參數:
speed:三種預定速度之一的字符串(
            
            'slow','normal','fast')或表示動畫時長的毫秒值(如:1000毫秒==
            
              1秒)
callback:在動畫完成時執行的函數,每個元素執行一次

            
            2
            
              、hide
hide(speed,callback)跟show使用方法類似,表示隱藏顯示的元素。可以通過show()和hide()方法,來動態控制元素的顯示隱藏

            
            3
            
              、toggle
如果元素是可見的,切換為隱藏的;如果元素是隱藏的,切換為可見的。
?

            
            1
            
              、slideDown  通過高度變化(向下增大)來到動態地顯示所有匹配的元素,在顯示完成后觸發一個回調函數用法和參數跟上面類似

            
            2
            
              、slideUp   通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成后可選地觸發一個回調函數。用法和參數跟上面類似

            
            3
            
              、slideToggle 通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發一個回調函數跟toggle用法類似
?

            
            1、fadeIn/fadeOut  通過不透明度的變化來實現所有匹配元素的淡入/
            
              淡出效果,并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化

            
            2
            
              、fadeTo  把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。

            
            3、fadeToggle 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果,并在動畫完成后可選地觸發一個回調函數,這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。實現淡入淡出的效果就是使用此方
          

animate、stop、delay

            1
            
              、animate   概念:用于創建自定義動畫的函數  語法:animate(params,[speed],[fn])
參數:
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預定速度之一的字符串(
            
            "slow","normal", or "fast")或表示動畫時長的毫秒數值(如:1000
            
              )
fn:在動畫完成時執行的函數,每個元素執行一次。
?

            
            2
            
              、stop  概念:停止所有在指定元素上正在運行的動畫  語法:stop([clearQueue],[jumpToEnd])
參數:
clearQueue:如果設置成true,則清空隊列。可以立即結束動畫。
gotoEnd:讓當前正在執行的動畫立即完成,并且重設show和hide的原始樣式,調用回調函數等
?

            
            3、delay 概念:用來做延遲的操作  語法:delay(1000),一秒之后做后面的操作
          
11.510 .each()
            
              //
            
            
               為每一個li標簽添加class="c1"
            
            
$("li").each(
            
              function
            
            
              (){
  $(
            
            
              this
            
            ).addClass("c1"
            
              );
});
?

            
            
              //
            
            
              使用內置$.each()進行迭代
            
            
              var
            
             arry=[11,22,33,44
            
              ];
$.each(arry,
            
            
              function
            
            
              (k,v){
    console.log(k,v);
});
            
          

注意: jQuery的方法返回一個jQuery對象,遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時,它通常不需要顯式地循環的 .each()方法

也就是說,上面的例子沒有必要使用each()方法,直接像下面這樣寫就可以了:

            $("li").addClass("c1");  
            
              //
            
            
               對所有標簽做統一操作
            
          

終止each循環

            
              return
            
            
              false
            
11.511 .data()

.data(key, value): 在匹配的元素上存儲任意相關數據/保存一些狀態。

            $("div").data("k",100);     
            
              //
            
            
              給所有div標簽都保存一個名為k,值為100
            
          

.data(key): 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值

            $("div").data("k");         
            
              //
            
            
              返回第一個div標簽中保存的"k"的值 100
            
          

.removeData(key): 移除存放在元素上的數據,不加key參數表示移除所有保存的數據

            $("div").removeData("k");    
            
              //
            
            
              移除元素上存放k對應的數據
            
          

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 免费一级毛片在线播放放视频 | 免费国产小视频在线观看 | 最新欧美精品一区二区三区不卡 | 99热热久久 | 国产牛牛| 奇米99| 伊人久久综合热青草 | 久久五月婷 | 国产精品自拍亚洲 | 日日噜噜噜夜夜爽爽狠狠图片 | 亚洲欧美成人综合久久久 | 国产成人精品区在线观看 | 欧美伦理一区二区三区 | 天天影视欧美综合在线观看 | 综合色99| 久久资源在线 | 久久中文网 | 黄色在线免费网站 | 免费一级特黄欧美大片勹久久网 | 免费精品久久 | 玖玖在线免费视频 | 咪咪爱毛片 | 特级特黄一级乱仑 | 牛牛影视ac精品视频 | 精品免费tv久久久久久久 | 国产一区二区在线观看免费 | 亚洲日韩精品欧美一区二区 | 99热只有这里有精品 | 四虎国产精品永久一区 | 亚洲一区日韩二区欧美三区 | 福利影院在线 | 男人天堂免费 | 天天做天天爽爽快快 | 一区二区国产精品 | 亚洲国产高清在线精品一区 | 天天干天天操天天做 | 99秒拍福利大尺度视频 | 波多野结衣视频一区 | 台湾成人性视频免费播放 | 黄色网址在线免费 | 毛片免费在线观看 |