jQuery功能函數(shù)詳解
在javascript編程中，開發(fā)者通常需要編寫很多小程序來實現(xiàn)一些特定的功能。例如瀏覽器檢測，字符串處理、數(shù)組的編輯等。jQuery對這些常用的程序進(jìn)行了總結(jié)，提供了很多實用的函數(shù)。
1.檢測瀏覽器。
jQuery通過$.browser對象獲取瀏覽器信息。
屬性 說明
msie 如果是ie為true,否則為false
mozilla 如果是mozilla相關(guān)的瀏覽器為true，否則為false
safari 如果是Safari瀏覽器為true,否則為false
poera 如果是opera瀏覽器為true,否則為false
version 瀏覽器的版本號
在使用時，開發(fā)者可以直接調(diào)用這些屬性來獲取瀏覽器屬性。如下：
<script type="text/javascript">
$(function() {
function detect() {
if ($.browser.msie)
return "IE";
if ($.browser.mozilla)
return "Mozilla";
if ($.browser.safari)
return "Safari";
if ($.browser.opera)
return "Opera";
}
var sBrowser = detect();
document.write("您的瀏覽器是：" + sBrowser + "<br>版本為：" + $.browser.version)
});
</script>
2.盒子模型
在jQuery中提供了$.boxModel對象來檢測目前所遵循的盒子模型。它是一個布爾值，當(dāng)為true時，表示遵循w3c標(biāo)準(zhǔn)盒子模型，如果false則為ie的盒子模型
var sBox = $.boxModel ? "標(biāo)準(zhǔn)W3C" : "IE";
document.write("您的頁面目前支持：" + sBox + "盒子模型");
3.處理javascript對象。
在javascript編程中，可以說一切變量都是對象，例如字符串，日期和數(shù)值等。
jQuery提供了一些編輯的方法來處理相關(guān)的對象，例如$.trim()函數(shù)(首尾去空格) 函數(shù)就是其中之一
i.使用$each()方法遍歷
前文介紹到each()方法，用于選擇器的中的元素遍歷，同樣對于javascript的數(shù)組和對象，可以使用$.each()方法進(jìn)行遍歷。
$.each(object,fn);
其中，object為需要遍歷的對象，fn為object中每個元素都執(zhí)行的函數(shù)，其中函數(shù)fn可以接受兩個參數(shù)，第一個參數(shù)為數(shù)組元素的序號或者是對象的屬性。第二個參數(shù)為元素或者屬性的值。
例子：用$.each()函數(shù)遍歷數(shù)組和對象
<script type="text/javascript">
var aArray = ["one", "two", "three", "four", "five"];
$.each(aArray, function(iNum, value) {
//征對數(shù)組
document.write("序號" + iNum + "值" + value + "<br>");
});
var oObj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(oObj, function(pro, value) {
//征對對象
document.write("屬性" + pro + "值" + value + "<br>")
});
</script>
從上面的例子可以看到，$.each()對遍歷數(shù)組和對象都十分方便，例如對未知的屬性$.browser,使用$.each進(jìn)行遍歷
$.each($.browser, function(iNum, value) {
//征對數(shù)組
document.write("屬性" + iNum + "值" + value + "<br>");
});
得值：
屬性chrome值true
屬性version值39.0.2171.99
屬性webkit值true
ii.過濾數(shù)據(jù)
對于數(shù)組中的數(shù)據(jù)，很多時候開發(fā)者需要對其進(jìn)行篩選，如果使用純javascript,往往需for循環(huán)進(jìn)行逐一檢查。jQuery提供了$.grep()方法。能夠便捷的過濾數(shù)組的數(shù)據(jù)。
其語法如下：
$.grep(Array,fn,[invert])
其中，array是需要過濾的數(shù)組對象名稱，fn為過濾函數(shù)，對數(shù)組中的每個對象，如果返回true則保留，否則去除。可選的invert為布爾值，如果設(shè)置為true.則函數(shù)fn取反，滿足條件的被去除。
var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
var aResult = $.grep(aArray, function(value) {
return value >= 4;
});
document.write(aResult.join());
首先定義了數(shù)組aArray,然后用$.grep()方法將值大于等于4挑選出來得到新的數(shù)組
例子2，過濾數(shù)組的高級方法。
<script type="text/javascript">
var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
var aResult = $.grep(aArray, function(value, index) {
//元素的值和value和序號同時判斷
return (value >= 4 && index > 3);
});
document.write(aResult.join());
</script>
iii轉(zhuǎn)化數(shù)組
很多時候開發(fā)者希望某個數(shù)組中的元素能夠統(tǒng)一的轉(zhuǎn)化，例如將所有的元素都乘以2.雖然在javascript中例如for循環(huán)可以實現(xiàn)，但是jQuery提供了更為便利的$.map()方法。這個方法如下
$.map(array,fn)
其中，array為要轉(zhuǎn)化的數(shù)組，fn為轉(zhuǎn)化函數(shù)，對數(shù)組中的每一項都執(zhí)行，該函數(shù)同樣可以接受兩個函數(shù)，1個參數(shù)為元素的值。2個參數(shù)為元素的序號，是可選參數(shù)。
<script type="text/javascript">
$(function() {
var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
$("p:eq(0)").text(aArray.join());
aArray = $.map(aArray, function(value, index) {
//將數(shù)組轉(zhuǎn)化為大寫并添加了序號
return (value.toUpperCase() + index);
});
$("p:eq(1)").text(aArray.join());
cArray = $.map(aArray, function(value) {
return value + value;
});
$("p:eq(2)").text(cArray.join());
});
</script>
<p></p>
<p></p>
<p></p>
執(zhí)行結(jié)果
a,b,c,d,e,f,g,h,i
A0,B1,C2,D3,E4,F5,G6,H7,I8
A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8
使用$.map()函數(shù)進(jìn)行轉(zhuǎn)移后，數(shù)組長度不一定與原來的數(shù)組相同?？梢酝ㄟ^設(shè)置null來刪除數(shù)組的元素。
<script type="text/javascript">
$(function() {
var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
$("p:eq(0)").text(aArray.join());
$("p:eq(1)").text("aArray長度：" + aArray.length + "值:" + aArray.join());
cArray =$.map(aArray,function(value){
//比1大的+1后返回，否則通過設(shè)置為null將其刪除
return value>1?value+1:null;
});
$("p:eq(2)").text("cArray長度：" + cArray.length + "值:" + cArray.join());
});
</script>
<p></p>
<p></p>
<p></p>
除了刪除元素外，$.map轉(zhuǎn)化數(shù)組時同樣可以增加數(shù)組元素。
<script type="text/javascript">
$(function() {
var aArray = ["one", "two", "three", "four", "five"];
$("p:eq(0)").text(aArray.join());
cArray =$.map(aArray,function(value){
return value.split("");
});
$("p:eq(1)").text("cArray長度：" + cArray.length + "值:" + cArray.join());
});
</script>
<p></p>
<p></p>
執(zhí)行結(jié)果
one,two,three,four,five
cArray長度：19值:o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e
以上代碼在$.map轉(zhuǎn)化過程中，split("")方法將元素拆分為一個個字母
iiii搜索數(shù)組元素
對于字符串，可以通過indexOf()來搜索特定字符所處的位置，對于數(shù)組元素，javascript沒有提供類似的方法。在jQ中，$.inArray()函數(shù)可以很好的數(shù)組元素的搜索功能。語法如下：
$.inArray(value,array)
其中，value為希望查找的對象，array為數(shù)組本身，如果找到了則返回第一個匹配元素在數(shù)組的位置。如果沒有則返回-1.
<script type="text/javascript">
$(function() {
var aArray = ["one", "two", "three", "four", "five"];
var cx1 = $.inArray("two", aArray);
var cx2 = $.inArray("www", aArray);
$("p:eq(0)").text(cx1);
$("p:eq(1)").text(cx2);
});
</script>
<p></p>
<p></p>
4.獲取外部代碼
在一些較大工程中，開發(fā)者將不同的js放在不同的js文件中，有時根據(jù)補(bǔ)貼的需求加載不同的代碼。jQuery提供了$.getScript()實現(xiàn)外邊的代碼加載。使用方法如：
$.getScript(url,[callback])
其中，url為外部資源的地址，可以是相對的，也可以是絕對的地址。callback為加載成功后的回調(diào)函數(shù)，可選。
<script type="text/javascript">
$(function() {
$("p:eq(0)").click(function() {
$.getScript("1.js");
});
$("p:eq(1)").click(function() {
textfun();
});
});
</script>
<p>點擊1</p>
<p>點擊2</p>
其中1.js代碼為
alert("加載ok！")
function textfun(){
alert("testfun")
};
相關(guān)文章
jQuery簡單實現(xiàn)iframe的高度根據(jù)頁面內(nèi)容自適應(yīng)的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)iframe的高度根據(jù)頁面內(nèi)容自適應(yīng)的方法,給出了2種簡單實現(xiàn)方法,涉及jQuery針對頁面高度的動態(tài)獲取與設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08
8個超棒的學(xué)習(xí) jQuery 的網(wǎng)站 推薦收藏
根據(jù)國外科技網(wǎng)站 W3Techs 一項調(diào)查了近100萬個網(wǎng)站數(shù)據(jù)顯示，jQuery是目前最流行的 JavaScript 庫。2011-04-04
利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理
做WEB前端開發(fā)的人都知道不同的瀏覽器對事件的處理方式是有區(qū)別的。2009-12-12
jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實例形式對比分析了jQuery圖標(biāo)插件echarts針對垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03
基于jquery的網(wǎng)頁SELECT下拉框美化代碼
基于CSS 和JS的網(wǎng)頁SELECT下拉框美化,JQUERY 插件，最近為公司的網(wǎng)頁制做部，開發(fā)了一個用于美化網(wǎng)頁上select 下拉框的JQUERY插件，拿來與大家分享。2010-10-10
這篇文章主要和大家談一談jQuery核心架構(gòu)設(shè)計，什么是jQuery核心架構(gòu)設(shè)計，多方面了解jQuery核心架構(gòu)設(shè)計，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了jQuery表格(Table)基本操作,結(jié)合實例形式分析了jQuery針對表格常見的樣式、屬性及增刪行等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
回車執(zhí)行跳到下一個文本框，在本文通過jquery簡單實現(xiàn)下，需要的朋友可以參考下2013-08-08
這篇文章主要介紹了thinkphp 表名 大小寫 竅門,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了jQuery輸入框密碼顯示隱藏代碼的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04