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

JQuery的方便之處——寬高設(shè)置、坐標(biāo)值和滾動(dòng)條+事件綁定機(jī)制

原創(chuàng) 2016-11-12 09:10:58 384
摘要:1、元素的寬高  可以通過(guò)css來(lái)進(jìn)行設(shè)置,例如:$("元素").css({"寬度":"值","高度":"值"});  也可以通過(guò)JQuery中的函數(shù)直接進(jìn)行設(shè)置,比如$("元素").width(數(shù)字或字符串);$("元素").height(數(shù)字或字符串);不

1、元素的寬高

  可以通過(guò)css來(lái)進(jìn)行設(shè)置,例如:$("元素").css({"寬度":"值","高度":"值"});

  也可以通過(guò)JQuery中的函數(shù)直接進(jìn)行設(shè)置,比如$("元素").width(數(shù)字或字符串);$("元素").height(數(shù)字或字符串);不給值的話就相當(dāng)于獲取寬高

  兩種方法獲取寬高的區(qū)別,css獲取寬高返回值是帶單位px的,而JQuery的函數(shù)獲取寬高是不帶單位的。如果用于數(shù)學(xué)計(jì)算還是選擇JQuery好一點(diǎn)。

2、坐標(biāo)值

  有兩個(gè)函數(shù):offset()和position()。offset()能設(shè)置位置,position()不能設(shè)置坐標(biāo)值。

  offset()函數(shù):獲取坐標(biāo)值:相對(duì)瀏覽器頁(yè)面的便移。返回的是一個(gè)對(duì)象Object{top:值,left:值}

          設(shè)置坐標(biāo)值:傳遞參數(shù)對(duì)象{top:值,left:值},設(shè)置之后元素自動(dòng)變?yōu)橄鄬?duì)定位。

  position()函數(shù):獲取在坐標(biāo)值:相對(duì)最近的定位的父元素的便移。

          設(shè)置坐標(biāo)值:無(wú)法設(shè)置。

4、滾動(dòng)條(滾動(dòng)顯示,原理就是兒子元素的寬高超出了父元素的寬高,所以我們要滾動(dòng)顯示,所以要給父元素加一個(gè)overflow:scroll;就會(huì)出現(xiàn)一個(gè)滾動(dòng)條)

  水平滾動(dòng)條和垂直滾動(dòng)條

  獲取滾動(dòng)條位置:$("父元素").scrollTop();

          $("父元素").scrollLeft();

  設(shè)置滾動(dòng)條位置:$("父元素").scrollTop(數(shù)字或字符串);

          $("父元素").scrollLeft(數(shù)字或字符串);

  瀏覽器滾動(dòng)事件:$(window).scroll(function(){    });

5、JQuery的事件介紹

6、JQuery的事件綁定機(jī)制bind

  以前如果給一個(gè)元素綁定兩個(gè)或多個(gè)事件的時(shí)候,是在這個(gè)元素對(duì)象之后一直.函數(shù)就好了。例如要給一個(gè)按鈕綁定兩個(gè)事件:

$("button").click(function(){   })

      .mouseenter(function(){     });

  JQuery很強(qiáng)大,給我們提供了一種事件綁定機(jī)制:bind

$("button").bind({
  "click":function(){
  },
  "mouseenter":function(){
  }
});

  綁定事件之后動(dòng)態(tài)添加元素將不會(huì)綁定事件。

7、JQuery事件委托機(jī)制delegate(這個(gè)也是一種綁定,主要是性能優(yōu)化)

  例如:你有100個(gè)li標(biāo)簽,需要給所有的li都綁定一個(gè)點(diǎn)擊事件,傳統(tǒng)的方法:$("li").click(function(){     });這樣的話太浪費(fèi)時(shí)間了。所以我們委托給父元素,這樣能節(jié)省時(shí)間。例如:100個(gè)li標(biāo)簽的父元素是ul,

$("ul").delegate("li","click",function(){
     //參數(shù)含義  哪些子元素    事件    事件處理程序
 });

  綁定事件之后動(dòng)態(tài)添加的元素也會(huì)綁定事件。

 8、on綁定事件 (強(qiáng)烈推薦使用,但是版本1.7以上)

  這是綁定的根源,其余所有的綁定事件都是通過(guò)on來(lái)實(shí)現(xiàn)的。提供了一種統(tǒng)一的綁定事件的方法。保留了delegate的優(yōu)點(diǎn)。

  $("父元素").on("事件","子元素",function(){   });

9、off事件的解綁

  這個(gè)和on對(duì)應(yīng),$("父元素").off("事件");

10、JQuery提供了一種事件觸發(fā)機(jī)制,用一個(gè)事件去觸發(fā)另一個(gè)事件

11、事件對(duì)象

  阻止事件冒泡:e.stopPropagation();

  阻止默認(rèn)行為:例如 :一個(gè)超鏈接的點(diǎn)擊默認(rèn)行為是跳轉(zhuǎn)  $("a").click(function(e){  e.preventDefault();    });這樣在點(diǎn)擊的時(shí)候就可以阻止默認(rèn)行為。

  獲取事件類(lèi)型:e.type

  鼠標(biāo)的按鍵類(lèi)型:左鍵1  中鍵2   右鍵 3    

  獲取按鍵字母:e.keyCode

  獲取事件來(lái)源:e.target==this  說(shuō)明是從自己來(lái)的,并不是事件冒泡觸發(fā)的事件。  


發(fā)布手記

熱門(mén)詞條