jQuery思維導(dǎo)圖梳理2-創(chuàng)新互聯(lián)

jQuery思維導(dǎo)圖梳理2

慶陽(yáng)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,慶陽(yáng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為慶陽(yáng)千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的慶陽(yáng)做網(wǎng)站的公司定做！

jQuery-Dom操作

jQuery效果:

  • 基本:高和寬都變化

    • hide([毫秒值]):隱藏

    • show([毫秒值]):顯示

    • toggle([毫秒值]):切換

  • 滑入滑出:高變化

    • slideUp([毫秒值]):滑出

    • slideDown([毫秒值]):滑入

    • slideToggle([毫秒值]);切換

  • 淡入淡出:

    • fadeIn([毫秒值]);淡入

    • fadeOut([毫秒值]);淡出

    • fadeToggle([毫秒值]);切換

  • 了解:

    • fadeToggle(毫秒值,[速度],function(){});

    • 以上效果都可以添加一個(gè)回調(diào)函數(shù)

jQuery遍歷

方式1:jQuery的對(duì)象方法

  • 格式: [ele0,ele1,ele2]  $("tr")jq對(duì)象.each(function([index],[dom對(duì)象]){   對(duì)遍歷到每個(gè)元素的操作 });

方式2:全局函數(shù)

  • 格式:$.each(要遍歷的對(duì)象,function([index],[dom對(duì)象]){});

方式3: 新特性

  • 格式:  for of

    • for(var 變量 of 被遍歷的對(duì)象){}

jQuery的事件總結(jié)

常見(jiàn)事件

  • 頁(yè)面加載成功事件★

    • $(function(){})

    • $(document).ready(function(){})

  • submit 表單提交事件★

  • focus 獲得焦點(diǎn)事件  ★

  • blur  失去焦點(diǎn)  ★

  • change  改變 ★

  • click  單擊 ★

  • dblclick 雙擊

  • keydown  鍵盤(pán)按下

  • keyup  鍵盤(pán)彈起

  • keypress 按住

  • mousedown  鼠標(biāo)按下

  • mouseup  鼠標(biāo)彈起

  • mousemove  鼠標(biāo)移入

  • mouseout  鼠標(biāo)移出

  • mouseover  鼠標(biāo)懸停

事件和事件源的綁定  ★

  • 派發(fā)事件

    • jq對(duì)象.事件名稱(function(){});

  • jQuery的事件綁定與解綁

    • jQuery對(duì)象.off("事件名稱")如果不給名稱,解綁所有

    • jQuery對(duì)象.on("事件名稱",function(){})

    • on綁定事件

    • off解綁事件

事件切換

  • hover:相當(dāng)于給一個(gè)元素添加了mouseover和mouseout兩個(gè)事件jq元素對(duì)象.hover(function(){ //第一個(gè)函數(shù)相當(dāng)于mouseover},function(){ //第二個(gè)函數(shù)相當(dāng)于mouseout});

jQuery插件

插件: 實(shí)現(xiàn)了指定功能的代碼片段

jq對(duì)象.text()

val()

html()

以上方法都是jq為我們實(shí)現(xiàn)定義好的,我們直接使用即可.

我們可以模仿jq,定義我們自己的方法

插件機(jī)制

  • jQuery插件機(jī)制概述

    • jQuery插件的機(jī)制很簡(jiǎn)單，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，擴(kuò)展jQuery的功能.

  • jQuery插件機(jī)制語(yǔ)法

    • jQuery.fn.extend(object)   對(duì)jQuery對(duì)象進(jìn)行方法擴(kuò)展

 jQuery.fn.extend({

  "check":function(){

   return this.each(function (index,ele) {

    ele.checked = true;

   });

  },

  "自定義方法名稱":function () {

   // 處理對(duì)象的邏輯

   return this.each(function (index,ele) {

    ele.checked = false;

   });

  }

 });

jQuery.extend(object)     對(duì)jQuery全局進(jìn)行方法擴(kuò)展

jQuery.extend({

 "min":function (i,j) {

  return i>j?j:i;

 },

 "max":function (i,j) {

  return i>j?i:j;

 }

});

validate插件

插件:指的就是別人已經(jīng)寫(xiě)好的功能代碼,直接引入使用即可.

  • 作用:對(duì)表單進(jìn)行校驗(yàn)

  • 下載:   下載路徑:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

  • 使用方式:

    • 方式1:name屬性的值:"提示信息"

    • 方式2: name屬性的值:{ 校驗(yàn)器1:"提示信息1", 校驗(yàn)器2:"提示信息2" }

    • 方式1:單一校驗(yàn)name屬性的值:"校驗(yàn)器"

    • 方式2:多個(gè)校驗(yàn) name屬性的值:{ 校驗(yàn)器1:值1, 校驗(yàn)器2:值2 }

    • 1.導(dǎo)入jquery.jsvalidate是基于jquery寫(xiě)的,所以要先導(dǎo)入jquery的js文件

    • 2.再導(dǎo)入validate.js想要使用別人的插件就必須的導(dǎo)入人家已經(jīng)寫(xiě)好的js文件(插件)

    • 3.在頁(yè)面加載成功后,要確定對(duì)頁(yè)面上的哪個(gè)表單進(jìn)行校驗(yàn) $(function(){ 表單對(duì)象.validate(); });

    • 4.validate使用格式: 表單對(duì)象.validate({ rules:{}, //校驗(yàn)規(guī)則 messages:{} //提示信息 });

    • 5.常見(jiàn)的校驗(yàn)規(guī)則

      校驗(yàn)器名稱值描述
      requiredtrue|false必須填寫(xiě)
      numbertrue|false只能輸入數(shù)字
      min數(shù)字最小值
      max數(shù)字大值
      range[min,max]取值范圍
      minlength數(shù)字最小長(zhǎng)度
      maxlength數(shù)字大長(zhǎng)度
      rangelength[minlength,maxlength]長(zhǎng)度范圍
      equalTo通過(guò)jQuery選擇器選中指定元素對(duì)象和誰(shuí)相等(重復(fù)密碼)
      email"email"校驗(yàn)郵箱
      datetrue校驗(yàn)日期
      dateISOtrue校驗(yàn)日期格式xxxx-xx-xx  xxxx/xx/xx

    • 6.rules校驗(yàn)器語(yǔ)法:

    • 7.messages自定義提示信息語(yǔ)法:

  • 自定義校驗(yàn)器

    • $.validator.addMethod(name,function(value,element,params){},"message");

    • 參數(shù)說(shuō)明:

    • value:用戶輸入的值

    • element:要校驗(yàn)的dom對(duì)象

    • params:校驗(yàn)器的值

    • name:校驗(yàn)器的名稱,唯一

    • function:校驗(yàn)規(guī)則

    • message:當(dāng)不滿足校驗(yàn)規(guī)則時(shí)的提示信息

    • 格式:

// 自定義校驗(yàn)器

// 格式:

$.validator.addMethod(name,function(val,ele,param){},"message");

name: 自定義校驗(yàn)器的名稱

    function: 完成校驗(yàn)的邏輯,滿足返回true,不滿足返回false(默認(rèn))

val: 輸入框中的值

      ele: 被校驗(yàn)的輸入框?qū)ο?js對(duì)象)

param: 校驗(yàn)器的值

message: 提示信息

案例

案例1-定時(shí)彈出廣告

需求分析:

頁(yè)面加載成功5秒后,彈出一個(gè)廣告,廣告事件3秒鐘,3秒后廣告消失.

  技術(shù)分析:

頁(yè)面加載成功事件:

$(function(){});

定時(shí)器:

setTimeout(函數(shù)名,5000);

效果:

show()

      hide()

  步驟分析:

1.確定事件

頁(yè)面加載成功事件

      $(function(){

       // 設(shè)置一個(gè)單次執(zhí)行定時(shí)器

       setTimeout(showAd,5000);

      });

2.編寫(xiě)showAd函數(shù)

     function showAd(){

     //a.展示廣告

     // 讓存放廣告的div顯示

     //b.設(shè)置單次執(zhí)行定時(shí)器計(jì)時(shí)

     setTimeout(hideAd,3000);

     }

     3.編寫(xiě)hideAd函數(shù)

     function showAd(){

     // 隱藏廣告div

     }

案例2-抽獎(jiǎng)小程序

需求分析:

當(dāng)頁(yè)面加載成功后,讓"點(diǎn)擊停止"按鈕失效,"點(diǎn)擊開(kāi)始"按鈕有效.

  當(dāng)點(diǎn)擊"點(diǎn)擊開(kāi)始"按鈕時(shí)

   讓"點(diǎn)擊開(kāi)始"按鈕失效,讓"點(diǎn)擊停止"按鈕生效

   小圖片開(kāi)始輪播

  當(dāng)點(diǎn)擊"點(diǎn)擊停止"按鈕時(shí)

   讓"點(diǎn)擊停止"按鈕失效,讓"點(diǎn)擊開(kāi)始"按鈕生效

   讓輪播圖停止輪播

   讓選中的小圖2秒后展示到大圖區(qū)域.

技術(shù)分析:

頁(yè)面加載成功事件

操作標(biāo)簽的屬性: disabled

周期執(zhí)行定時(shí)器:

var interId = setInterval(函數(shù),毫秒值);

clearInterval(interId);

步驟分析:

1.當(dāng)頁(yè)面加載成功后,讓"點(diǎn)擊停止"按鈕失效,"點(diǎn)擊開(kāi)始"按鈕有效.

  2.當(dāng)點(diǎn)擊"點(diǎn)擊開(kāi)始"按鈕時(shí)

   讓"點(diǎn)擊開(kāi)始"按鈕失效,讓"點(diǎn)擊停止"按鈕生效

   小圖片開(kāi)始輪播

  3.當(dāng)點(diǎn)擊"點(diǎn)擊停止"按鈕時(shí)

   讓"點(diǎn)擊停止"按鈕失效,讓"點(diǎn)擊開(kāi)始"按鈕生效

   讓輪播圖停止輪播

   讓選中的小圖2秒后展示到大圖區(qū)域.

總結(jié):

DOM:

效果:

基本效果:

hide show toggle

    滑入滑出:

slideUp slideDown slideToggle

    淡入淡出:

fadeIn fadeOut fadeToggle

遍歷:

jq對(duì)象.each(function(index,ele){});

$.each(被遍歷的對(duì)象,function(index,ele){});

for of

     for(var 變量 of 被遍歷的對(duì)象){}

事件總結(jié):

派發(fā)事件:

jq對(duì)象.事件方法(function(){})

綁定事件:

jq對(duì)象.on("事件名",function(){});

解綁事件:

jq對(duì)象.off("事件名");

如果不給值,那么會(huì)解綁所有事件

事件切換:

jq對(duì)象.hover(function(){},function(){});

插件:

插件擴(kuò)展機(jī)制:

jq對(duì)象的方法:

      $.fn.extend({

        "函數(shù)名":function(){

          // 如果在這里使用 this ,this代表的是jq對(duì)象

        },

        "函數(shù)名":function(){

          // 如果在這里使用 this ,this代表的是jq對(duì)象

        }

      });

全局方法:

$.extend({

        "函數(shù)名":function(i,j){

          return 值;

        },

        "函數(shù)名":function(){

        }

      });

validate插件:

使用步驟:

1.導(dǎo)入jq的js文件

      2.導(dǎo)入validate的js文件

      3.在頁(yè)面加載成功后,鎖定被校驗(yàn)的表單對(duì)象

        表單對(duì)象.validate({

//4.校驗(yàn)規(guī)則

          rules:{

            name屬性的值:"校驗(yàn)器",

            name屬性的值:{

              校驗(yàn)器:值,

              校驗(yàn)器:值

            }

          },

          //5.提示信息

          messages:{

            name屬性的值:"提示信息",

            name屬性的值:{

              校驗(yàn)器:提示信息,

              校驗(yàn)器:提示信息

            }

          }

        });

自定義校驗(yàn)器:

    $.validator.addMethod("校驗(yàn)器名稱",function(val,ele,params){

返回值 boolean值

    },"默認(rèn)提示信息");

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱：jQuery思維導(dǎo)圖梳理2-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://muchs.cn/article10/dsidgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、外貿(mào)建站、微信小程序、小程序開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名