欢迎来到新闻!
我的订单 签到有礼 资讯中心
当前位置:首页 > 代码知识 >
代码知识

【编程】jQuery实用工具类--jQuery基础知识点(3)

发布日期:2019-12-13 17:13 浏览量:0

  

  在jQuery中,实用工具是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的函数。可分为几大类别:浏览器的检测、数组和对象的操作、字符串操作、测试操作、URL操作。调用方式:$.函数名() 或 jQuery.函数()

  1. $.browser对象即jQuery.browser对象,用于处理与浏览器相关的事物。

  $.browser.webkit Google chrome $.browser.mozilla Mozilla Firefox $.browser.safari Apple Safari $.browser.opera OPERA Opera $.browser.msie Microsoft MSIE(Microsoft Internet Explorer) $.version 返回当前浏览器的版本号(内核版本号)

  PS:在1.3版本中已经 被jQuery.support函数替代

  2. 盒子模型,用以描述页面设置中的各种属性,

  如内容(content)、填充(padding)、边框(border)、边界(margin)。 一类是W3C盒子模型;一类是IE盒子模型。两者根本区别在于属性height和width这两个值是否包含padding与border。 W3C盒子模型不包含padding和border。 jQuery.support.boxModel //true:W3C盒子模型

声明DOCTYPE类型,使用标准的W3C盒子模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. 遍历数组:

  $.each(obj,fn(para1,para2)) 其中,参数obj表示要遍历的数组或对象,fn为每个遍历元素执行的回调函数,该函数包含两个参数:para1表示数组的序号或对象的属性;para2表示数组的元素和对象的属性值。

  4. 筛选数组中的元素:

  $.grep(array,function(elementOfArray,indexInArray),[invert]) 其中,elementOfArray为数组中的元素;indexInArray为元素在数组中的序列号;invert=false不取反。 例:$.grep(arrNum,function(ele,index){ return ele>5 && index<8; //元素值大于5且序号小于8 })

  5. 按指定条件修改数组中的所选元素:

  $.map(array,callback(elementOfArray,indexInArray)) 其中,elementOfArray为数组中的元素;indexInArray为元素在数组中的序列号。 例:$.map(arrNum,function(ele,index){ if(ele>5 && index<8){ //元素值大于5且序号小于8 return ele+3; } })

  6. 在数组中搜索某个元素,可以使用工具函数$.inArray()

  该方法相当于javascript中的indexOf()函数搜索字符串中的某个字符 找到指定元素,返回对应索引号,否则返回-1。 var arr = [2,9,2]; $.inArray(2,arr); //0 $.inArray(2,arr,1); //2 $.inArray(2,arr,3); //-1

  7. 测试工具函数:

  $.isArray(obj) $.isFunction(obj) $.isEmptyObject(obj) $.contains(container,contained) 检测一个DOM节点中是否包含另一个DOM节点

  8. URL操作;

  serialize()方法来序列化表单向服务器提交数据,即URL操作,而该方法的核心则是工具函数$.param()。 通过该工具函数可以使数组或jQuery对象按照key/value的格式进行序列化。 $("#formID").serialize() $.param(obj,[traditional])

var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
                SunNum: { Score: 288, Num: 3 }};
$.param(arrScore)  //Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3
encodeURIComponent(arrScore)  //%5Bobject%20Object%5D  不能通过此方式进行序列话
var arrDecScore = decodeURIComponent($.param(arrScore)); //Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3

  0. $.proxy()在处理不同作用域对象事件时相当实用,其返回一个新的函数。

  11. $.extend(target,obj1,...[obj2]) target表示合并后的对象。存在相同参数的名称,后面对象中的参数值将覆盖前面对象中的参数值