jQuery實用函數用法總結，jquery函數用法

jQuery實用函數用法總結，jquery函數用法

本文以執行個體的形式總結了jQuery的常見實用函數。分享給大家供大家參考之用。具體樣本如下：

1.修剪字串

$('#id').val($.trim($('#someid').val()))

 

2.遍曆集合

可能這樣寫：

var anArray = ['one','two'];for(var n = 0; n < anArray.length; n++){  }

還有可能這樣寫：

var anObject = {one: 1, two: 2};for(var p in anObject){  }

但有了$.each函數後，就可以這樣寫了：

var anArray = ['one','two'];$.each(anArray, funtion(n, value){  })var anObject = {one: 1, two: 2};$.each(anObjct, function(name,value){  })

3.篩選數組

使用$.grep()方法能篩選數組。先來看grep方法的定義：

grep: function(elems, callback, inv){  var ret = [], retVal;  inv = !!inv;  for(var i = 0; length = elems.length; i < length; i++){    retVal = !!callback(elems[i],i)    if(inv !== retVal){      ret.push(elems[i]);    }  }  return ret;}

以上樣本中：
① grep方法的第二個參數是回呼函數，該回呼函數接收2個參數，一個是數組的元素，一個是數組的索引。
② grep方法的第三個參數inv，預設情況下是undefined，所以!!inv為false，即inv的預設值是false

舉例1：int類型數組

var arr = [1, 2, 3, 4, 5, 6];arr = $.grep(arr, function(val, index){  return val > 3;})console.log(arr);//結果是：4 5 6

如果把grep的第三個參數顯式地設定為true，結果怎樣呢？

var arr = [1, 2, 3, 4, 5, 6];arr = $.grep(arr, function(val, index){  return val > 3;}, true)console.log(arr);//結果是：1 2 3

可見，當把grep方法的第三個參數設定為true後，會把不符合回呼函數的數組元素過濾出來。

舉例2：object類型數組

var arr = [  {    first: "Jeffrey",    last: 'Way'  },{    first: 'Allison',    last: 'Way'  },{    first: 'John',    last: 'Doe'  },{    first: 'Thomas',    last: 'Way'  };  arr = $.grep(arr, function(obj, index){    return obj.last === 'Way';  });  console.log(arr);];

4.轉換數組

使用$.map(arr, callback)為數組的每一個元素調用回呼函數，並返回一個新的數組

給數組的每一個元素加1:

var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})

把字串數群組轉換成整型數字數組，判斷數組元素是否是數字：

var strings = ['1', '2', '3','4','S','6'];var values = $.map(strings, function(value){  var result = new Number(value);  return isNaN(result) ? null : result;})

把轉換後的數組合并到原先的數組中：

var chars = $.map(['this','that'], function(value){return value.split(' ')});

5.返回數組元素的索引

使用$.inArray(value, array)返回傳入的值第一次出現的下標，即索引。

var index = $.inArray(2, [1, 2, 3]);

6.將對象轉換成數組

$.makeArray(object)將傳入類似數組的對象轉換成Javascript數組。

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><script>  var elems = document.getElementsByTagName("div");  var arr = jQuery.makeArray(elems);  arr.reverse();  $(arr).appendTo(document.body);</script>

7.得到不含重複元素的數組

使用$.unique(array)返回由原始數組中不重複的元素組成的數組。

<div>There are 6 divs in this document.</div><div></div><div class="dup"></div><div class="dup"></div><div class="dup"></div><div></div>//把到所有div，get方法轉換成javascript數組，總共6個divvar divs = $("div").get();//再把3個class名為dup的div合并到前面的6個divdivs = divs.concat($(".dup").get());alert(divs.length); //9個div//過濾去掉重複divs = jQuery.unqiue(divs);alert(divs.length);//6個div

8.合并2個數組

$.merge(array1, array2)把第二個數組合并到第一個數組中，並返回第一個數組。

var a1 = [1, 2];var a2 = [2, 3];$.merge(a1, a2);console.log(a1);//[1, 2, 2, 3]

9.把對象序列化成查詢字串

$.param(params)把傳入的jquery對象或javascript對象轉換成字串形式。

$(document).ready(function(){ personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue";  $("button").click(function(){  $("div").text($.param(personObj)); });});

結果：firstname=John&lastname=Doe&age=50&eyecolor=blue

10.一些判斷函數

$.isArray(o) 如果o是javascript數組，則返回true,如果是類似數組的jquery對象數組，返回false
$.isEmptyObject(o) 如果o是不包含屬性的javascript對象，則返回true
$.isFunction(o) 如果o是javascript函數就返回true
$.isPlainObject(o) 如果o是通過{}或new Object()建立的對象，則返回true
$.isXMLDoc(node) 如果node是XML文檔或者是XML文檔中的節點，則返回true

11.判斷一個元素是否包含在另外一個元素中

$.contains(container, containee)第二個參數是被包含

$.contains( document.documentElement, document.body ); // true$.contains( document.body, document.documentElement ); // false

12.把值儲存到某元素上

$.data(element, key, value)第一個是javascript對象，第二、第三個是索引值。

//得到一個div的javascript對象var div = $("div")[0];//把KVStore for Redis到div上jQuery.data(div, "test",{  first: 16,  last: 'pizza'})//根據鍵讀出值jQuery.data(div, "test").firstjQuey.data(div, "test").last

13.移除儲存到某元素上的值

<div>value1 before creation: <span></span></div><div>value1 after creation: <span></span></div><div>value1 after removal: <span></span></div><div>value2 after removal: <span></span></div>var div = $( "div" )[ 0 ];//儲存值jQuery.data( div, "test1", "VALUE-1" );//移除值jQuery.removeData( div, "test1" );

14.綁定函數的上下文

jQuery.proxy( function, context)返回一個新的function函數，上下文是context。

 $(document).ready(function(){ var objPerson = {  name: "John Doe",  age: 32,  test: function(){   $("p").after("Name: " + this.name + "<br> Age: " + this.age);  } }; $("button").click($.proxy(objPerson,"test"));});

以上，點擊按鈕，執行的是test方法，不過test方法的上下文做了設定。

15.解析JSON

jQuery.parseJSON( json )第一個參數json的類型是字串。

var obj = jQuery.parseJSON( '{ "name": "John" }' );alert( obj.name === "John" );

16.運算式求值

有時候，希望一段代碼在全域上下文中執行，可以使用jQuery.globalEval( code )。code的類型是字串。

function test() { jQuery.globalEval( "var newVar = true;" )}test();

17.動態載入指令碼

$(selector).getScript(url,success(response,status))用來動態載入js檔案，第一個參數是js的檔案路徑，第二個參數可選，表示擷取js檔案成功的回調。

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) { console.log( data ); // Data returned console.log( textStatus ); // Success console.log( jqxhr.status ); // 200 console.log( "Load was performed." );});

相信本文所述對大家的jQuery程式設計有一定的借鑒價值。

jQuery中bind函數用法

問題1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#mybtn').bind('click', {a : 'hello', b : 'world'}, myFun);
});

function myFun(e) {
alert(e.data.a);
alert(e.data.b)
}
</script>
</head>
<body>
<input type="button" id="mybtn" value="Click me." />
</body>
</html>
如上面例子，可以傳遞多個參數。

-------------------------------------------------------

問題2：
$('<p>Test</p>').appendTo('.inner');
$('.inner').append('<p>Test</p>');
上面這個是append()和appendTo()區別，應該一目瞭然了吧？
而appendChild()不是jquery的方法，而是javascript原生的方法。

append和appendChild的關係是：
其實幾乎一樣，append就是調用appendChild實現的，只是在append前，做一個簡單判斷。下面貼下jquery的原始碼：

append: function(......餘下全文>>
 
jquery中function怎使用

我用jquery-1.6.min.js、IE9，沒有報錯。

//Method 1
<script type="text/javascript">
<!--
$(document).ready(function() {
var test = function(){
alert("test");
};
test();
});
//-->
</script>

//Method 2
<script type="text/javascript">
<!--
$(document).ready(function() {
alert("test");
});
//-->
</script>