首頁 > web前端 > 前端問答 > jquery中的工具函數有哪些類別

jquery中的工具函數有哪些類別

WBOY
發布: 2022-06-08 11:05:54
原創
1735 人瀏覽過

jquery中的工具函數類別:1、陣列和物件的操作,例如「$.each()」函數遍歷陣列、「grep()」函數資料篩選;2、字串操作,例如“ $.trim()」函數會移除空格符;3、測試操作,例如「$.contains()」函數偵測DOM節點;4、URL操作,例如「$.proxy()」函數綁定事件的作用域; 5.瀏覽器偵測,例如「$.browser」物件的屬性取得。

jquery中的工具函數有哪些類別

本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery中的工具函數

什麼是工具函數

在jQuery中,工具函數是指直接依附於jQuery物件、針對jquery對象本身定義的說法,即全域性的函數,我們統稱為工具函數,或Utilities函數。它們有一個明顯的特徵,一般情況下,採用如下的格式進行呼叫:

$.函数名()或jquery.函数()
登入後複製

工具函數的分類

根據工具函數處理物件的不同,可將其分為下列幾大類別:

  • 瀏覽器的偵測

  • ##陣列與物件的動作

  • 字串運算

  • 測試動作

  • URL運算

#URL運算

瀏覽器的偵測

在瀏覽器偵測中,又可分為瀏覽器類型與特徵的偵測,前者取得瀏覽器的名稱或版本信息,後者檢測瀏覽器時候支援標準的W3C盒子模型。

jquery中的工具函數有哪些類別瀏覽器名稱或版本資訊

雖然jquery有很好的瀏覽器相容性,但有時程式開發人員需要取得瀏覽器的相關信息,用於提供使用者或程序,在jquery中,可以透過存取$.browser物件的屬性來取得。 $.browser對象即jQuery.browser對象,用於處理與瀏覽器相關的事務,該對象的屬性如下:

##盒子模型

盒子模型是CSS中的專屬名詞,用以描述頁面設定中的各種屬性

jquery中的工具函數有哪些類別W3C盒子模型的width和height不包含padding和border

IE盒子模型width和height包含padding和borderjquery中的工具函數有哪些類別

$.support.boxModel 屬性  為true 為W3C盒子模型,否則為IE盒子模型

陣列和物件的運算

1)遍歷陣列

使用$.each()工具函數,不僅可以實現頁面中元素的遍歷,也可以完成指定數組的遍歷,其調用的語法格式如下:

  $.each(obj,fn(para1,para2))
登入後複製

其中參數obj,表示要遍歷的數組或對象,fn為每個遍歷元素執行的回調函數,函數包含兩個參數,para1表示陣列的序號或物件的屬性,para2表示陣列的元素和物件的屬性。

 2)遍歷物件

$.each()函數除了遍歷陣列外,還可以遍歷對象,取得物件的屬性和值。

3)資料篩選

在操作數組時,有時需要根據各種條件篩選元素,傳統的JavaScript程式碼將遍歷整個數組,在遍歷中設定篩選規則的元素。而在jQuery中使用grep(),格式如下:

$.grep(array,function(elementOfArray,indexInArray),[invert])
登入後複製

其中,參數array為要篩選的原數組,回調函數fn中可以設定兩個參數,其中elementOfArray為數組中的元素,indexInArray為元素在數組中的序號;另外,可選項[invert]為布林值,表示是否根據fn的規則取反向結果,預設值為false,表示不取反,如果為true,表示取反,即返回與回調函數fn規則相反的資料。

條件  卸載fn的return中,例如:ele >5 &&  index <8

4) 資料變更

依指定條件修改陣列中的所選元素,

$.map(array,fn(eleArr,indexArr))
登入後複製

其中,參數array為要變更的原始數組,在回呼函數fn中可以設定兩個參數,其中eleArr為數組中的元素,indexArr為元素在數組中的序號。

5) 資料搜尋

在jQuery中,如果要在陣列中搜尋某個元素,可以使用工具函數$.inArray(),該方法相當於用JavaScript中的indexOf( )搜尋字串中的某個字元。在工具函數$.inArray()中,如果找到了指定的某個元素,則傳回該元素在陣列中的索引號,否則,傳回-1值。其呼叫格式如下:

$.inArray(value,array)
登入後複製
其中,參數value表示要搜尋的對象,array表示搜尋對象的陣列。

字串運算子

######如果要除掉字元中左右兩邊的空格符,可以使用工具函數$.trim()。 ###
$.trim(str)
登入後複製
###測試操作###

jquery中的工具函數有哪些類別

原始对象:即对象是否通过{}或 new Object()关键字创建

$.contains()函数

$.contains()函数用于检测在一个DOM节点中是否包含另外一个DOM节点,其语法如下:

$.contains(container,contained)
登入後複製

其中:参数container为Object,是一个DOM元素,作为容器,可以包含其他DOM元素;参数contained也是一个DOM是一个节点,可能被其他元素包含。整个函数返回一个布尔值,如果包含返回true,否则返回false。

URL操作

$.param(obj,[traditional])
登入後複製

其中:参数obj表示需要进行序列化的对象,该对象可以是数组、jQuery元素、普通对象;可选项参数[traditional],表示是否使用普通话的方式浅层序列化,该函数返回一个序列化,该函数返回一个序列化后的字符串。

$.extend()扩展工具函数

$.proxy()函数 改变绑定事件的作用域

视频教程推荐:jQuery视频教程

以上是jquery中的工具函數有哪些類別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板