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

jQuery-Dom操作

jQuery效果:

• 基本:高和寬都變化

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

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

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

• 滑入滑出:高變化

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

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

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

• 淡入淡出:

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

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

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

• 了解:

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

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

jQuery遍歷

方式1:jQuery的對象方法

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

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

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

方式3: 新特性

• 格式:  for of

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

jQuery的事件總結(jié)

常見事件

• 頁面加載成功事件★

• $(function(){})

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

• submit 表單提交事件★

• focus 獲得焦點事件  ★

• blur  失去焦點  ★

• change  改變 ★

• click  單擊 ★

• dblclick 雙擊

• keydown  鍵盤按下

• keyup  鍵盤彈起

• keypress 按住

• mousedown  鼠標(biāo)按下

• mouseup  鼠標(biāo)彈起

• mousemove  鼠標(biāo)移入

• mouseout  鼠標(biāo)移出

• mouseover  鼠標(biāo)懸停

事件和事件源的綁定  ★

• 派發(fā)事件

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

• jQuery的事件綁定與解綁

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

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

• on綁定事件

• off解綁事件

事件切換

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

jQuery插件

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

jq對象.text()

val()

html()

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

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

插件機制

• jQuery插件機制概述

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

• jQuery插件機制語法

• jQuery.fn.extend(object)   對jQuery對象進行方法擴展

 jQuery.fn.extend({

  "check":function(){

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

    ele.checked = true;

   });

  },

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

   // 處理對象的邏輯

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

    ele.checked = false;

   });

  }

 });

jQuery.extend(object)     對jQuery全局進行方法擴展

jQuery.extend({

 "min":function (i,j) {

  return i>j?j:i;

 },

 "max":function (i,j) {

  return i>j?i:j;

 }

});

validate插件

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

• 作用:對表單進行校驗

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

• 使用方式:

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

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

• 方式1:單一校驗name屬性的值:"校驗器"

• 方式2:多個校驗 name屬性的值:{ 校驗器1:值1, 校驗器2:值2 }

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

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

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

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

• 5.常見的校驗規(guī)則

  校驗器名稱	值	描述
  required	true|false	必須填寫
  number	true|false	只能輸入數(shù)字
  min	數(shù)字	最小值
  max	數(shù)字	大值
  range	[min,max]	取值范圍
  minlength	數(shù)字	最小長度
  maxlength	數(shù)字	大長度
  rangelength	[minlength,maxlength]	長度范圍
  equalTo	通過jQuery選擇器選中指定元素對象	和誰相等(重復(fù)密碼)
  email	"email"	校驗郵箱
  date	true	校驗日期
  dateISO	true	校驗日期格式xxxx-xx-xx  xxxx/xx/xx

• 6.rules校驗器語法:

• 7.messages自定義提示信息語法:

• 自定義校驗器

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

• 參數(shù)說明:

• value:用戶輸入的值

• element:要校驗的dom對象

• params:校驗器的值

• name:校驗器的名稱,唯一

• function:校驗規(guī)則

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

• 格式:

// 自定義校驗器

// 格式:

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

name: 自定義校驗器的名稱

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

val: 輸入框中的值

      ele: 被校驗的輸入框?qū)ο?js對象)

param: 校驗器的值

message: 提示信息

案例

案例1-定時彈出廣告

需求分析:

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

  技術(shù)分析:

頁面加載成功事件:

$(function(){});

定時器:

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

效果:

show()

      hide()

  步驟分析:

1.確定事件

頁面加載成功事件

      $(function(){

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

       setTimeout(showAd,5000);

      });

2.編寫showAd函數(shù)

     function showAd(){

     //a.展示廣告

     // 讓存放廣告的div顯示

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

     setTimeout(hideAd,3000);

     }

     3.編寫hideAd函數(shù)

     function showAd(){

     // 隱藏廣告div

     }

案例2-抽獎小程序

需求分析:

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

  當(dāng)點擊"點擊開始"按鈕時

   讓"點擊開始"按鈕失效,讓"點擊停止"按鈕生效

   小圖片開始輪播

  當(dāng)點擊"點擊停止"按鈕時

   讓"點擊停止"按鈕失效,讓"點擊開始"按鈕生效

   讓輪播圖停止輪播

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

技術(shù)分析:

頁面加載成功事件

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

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

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

clearInterval(interId);

步驟分析:

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

  2.當(dāng)點擊"點擊開始"按鈕時

   讓"點擊開始"按鈕失效,讓"點擊停止"按鈕生效

   小圖片開始輪播

  3.當(dāng)點擊"點擊停止"按鈕時

   讓"點擊停止"按鈕失效,讓"點擊開始"按鈕生效

   讓輪播圖停止輪播

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

總結(jié):

DOM:

效果:

基本效果:

hide show toggle

    滑入滑出:

slideUp slideDown slideToggle

    淡入淡出:

fadeIn fadeOut fadeToggle

遍歷:

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

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

for of

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

事件總結(jié):

派發(fā)事件:

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

綁定事件:

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

解綁事件:

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

如果不給值,那么會解綁所有事件

事件切換:

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

插件:

插件擴展機制:

jq對象的方法:

      $.fn.extend({

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

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

        },

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

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

        }

      });

全局方法:

$.extend({

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

          return 值;

        },

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

        }

      });

validate插件:

使用步驟:

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

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

      3.在頁面加載成功后,鎖定被校驗的表單對象

        表單對象.validate({

//4.校驗規(guī)則

          rules:{

            name屬性的值:"校驗器",

            name屬性的值:{

              校驗器:值,

              校驗器:值

            }

          },

          //5.提示信息

          messages:{

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

            name屬性的值:{

              校驗器:提示信息,

              校驗器:提示信息

            }

          }

        });

自定義校驗器:

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

返回值 boolean值

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

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

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

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

廣告

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