实例解析jQuery工具函数

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://www.jb51.net/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" ""> <html xmlns="">。则弹出的是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="https://www.jb51.net/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对象。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwxzxp.html