jQuery技术

jQuery 使用技巧 (工具)

字号+ 作者:H5之家 来源:H5之家 2015-09-30 09:12 我要评论( )

摘要: 工具 注: jQuery 都可替换为$ 浏览器 jQuery.browser() :浏览器内核标识。依据 navigator.userAgent 判断。 可用值: safari opera msie mozilla 在 Mic

摘要: 工具 注: jQuery 都可替换为$ 浏览器 jQuery.browser() :浏览器内核标识。依据 navigator.userAgent 判断。 可用值: safari opera msie mozilla 在 Microsoft's Internet Explorer 浏览器中返回 true。 代码:$.browser.msie 仅在 Safari 中提示 this is sa工具

注:jQuery都可替换为$

浏览器
jQuery.browser():浏览器内核标识。依据 navigator.userAgent 判断。

可用值: safari opera msie mozilla

在 Microsoft's Internet Explorer 浏览器中返回 true。

代码:$.browser.msie

仅在 Safari 中提示 "this is safari!" 。

代码:

if ($.browser.safari) {

alert("this is safari!");

jQuery.browser.version():浏览器渲染引擎版本号

典型结果:

Internet Explorer: 6.0, 7.0

Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3

Opera: 9.20

Safari/Webkit: 312.8, 418.9

if ( $.browser.msie )

alert( $.browser.version );

jQuery.boxModel():当前页面中浏览器是否使用标准盒模型渲染页面

在 Internet Explorer 怪癖模式(QuirksMode)中返回 False。

代码:$.boxModel

数组和对象操作
jQuery.each(obj,callback):通用例遍方法,可用于例遍对象和数组。

代码:例遍数组,同时使用元素索引和内容。

$.each( [0,1,2], function(i, n){

alert( "Item #" + i + ": " + n );

});

代码:例遍对象,同时使用成员名称和变量内容。

$.each( { name: "John", lang: "JS" }, function(i, n){

alert( "Name: " + i + ", Value: " + n );

});

jQuery.extend(target,obj1,objN):用一个或多个其他对象来扩展一个对象,返回被扩展的对象

代码:合并 settings 和 options,修改并返回 settings。

var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings, options);

结果:settings == { validate: true, limit: 5, name: "bar" }

代码:合并 defaults 和 options, 不修改 defaults。

var empty = {}

var defaults = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

var settings = jQuery.extend(empty, defaults, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }

empty == { validate: true, limit: 5, name: "bar" }

jQuery.grep(array,callback,invert):使用过滤函数过滤数组元素

代码:过滤数组中小于 0 的元素。

$.grep( [0,1,2], function(n,i){

return n > 0;

});

结果:[1, 2]

代码:排除数组中大于 0 的元素,使用第三个参数进行排除。

$.grep( [0,1,2], function(n,i){

return n > 0;

}, true);

结果:[0]

jQuery.makeArray(obj):将类数组对象转换为数组对象

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

代码:过滤数组中小于 0 的元素。

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

arr.reverse(); // 使用数组翻转函数

结果:

Fourth

Third

Second

First

jQuery.map(array,callback):将一个数组中的元素转换到另一个数组中

代码:将原数组中每个元素加 4 转换为一个新数组。

$.map( [0,1,2], function(n){

return n + 4;

});

结果:[4, 5, 6]

代码:原数组中大于 0 的元素加 1 ,否则删除。

$.map( [0,1,2], function(n){

return n > 0 ? n + 1 : null;

});

结果:[2, 3]

代码:原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组。

$.map( [0,1,2], function(n){

return [ n, n + 1 ];

});

结果:[0, 1, 1, 2, 2, 3]

jQuery.unique(array):删除数组中重复元素

代码:删除重复 div 标签。

$.unique(document.getElementsByTagName("div"));

结果:<div>, <div>, ...

测试操作
jQuery.isFunction(obj):测试对象是否为函数

代码:检测是否为函数

function stub() {}

var objs = [

function () {},

{ x:15, y:20 },

null,

stub,

"function"

];

jQuery.each(objs, function (i) {

var isFunc = jQuery.isFunction(objs[i]);

$("span:eq( " + i + ")").text(isFunc);

});

结果: true,false,false,true,false

字符串操作
jQuery.trim(str):去掉字符串起始和结尾的空格

$.trim(" hello, how are you? "); 结果:"hello, how are you?"

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
d