介绍几个jQuery实用函数

来源:互联网 发布:张译演技知乎 编辑:程序博客网 时间:2024/06/16 21:52

1、修剪字符串

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

 

2、遍历集合

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

 

3、筛选函数

jQuery.grep( array, callback, [invert] )

返回值: Array

说明:

使用过滤函数过滤数组元素。

此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

grep方法的第二个参数是回调函数,该回调函数接收2个参数,一个是数组的元素,一个是数组的索引。
grep方法的第三个参数inv,默认情况下是undefined,所以!!inv为false,即inv的默认值是false

讲解:

默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.

 

举例1:int类型数组

JScript 代码   复制
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,结果怎样呢?

JScript 代码   复制
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后,会把不符合回调函数的数组元素过滤出来。

 

4、转换函数

jQuery.map( array, callback )

返回值:Array

说明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

 

5、返回数组元素的索引

使用$.inArray(value, array)返回传入的值第一次出现的下标,即索引。

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

 

6、将对象转换成数组

$.makeArray(object)将传入类似数组的对象转换成Javascript数组。

 

7、得到不含重复元素的数组

使用$.unique(array)返回由原始数组中不重复的元素组成的数组。

例如

 
JScript 代码   复制
<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对象转换成字符串形式。

 
JScript 代码   复制
$(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、解析JSON

jQuery.parseJSON( json )第一个参数json的类型是字符串。

例如

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

 

13、动态加载脚本

$(selector).getScript(url,success(response,status))用来动态加载js文件,第一个参数是js的文件路径,第二个参数可选,表示获取js文件成功的回调。

 

例如

 
JScript 代码   复制
$.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." );});
原创粉丝点击