jQuery知識重構

来源:http://www.cnblogs.com/hewasdrunk/archive/2017/08/16/7372603.html
-Advertisement-
Play Games

jQuery知識重構 目錄： 一、入口函數 1 $(document).ready(function(){}); 2 $(function(){}); jQuery入口函數與js入口函數的區別： jQuery的入口函數是在 html所有標簽都載入之後，就會去執行。 Js的window.onload事 ...


jQuery知識重構

目錄：

 

 

 

 

一、入口函數

1          $(document).ready(function(){});

2          $(function(){});

jQuery入口函數與js入口函數的區別：

jQuery的入口函數是在 html所有標簽都載入之後，就會去執行。

Js的window.onload事件是等到所有內容，包括外部圖片之類的文件載入完後，才會執行

二、jQuery選擇器

1.基本選擇器

 2.層級選擇器

 

3.過濾選擇器

 

4.屬性選擇器

 

5.篩選選擇器

 

三、jQuery動畫

 

顯示/隱藏

1          $(selector).show(speed,callback);

2          $(selector).hide(speed,callback);

3          $(selector).toggle(speed,callback);

speed：隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒

callback：隱藏或顯示完成後所執行的函數

滑動

1          $(selector).slideDown(speed,callback);

2          $(selector).slideUp(speed,callback);

3          $(selector).slideToggle(speed,callback);

淡入淡出

1          $(selector).fadeIn(speed,callback);

2          $(selector).fadeOut(speed,callback);

3          $(selector).fadeToggle(speed,callback);

4          $(selector).fadeTo(speed,opacity,callback);

opacity：必選參數，將淡入淡出效果設置為給定的不透明度

自定義動畫

1          $(selector).animate({params},speed,callback);

必需的 params 參數定義形成動畫的 CSS 屬性。

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

操作多個屬性

停止動畫

1          $(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false。

可選的 goToEnd 參數規定是否立即完成當前動畫。預設是 false。

stop(true)              所有動畫不執行

stop(false,true)       動畫立即執行完畢，這種用法使用較多

 

四、jQuery html

操作dom

text() - 設置或獲取所選元素的文本內容

html() - 設置或獲取所選元素的內容（包括 HTML 標記）

val() - 設置或獲取表單欄位的值

attr()- 設置或獲取屬性的值

       有一個參數就是設置，沒有參數就是獲取！

removeAttr ()- 移除屬性

操作樣式

addClass()             給指定的元素添加樣式類名

removeClass()        給指定的元素移除樣式類名

toggleClass ()         給指定的元素切換樣式類名

hasClass ()             判斷是否有樣式類名

操作元素

1.在內部添加

$(“div”).append(node)          // 在div內部元素的結尾追加元素node

node.appendTo(“div”)           // 把node追加到div內部元素的結尾

$(“div”).prepend(node)         // 在div內部元素的開頭追加元素node

node.prependTo(“div”)         // 把node追加到div內部元素的開頭

2.在外部添加

$(“div”).before(node)           // 在div後面添加兄弟節點node

$(“div”).after(node)              // 在div前面添加兄弟節點node

3.刪除

remove() - 刪除被選元素及其子元素（自殺）

empty() - 刪除被選元素的子元素，不包括被選元素！

刪除被選元素的子元素用html(“”)更加高效！

4.複製

clone()- 如果加參數true就是深層複製，會把之前綁定的事件也給複製

replaceWith()-替換節點

 

五、jQuery 尺寸

 

1.寬度和高度

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

 

.height()方法和.css(“height”)的區別：

返回值不同：.height()方法返回的是數字類型(20)； .css(“height”)返回的是字元串類型(20px)

2.坐標值

offset()           //獲取和設置元素在當前視窗的相對偏移，返回的是一個對象，設置值後自動變成相對定位       Object {top: 50, left:8}

position()       //只能獲取元素相對於父親的偏移，返回的是一個對象，不能設置值

獲取值：offset().left     offset().top     position() .left        position() .top

設置值：$("p").offset({left:txtLeft,top:txtTop});

區別：

使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當於最近的一個擁有絕對或者相對定位的父元素的偏移位置。使用position()方法時如果其所有的父元素都為預設定位（static）方式，則其處理方式和offset()一樣，是當前視窗的相對偏移。

使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前視口的偏移。

3.滾動條

scrollTop()     //獲取或者設置垂直方向上到頁面頂端的距離

scrollLeft()     // 獲取或者設置水平方向上到頁面左端的距離

scroll()           // 觸發滾動事件：$(selector).scroll(function(){…});       

 

 六、jQuery 事件綁定機制

 

bind方式              

語法格式：.bind( eventType, [ eventData ], handler )

參數說明

第一個參數：事件類型

第二個參數：傳遞給事件響應方法的數據對象，可以省略。

事件響應方法中獲取數據方式：e.data

第三個參數：事件響應方法  

1     $("p").bind("click",function(e){

2        //事件響應方法

3     });

one方式

語法格式：one( events [, data ], handler )

只綁定一次事件

delegate方式

語法格式：$(selector).delegate( selector, eventType, handler )

語法說明：

第一個參數:selector， 子選擇器

第二個參數：事件類型

第三個參數：事件響應方法 

1          $(".parentBox").delegate("p","click", function(){

2             //為 .parentBox下麵的所有的p標簽綁定事件

3          });

on方式

jQuery1.7版本後，jQuery用on統一了所有的事件處理的方法

語法格式：$(selector).on( events, [ selector ],[ data ], handler )

參數介紹：

第一個參數：events，事件名

第二個參數：selector,類似delegate

第三個參數: 傳遞給事件響應方法的參數

第四個參數：handler，事件處理方法

1          //綁定一個方法

2          $( "#dataTable tbodytr" ).on( "click", function() {

3             console.log( $( this ).text() );

4          });

5           

6          //給子元素綁定事件

7          $( "#dataTable tbody").on( "click", "tr", function() {

8            console.log( $( this ).text() );

9          });

10       

11      //綁定多個事件的方式

12      $( "div.test" ).on({

13         click: function() {

14           $( this ).toggleClass( "active");

15         },

16      mouseenter: function() {

17           $( this ).addClass( "inside" );

18         },

19      mouseleave: function() {

20           $( this ).removeClass( "inside");

21          }

22       });

解綁事件

  • unbind解綁 bind方式綁定的事件( 在jQuery1.7以上被 on和off代替)
    • $(selector).unbind(); //解綁所有的事件
    • $(selector).unbind("click"); //解綁指定的事件
  • undelegate解綁delegate事件
    • $( "p" ).undelegate(); //解綁所有的delegate事件
    • $( "p" ).undelegate( "click" ); //解綁所有的click事件
  • off解綁on方式綁定的事件
    • $( "p" ).off();
    • $( "p" ).off( "click", "**" ); // 解綁所有的click事件，兩個*表示所有
    • $( "body" ).off( "click", "p", foo );

1              案例1：

2              var foo = function() {

3                // Code to handle some kind of event

4              };

5           

6              // ... Now foo will be called whenparagraphs are clicked ...

7              $( "body" ).on("click", "p", foo );

8           

9              // ... Foo will no longer be called.

10          $( "body" ).off("click", "p", foo );

11       

12          案例2：（瞭解）解綁命名空間的方式：

13          var validate = function() {

14            // Code to validate form entries

15          };

16       

17          // Delegate events under the".validator" namespace

18          $( "form" ).on("click.validator", "button", validate );

19       

20          $( "form" ).on("keypress.validator", "input[type='text']", validate );

21       

22          // Remove event handlers in the".validator" namespace

23          $( "form" ).off( ".validator");

觸發事件

簡單事件觸發：$(selector).click();//觸發 click事件

trigger方法觸發事件：$( "#foo" ).trigger( "click" );

triggerHandler觸發事件響應方法，不觸發瀏覽器行為：$("input" ).triggerHandler( "focus" );

event對象的簡介

event.data              //傳遞的額外事件響應方法的額外參數

event.currentTarget      //在事件響應方法中等同於this，當前Dom對象

event.target             //事件觸發源，不一定===this

event.pageX        

event.pageY

event.stopPropagation() //阻止事件冒泡

e.preventDefault();        //阻止預設行為

event.type             //事件類型：click，dbclick...

event.which           //滑鼠的按鍵類型：左1 中2 右3

 

  七、數據緩存：data（）

 

獲取值：$(“div”).data(“index”);

設置值：$(“div”).data(“index”,3);

&  .data()跟.attr() 方法的區別：

1.        獲取數據的時候，attr方法需要傳入參數，data方法可以不傳入參數，這時候獲取到的是一個js對象，即使沒有任何data屬性。

2.        獲取到的數據類型不同，attr方法獲取到的數據類型是字元串(String)，data方法獲取到的是相應的類型。

3.        data方法獲取到數據之後，我們使用一個對象來接收它，那麼就可以直接操作(設置值或獲取值)這個對象，而attr方法不可以。並且通過這種方式，要比.data(key,value)的方式更高效！

4.        data-attribute屬性會在頁面初始化的時候放到jQuery對象，被緩存起來，而attr方法不會。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • TypeScript的使用
    1.TypeScript的下載和安裝 使用npm安裝： npm install -g typescript 註意：如果沒有安裝npm，npm為nodejs管理包，則可以嘗試先安裝nodejs，nodejs中會攜帶安裝npm 2. 使用tsc編譯工具將.ts文件編譯為.js文件 ...
  • HTML&CSS——網站註冊頁面
    1、表單標簽 所有需要提交到伺服器端的表單項必須使用<form></form>括起來！ form 標簽屬性： action,整個表單提交的位置(可以是一個頁面，也可以是一個後臺 java 代碼) method,表單提交的方式(get/post/delete……等 7 種) Get 與 post 提交 ...
  • HTML5語法基礎學習筆記
    1.行間樣式給單獨的標簽添加樣式.<div style="width:100px; height:100px; background-color:red;"></div>優點：比較方便可以即時的添加屬性。缺點：修改屬性非常麻煩、需要一個個去修改。 2.內聯樣式表<style>div{ <!--選擇器 ...
  • JS中的柯里化(currying)
    何為Curry化/柯里化？ curry化來源與數學家 Haskell Curry的名字 （編程語言 Haskell也是以他的名字命名）。 柯里化通常也稱部分求值，其含義是給函數分步傳遞參數，每次傳遞參數後部分應用參數，並返回一個更具體的函數接受剩下的參數，這中間可嵌套多層這樣的接受部分參數函數，直至 ...
  • [js高手之路] 設計模式系列課程 - 迭代器(1)
    迭代器是指通過一種形式依次遍曆數組，對象，或者類數組結構中的每個元素. 常見的有jquery中的each方法, ES5自帶的forEach方法. 下麵我們就來自定義一個類似jquery或者ES5的迭代器方法 輸出結果： ["zhangsan", "lisi", "ghostwu"] "zhangsa ...
  • 本地存儲與地理信息
    所用move.js ...
  • jQuery的時間datetime控制項在AngularJs中使用實例
    百度一下，自己也想了一下，有一種簡單,無腦的方式分享給你： <input ng-model="start" id="start" placeholder="開始日期" style="width:156px;" class="form-control date-picker" data-date-fo ...
  • java與javascript對cookie操作的工具類
    Java對cookie的操作 package cn.utils; import java.util.HashMap; import java.util.Map; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類