jQuery工具函数（转）
一、$.browser对象属性
属性列表 说明
webkit webkit相关浏览器则返回true，否则返回false，如google，傲游。
mozilla mozilla相关浏览器则返回true，否则返回false，如火狐
safari safari相关浏览器则返回true，否则返回false，如safari
opera opera相关浏览器则返回true，否则返回false，如opera
msie msie相关浏览器则返回true，否则返回false,如IE，360，搜狗
version 返回对应浏览器的版本
$(function () {
if ($.browser.msie) {
alert("IE浏览器");
}
if ($.browser.webkit) {
alert("webkit浏览器");
}
if ($.browser.mozilla) {
alert("mozilla浏览器");
}
if ($.browser.safari) {
alert("safari浏览器");
}
if ($.browser.opera) {
alert("opera浏览器");
}
alert($.browser.version);
})
二、boxModel
返回一个布尔值，如果是W3C盒子模型则返回true，否则返回false。
盒子模型分两类，一类是W3C盒子模型，一类是IE盒子模型。两者的根本区别在于W3C的盒子模型不包括padding与border，仅指content的Height和Width，而IE盒子模型 包含padding与border。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.support.boxModel) {
alert("W3C盒子模型!");
}
else {
alert("IE盒子模型!");
}
})
</script>
</head>
<body>
</body>
</html>
上面的例子弹出W3C盒子模型，如果删除掉顶部的两行，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">。则弹出的是IE盒子模型。
数组和对象的操作
三、$.each()
此工具函数不仅能够完成指定数组的遍历，还能够实现页面中元素的遍历。
语法：$.each(obj,fn(para1,para2)) obj要遍历的数组或对象，fn为每个遍历元素执行的回调函数，para1表示数组的序号或对象的属性，para2表示数组的元素和对象的属性。
$(function () {
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
document.write(index + ":");
document.write(value + "<br/>");
});
}) 输出： 0:1 1:2 2:3 3:4 4:5
$.each()遍历数组。
$(function () {
var arr = { "张三": "23","李四": 22,"王五": "21" };
$.each(arr, function (index, value) {
document.write(index + ":");
document.write(value + "<br/>");
});
}) 输出：张三:23 李四:22 王五:21
元素遍历
<head>
<title></title>
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("p").each(function () {
$(this).css("background-color", "red");
});
//一下三行代码与以上三行效果一样
//$.each($("p"), function () {
// $(this).css("background-color", "red");
//})
})
</script>
</head>
<body>
<p>我是第一个P</p>
<p>我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
<p>我是第五个P</p>
</body>
</html>
四、$.grep()
筛选符合条件的元素，返回一个新数组
语法：$.grep(Arrar,fn(value,index)); 要注意下回调函数的参数的顺序，第一个是值，第二个是索引。
$.grep(Arrar,fn(value,index),[bool]); 第三个参数表示是否取反，true表示取反，false表示不取反。
$(function () {
var arr = [2, 5, 34, 22, 8];
var arr1 = $.grep(arr, function(value, index) {
return index <= 2 && value < 10;
})
document.write(arr1.join()); //输出2,5
})
六、$.map()
改变函数内的数据，接受一个数组或类数组对象作为参数
$(function () {
var arr = [2, 5, 34, 22, 8];
var arr1 = $.map(arr, function (value, index) {
if (value > 5 && index < 3) {
return value - 10;
}
})
document.write(arr.join() + "<br/>"); //2,5,34,22,8 可以看到原数组不改变
document.write(arr1.join()); //24 新数组只获得了操作之后的结果
})
七、$.inArray()
如果数组中存在被搜索元素，则返回被搜索元素的索引
$(function () {
var arr = [1, 2, 3, 4, 5];
alert($.inArray(4,arr)); //弹出 3
})
八、$.trim()
去除字符串两边的空格
$(function () {
var str = " 你在他乡还好吗？ ";
document.write("11" + str + "11" + "<br/>"); //输出 11 你在他乡还好吗？ 11
document.write("11" + $.trim(str) + "11"); //输出 11你在他乡还好吗？11 //加个11是为了看清楚差别。
})
九、测试操作
$.isArray(obj) 检测参数是否是数组
$.isFunction(obj) 检测参数是否是一个函数
$.isEmptyObject(obj) 检测参数是否是一个空对象
$.isPlainObject(obj) 检测参数是否是一个纯粹对象，即对象是否通过{}或new Object()关键字创建。
$.contains(container,contained) 检测一个DOM节点是否包含另一个DOM节点。是则返回true否则表示false。注意参数是DOM对象并非jQuery对象。
$(function () {
var arr = [1, 2, 3, 2, 1];
document.write(jQuery.isArray(arr)); //返回true
var str = "123";
document.write(jQuery.isArray(str)); //返回false })
$(function () {
var f = fun1;
alert($.isFunction(fun1)); //返回true
})
function fun1() { }
$(function () {
var obj1 = {};
var obj2 = { name: "张飞" };
alert($.isEmptyObject(obj1)); //返回true obj1是空对象
alert($.isEmptyObject(obj2)); //返回false obj2不是空对象
})
$(function () {
var obj1 = {};
var obj2 = { name: "张飞" };
var obj3 = new Object();
var obj4 = null;
alert($.isPlainObject(obj1)); //true 通过{}创建
alert($.isPlainObject(obj2)); //true 通过{}创建
alert($.isPlainObject(obj3)); //true 通过new Object()创建
alert($.isPlainObject(obj4)); //flase 不是通过{}或new Object()创建
})
$(function () {
alert($.contains($("#div1")[0],$("#p1")[0])); //返回true，注意参数是DOM对象，并非jQuery对象
})
十、$.param()
序列化成url字符串
$.param(obj,[bool]); 第二个参数为可选参数，表示是否浅层序列化
$(function () {
var man = { Name: "张飞", Age: 23 };
var str = $.param(man);
document.write(str); //Name=%E5%BC%A0%E9%A3%9E&Age=23
var str1 = decodeURI(str);
document.write("<br>" + str1); //Name=张飞&Age=23
})
十一、$.makeArray()
将数组或类数组对象的属性复制到一个新的数组(真的是数组)中，并返回该新数组。
var arr = [1,3,5,7,9];
$(function () {
var arr1 = $.makeArray(arr);
document.write(arr1.join()); //输出 1,3,5,7,9
})
十二、$.merge()
该函数接受两个数组或类数组对象，将第二个参数附加到第一个参数上面，返回第一个参数，第一个数组会修改，第二个不会。
var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];
$(function () {
var arr3 = $.merge(arr1, arr2);
document.write(arr1.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10
document.write(arr2.join() + "<br/>"); //2,4,6,8,10
document.write(arr3.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10
})
十三、$.parseJSON()
该函数会解析JSON格式的字符串，并返回解析结果(对象)。 类似于JSON.parse()，注意:jQuery只定义了JSON解析函数，并没有定义序列化函数。
var man = { name: "张三", age: 23 };
var str = JSON.stringify(man);
document.write(str + "<br/>"); //{"name":"张三","age":23}
var man1 = $.parseJSON(str);
document.write(man1.name + man1.age); //张三23
十四、$.proxy()
类似于Function对象的bind()方法，接受函数作为第一个参数，对象作为第二个参数，并返回一个新函数，该函数会作为第二个参数对象的方法调用。
$(function () {
var obj = {
name: "John",
test: function () {
alert(this.name); //当id为test的按钮点击时，弹出姓名
$("#test").unbind("click", obj.test); //并取消事件绑定(下次再点击不会弹出姓名)
}
};
$("#test").click(jQuery.proxy(obj, "test")); //绑定object对象里面的方法test
})
十五、$.unique(array)
删除元素数组中的重复元素
$(function () {
var arr = [1, 2, 3, 2, 1];
jQuery.unique(arr);
alert(arr.join()); //返回 3,2,1
})
十六、$.extend()
合并对象中的元素
$(function(){
var result=$.extend({},{name:"Tom",age:21}, {name:"Jerry",sex:"Boy"});
alert(result.name); //输出 Jerry 后面的会覆盖前面的，result始终只是一个对象
})
省略dest参数,extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去。
要特别注意的一点是：后面的值会覆盖前面同名的值。
$(function(){
$.extend({
hello:function(){alert('hello');} //该方法只有一个参数，意味着将hello方法合并到jQuery全局对象中去
});
$.hello(); //弹出 hello
})
命名空间示例：
$(function(){
$.extend({net:{}}); //扩展一个命名空间
$.extend($.net,{
hello:function(){alert('hello');} //将hello方法绑定到命名空间net里去
})
$.net.hello(); //通过net命名空间调用方法
})
拷贝方法原型：
extend(boolean,dest,src1,src2,src3...)
其中第一个参数boolean表示是否进行深层拷贝。
$(function(){
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",country:"USA"} },
{ last: "Resig", location: {state: "MA",country:"China"} } );
alert(result.location.state); //输出 MA
//result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
var result=$.extend( false, {},
{ name: "John", location: {city: "Boston",country:"USA"} },
{ last: "Resig", location: {state: "MA",country:"China"} } );
alert(result.location.city); //输出 undefined
//result={name:"John",last:"Resig",location:{state:"MA",county:"China"}} 注意没有city，只是合并了location,location里面的属性不管
})
jQuery工具函数（转）的更多相关文章
- 从零开始学习jQuery (九) jQuery工具函数
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑, 最常见的就 ...
- jQuery 工具函数
jQuery工具函数 一.$.browser对象属性 属性列表 说明 webkit webkit相关浏览器则返回true,否则返回false,如google,傲游. mozilla mozilla相关 ...
- jQuery工具函数
要点:1.字符串操作2.数组和对象操作3.测试操作4.URL 操作5.浏览器检测6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局性的函数.它的作 ...
- 4月13日学习笔记——jQuery工具函数
浏览器及特性检测 jQuery.support.boxModel 如果这个页面和浏览器是以 W3C CSS 盒式模型来渲染的,则等于 true.通常在 IE 6 和 IE 7 的怪癖模式中这个值是 f ...
- 分享几个实用的jquery工具函数
1.$.browser对象属性 属性列表 说明 webkit webkit相关浏览器则返回true,否则返回false,如google,傲游. mozilla mozilla相关浏览器则返回tru ...
- jquery工具函数browser() 辨别浏览器
1.browser属性不是一个函数是一个全局对象,可以辨别客户端浏览器. 2.属性1:$.browser.msie如果返回true则客户端浏览器是ie.相似的$.browser.safari返回tru ...
- jQuery工具函数下
测试操作 1.判断是否为数组对象 $(function () { //判断是否为数组对象 var arr = [1,2,3,4]; alert($.isArray(arr));//true }); 2 ...
- jQuery工具函数上
1.字符串操作 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
随机推荐
- 如何快速地从mongo中提取数据到numpy以及pandas中去
mongo数据通常过于庞大,很难一下子放进内存里进行分析,如果直接在python里使用字典来存贮每一个文档,使用list来存储数据的话,将很快是内存沾满.型号拥有numpy和pandas import ...
- jface databinding:部分实现POJO对象的监测
在前一篇博文<jface databinding/PojoBindable实现对POJO对象的支持 >中,已经知道直接对POJO对象进行修改,是不能被绑定的UI组件知道的,在上一篇文章中 ...
- iOS 启动画面 代码自定义
先来看一个可能会遇到的问题: 如果你已经删除了xcode为你的项目自动生成的LaunchScreen.storyboard, 然后你在测试你的app的时候发现,屏幕里出现了黑色的区域,如上图(画红线的 ...
- ZeroMQ接口函数之 ：zmq_z85_encode – 使用Z85算法对一个二进制秘钥进行加密，输出可打印的文本
ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq-z85-encode zmq_z85_encode(3) ØMQ Manual - ØMQ/4. ...
- 【Alpha】Daily Scrum Meeting第六次
一.本次Daily Scrum Meeting主要内容 各队员的任务完成情况 接下去要做的任务有哪些方面的问题 二.项目进展 学号尾数 今日已完成任务 接下去要做 502 统一Excel表头数据的英文 ...
- Unity3D优化总结（一）
1.如使用碰撞器,简单的模型尽量使用自带的碰撞器如BoxCollider,少使用Mesh Collider. 2.如要使用Mesh Collider,可以做一个专用的模型(尽量少网格)做为Mesh C ...
- jQuery触发a标签点击事件-为什么不跳转
今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...
- Matlab的标记分水岭分割算法
1 综述 Separating touching objects in an image is one of the more difficult image processing operation ...
- Random随机类(11选5彩票)BigInteger大数据类(华为面试题1000的阶乘)
先上Java Web图 为了简化叙述,只写Java代码,然后控制台输出 使用[Random类]取得随机数 import java.util.Random; public class Fir { pub ...
- [不好分类]SD卡无法读取，显示RAW
上周同事拿来了一个8G的SD卡,插入读卡器后显示“需要格式化”.无法读取.文件格式处显示“RAW”,磁盘大小显示0字节. 处理步骤如下: 1.按照提示,格式化,选择“快速格式化”. 2.采用数据恢复软 ...