整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          jQuery的事件(代碼演示如何使用)

          、jQuery的事件有哪些?

          javscript的事件:onClick,onmouseover

          jquery的事件:click,mouseover

          注意jQuery的事件比javascript的事件少一個(gè)on

          1)鼠標(biāo)事件

          click:?jiǎn)螕羰录?/p>

          //dbclick:雙擊事件

          mouseover:鼠標(biāo)懸念(移入)

          mouseout:鼠標(biāo)移出

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          <style>

          .abc{

          background-color: #aaa;

          }

          </style>

          <script type="text/javascript">

          $(function(){

          $("#nav li").mouseover(function(){

          $(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式

          }).mouseout(function(){

          //$(this).removeClass() //當(dāng)鼠標(biāo)移出時(shí)刪除所有樣式

          $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式

          });

          });

          </script>

          <div id="nav">

          <ul>

          <li><a href="#">首頁(yè)</a></li>

          <li><a href="#">服裝</a></li>

          <li><a href="#">電器</a></li>

          <li><a href="#">團(tuán)購(gòu)</a></li>

          <li><a href="#">在線瀏覽</a></li>

          </ul>

          </div>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26

          2) 鍵盤事件

          keydown:鍵盤按下事件

          keypress:鍵盤按下并放開(kāi)時(shí)觸發(fā)

          keydown:鍵盤放開(kāi)時(shí)觸發(fā)

          • 1
          • 2
          • 3
          • 4
          • 5

          <script type="text/javascript">

          $(function(){

          //按回車鍵自動(dòng)登錄(不用再點(diǎn)擊登錄按鈕)

          $(document).keydown(function(event){

          if(event.keyCode==13){

          $("#actionForm").submit();

          return true;

          }

          return false;

          })

          });

          </script>

          <form id="actionForm" action="../index.html">

          登錄名:<input id="txtLoginName" /><br />

          密碼:<input type="password" />

          <input type="button" value="登錄" />

          </form>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18

          3) 表單事件

          focus:獲得焦點(diǎn)時(shí)觸發(fā)

          blur:失去焦點(diǎn)

          select:文本選中時(shí)觸發(fā)

          • 1
          • 2
          • 3
          • 4
          • 5

          <script type="text/javascript">

          $(function(){

          //文本框獲得焦點(diǎn)時(shí),將當(dāng)前文本框的內(nèi)容清空(值等于"請(qǐng)輸入登錄名..")

          //文本框失去焦點(diǎn)時(shí),判斷內(nèi)容是否為"請(qǐng)輸入登錄名.."或是否為空,那么將這個(gè)值"請(qǐng)輸入登錄名.."設(shè)回到文本框

          $("#txtLoginName").focus(function(){

          if($(this).val()=='請(qǐng)輸入登錄名...'){

          $(this).val('');//清空內(nèi)容

          }

          }).blur(function(){

          if($(this).val().trim()==''){

          $(this).val('請(qǐng)輸入登錄名...');//清空內(nèi)容

          }

          });

          });

          </script>

          <form id="actionForm" action="../index.html">

          登錄名:<input id="txtLoginName" value="請(qǐng)輸入登錄名..." /><br />

          密碼:<input type="password" />

          <input type="button" value="登錄" />

          </form>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22

          4)其它事件

          bind():綁定事件

          unbind():移除綁定事件

          • 1
          • 2
          • 3
          • 4

          <script type="text/javascript">

          $(function(){

          //綁定單個(gè)事件

          // $("#btn1").bind('click',function(){

          // alert("OK");

          // });

          //綁定多個(gè)事件

          $("#btn1").bind({

          mouseover:function(){

          alert("鼠標(biāo)懸念");

          },

          mouseout:function(){

          alert("鼠標(biāo)移出");

          }

          })

          //解除綁定事件

          $("#btn2").click(function(){

          //$("#btn1").unbind("click");//解除綁定的單個(gè)事件

          $("#btn1").unbind("mouseover mouseout");//解除多個(gè)綁定的事件,用空格分隔

          //$("#btn1").unbind();//解除所有綁定的事件

          });

          });

          </script>

          <input type="button" id="btn1" value="點(diǎn)我" /><br />

          <input type="button" id="btn2" value="解除綁定" />

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26

          hover():相當(dāng)于mouseover和mouseout的組合

          • 1
          • 2

          .abc{

          background-color: #aaa;

          }

          </style>

          <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

          <script type="text/javascript">

          $(function(){

          // $("#nav li").mouseover(function(){

          // $(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式

          // }).mouseout(function(){

          // //$(this).removeClass() //當(dāng)鼠標(biāo)移出時(shí)刪除所有樣式

          // $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式

          // });

          $("#nav li").hover(

          function(){

          $(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式

          },

          function(){

          $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式

          }

          );

          });

          </script>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25

          togger():

          a) 鼠標(biāo)連續(xù)點(diǎn)擊

          b) 顯示和隱藏

          • 1
          • 2
          • 3
          • 4

          <script type="text/javascript">

          $(function(){

          //點(diǎn)擊當(dāng)前頁(yè)面時(shí)顯示紅綠藍(lán)的背景色

          $("body").toggle(

          function(){

          $(this).css("background-color","red");

          },

          function(){

          $(this).css("background-color","green");

          },

          function(){

          $(this).css("background-color","blue");

          }

          );

          });

          </script>

          </head>

          <body>

          測(cè)試

          </body>

          大網(wǎng)站常用的頁(yè)面加載動(dòng)畫

          一、使用場(chǎng)景

          經(jīng)常見(jiàn)到某些網(wǎng)站的動(dòng)畫是在屏幕顯示到當(dāng)前元素的時(shí)候,會(huì)有個(gè)過(guò)渡動(dòng)畫。

          頁(yè)面在向下滾動(dòng)的時(shí)候,有些元素會(huì)產(chǎn)生細(xì)小的動(dòng)畫效果。雖然動(dòng)畫比較小,但卻能吸引你的注意

          使用wow.js和Animate.css,實(shí)現(xiàn)各大網(wǎng)站常用的頁(yè)面加載動(dòng)畫

          1.wow.js

          實(shí)現(xiàn)了在網(wǎng)頁(yè)滾動(dòng)時(shí)的動(dòng)畫效果,有漂亮的動(dòng)畫效果,依賴于Animate.css。

          2.Animate.css

          非常優(yōu)秀的CSS3動(dòng)畫庫(kù),不依賴于jQuery,純CSS動(dòng)畫

          二、使用方法

          1,下載文件

          animate.css 下載地址: 網(wǎng)址前綴+daneden.github.io/animate.css/

          wow.min.js 下載地址: 網(wǎng)址前綴+www.downyi.com/downinfo/37040.html#address

          2,引入文件

          <link rel="stylesheet" href="css/animate.css" rel="external nofollow" >

          <script src="js/wow.min.js"></script>

          3、HTML

          <div class="wow slideInLeft"></div>

          <div class="wow slideInRight"></div>

          可以加入 data-wow-duration(動(dòng)畫持續(xù)時(shí)間)和 data-wow-delay(動(dòng)畫延遲時(shí)間)

          屬性,如:

          <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>

          <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>

          4、JavaScript

          new WOW().init();

          要自定義配置,可如下使用:

          var wow = new WOW({

          boxClass: 'wow',

          animateClass: 'animated',

          offset: 0,

          mobile: true,

          live: true

          });

          wow.init();

          三、兼容性

          四、配置屬性

          過(guò) jQuery,可以很容易地添加新元素/內(nèi)容。


          添加新的 HTML 內(nèi)容

          我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法:

          • append() - 在被選元素的結(jié)尾插入內(nèi)容

          • prepend() - 在被選元素的開(kāi)頭插入內(nèi)容

          • after() - 在被選元素之后插入內(nèi)容

          • before() - 在被選元素之前插入內(nèi)容


          jQuery append() 方法

          jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。

          實(shí)例

          $("p").append("追加文本");


          jQuery prepend() 方法

          jQuery prepend() 方法在被選元素的開(kāi)頭插入內(nèi)容。

          實(shí)例

          $("p").prepend("在開(kāi)頭追加文本");


          通過(guò) append() 和 prepend() 方法添加若干新元素

          在上面的例子中,我們只在被選元素的開(kāi)頭/結(jié)尾插入文本/HTML。

          不過(guò),append() 和 prepend() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) jQuery 來(lái)生成文本/HTML(就像上面的例子那樣),或者通過(guò) JavaScript 代碼和 DOM 元素。

          在下面的例子中,我們創(chuàng)建若干個(gè)新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) append() 方法把這些新元素追加到文本中(對(duì) prepend() 同樣有效):

          實(shí)例

          functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}


          jQuery after() 和 before() 方法

          jQuery after() 方法在被選元素之后插入內(nèi)容。

          jQuery before() 方法在被選元素之前插入內(nèi)容。

          實(shí)例

          $("img").after("在后面添加文本"); $("img").before("在前面添加文本");


          通過(guò) after() 和 before() 方法添加若干新元素

          after() 和 before() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建新元素。

          在下面的例子中,我們創(chuàng)建若干新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) after() 方法把這些新元素插到文本中(對(duì) before() 同樣有效):

          實(shí)例

          functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素vartxt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 免费看无码自慰一区二区| 消息称老熟妇乱视频一区二区| 日本中文字幕一区二区有码在线| 日本精品高清一区二区2021| 亚洲AV午夜福利精品一区二区| 国产精品久久亚洲一区二区 | 丰满岳妇乱一区二区三区| 亚洲一区免费观看| 日韩人妻无码一区二区三区久久99| 精品国产鲁一鲁一区二区| 久久国产精品一区二区| 乱色熟女综合一区二区三区| 免费在线视频一区| 日本免费一区二区三区最新vr| 国产日韩精品视频一区二区三区 | 亚洲av无码一区二区三区四区| 亚洲av无码一区二区三区乱子伦 | 鲁大师成人一区二区三区| 日韩美女在线观看一区| 日韩在线一区二区三区视频| 国产成人精品一区二区A片带套 | 91精品国产一区二区三区左线| 日本高清不卡一区| 无码国产精品一区二区免费vr| 免费观看一区二区三区| 国产成人AV一区二区三区无码| 亚洲乱色熟女一区二区三区丝袜| 国产视频一区二区在线播放| 亚欧色一区W666天堂| 色偷偷av一区二区三区| 精品欧洲av无码一区二区14| 亚洲一区二区三区在线观看网站| 亚洲AV成人一区二区三区观看 | 精品成人一区二区三区四区| 亚洲国产综合无码一区二区二三区| 无码人妻一区二区三区免费视频| 日本丰满少妇一区二区三区| av在线亚洲欧洲日产一区二区| 久久99国产精品一区二区| 色偷偷一区二区无码视频| 中文字幕日韩精品一区二区三区 |