jQuery笔记——工具函数——对象和集合操作
来源：互联网 发布：网站域名价值评估网 编辑：程序博客网 时间：2024/06/11 11:44
一、处理字符串
trim（）函数：清理字符串前后的空白，全局函数，可直接使用jQuery对象进行调用。
jQuery.trim( str );
str：表示被修剪的字符。
应用1：jQuery方法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>处理字符串(jQuery)</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ var str = " 修剪字符串 "; alert(str.length); str = jQuery.trim(str); alert(str.length); }); }) </script></head><body><button>修剪字符串</button></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>处理字符串(javascript)</title> <script type="text/javascript"> function trim(text){ return (text || "").replace(/^\s+|\s+$/g,"" ); } window.onload = function(){ var str = " 去掉字符串起始和结尾的空格 "; alert(str.length); str = trim(str); alert(str.length); } </script></head><body></body></html>二、把对象转换成字符串
param（）函数：将字符串创建为一个序列化的数组或对象，返回值为有序化的字符串。该方法特别适用于一个URl地址查询字符串或Ajax请求。
jQuery.param( obj )
jQuery,param( obj , traditional )
参数解释：
obj：一个数组或序列化的对象
traditional：一个布尔值，设置是否执行了传统的shallow的序列化。
提示：param（）函数是serialize（）方法的基础。所谓序列化，就是数组或者jQuery对象按照名/值（name/value）对格式进行序列化，而JavaScript普通对象按照key/value对格式进行序列化。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>把对象转换为字符串</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ var option = { user:"zhangsan", pass:12345678 }; var str = jQuery.param(option); $("#result").text(str); }); }) </script></head><body><button>定义序列化字符串</button><div id="result"></div></body></html>
三、判断数组类型
isArray（）函数：jQuery定义的负责检测对象是否为JavaScript数组的专用工具，它可以快速判断指定对象是否为数组。
jQuery.isArray（obj）
参数：obj：一个用来测试是否为一个数组的对象
返回值：true：参数是一个数组；false：不是
应用：jQuery
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>判断数组类型</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function () { var a = [ {width:400}, {height:300} ]; if(jQuery.isArray(a)){ alert("变量a是数组"); } }) </script></head><body></body></html>四、判断函数类型
isFunction（）函数：jQuery定义的用来检测指定对象是否为函数类型的函数。
jQuery.isFunction(obj)
参数obj：表示用于测试是否为函数的对象。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>判断函数类型</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ 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); }); }) </script> <style type="text/css"> div{color: blue;margin: 2px;font-size: 14px;} span{color: red;} </style></head><body><pre> var objs = [ function(){}, {x:15,y:20}, null, stub, "function" ];</pre><div>jQuery.isFunction(objs[0]) = <span></span></div><div>jQuery.isFunction(objs[1]) = <span></span></div><div>jQuery.isFunction(objs[2]) = <span></span></div><div>jQuery.isFunction(objs[3]) = <span></span></div><div>jQuery.isFunction(objs[4]) = <span></span></div></body></html>
在jQuery1.3版本以后，IE浏览器提供的函数，如alert和getAttribute（DOM元素方法）将不被认为是函数。
五、判断特殊对象
1.检测空对象：
jQuery.isEmptyObject( object )
检测对象是否为空，即对象不包含任何属性。
返回值：true：是空对象；false：不是
在jQuery1.4中，该方法既检测对象本身的属性，也检测从原型集成的属性，因此没有使用hasOwnProperty。
2.检测纯对象
jQuery.isPlainObject( object )
检测一个对象是否为纯对象，即通过对象直接量（{}）或者Object构造函数（new Object）创建的对象
返回值：true：是纯对象；false：不是
3.检测Window对象
jQuery.isWindow( obj )
检测一个对象是否为window对象，即检测一个对象是否为一个窗口
返回值：true：是窗口对象；false：不是
使用该函数可以确定当前操作是否为一个浏览器窗口操作，如当前窗口或一个iframe
4.检测XML文档
jQuery.isXMLDoc( node )
检测一个DOM节点是否在XML文档中（或者是一个XML文档）
返回值：true：是XML文档中的节点对象；false：不是
六、对数组和集合进行迭代
JavaScript方法迭代：
1.数组：for循环遍历数组元素
2.对象：for in循环将对象属性进行迭代
jQuery方法：
each（） ：无缝迭代对象和数组
数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1.其他对象迭代通过其命名属性。
jQuery.each( collection , callback( indexArray , valueOfElement ) )
参数解释：
collection：遍历的对象或数组。
callback( indexArray , valueOfElement ) ：表示每个成员/元素执行的回调函数。该函数在遍历每个成员时触发。回调函数包含两个默认参数，【1】：对象成员或数组的索引，【2】：对应变量或内容。
$.each()函数和each()方法不同：（功能相同，用法不同）
each()方法：专门用来遍历一个jQuery对象
$.each()函数：可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或阵列。在一个数组的情况下，回调函数每次传递一个数组索引和相应的数组值。（该值也可以通过this关键字进行访问，但是JavaScript将始终包裹this值作为一个Object，即使它是一个简单的字符串或数字值。）该方法返回第1个参数，是迭代的对象。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>对数组和集合进行迭代</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var a = [ {width:400}, {height:300} ]; jQuery.each(a,function(name,value){ if(name>0) return false; //仅执行一次循环即退出 alert(name + "=" + value); }) }) </script></head><body></body></html>如果中途需要退出each（）循环，则可以在回调函数中返回false，其他返回值将被忽略。七、生成数组
散列表结构数据：1.数组类型；2.对象类型
DOM中常需要把列表结构的数据转换为数组
如：使用jQuery获取文档中所有的li元素，则返回的应该是一个类似数组结构的对象。但是如果直接为其调用reverse（）数组方法，则会显示编译错误，因为$("li")返回的是一个类数组结构的对象，而不是数组类型数据。如果直接使用document.getElementByTagName（“li”）获取li元素集合，返回值也是一个类数组结构的对象，该对象无法直接调用数组方法。
jQuery.makeArray( obj )
把这些类数组结构对象转换为真正的JavaScript数组。
obj：转换成一个原声数组的任何对象。
转换后，任何有特殊功能的对象将不再存在，返回一个普通的数组。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>生成数组</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var arr = jQuery.makeArray($("li")); //转换为数组 $("ul").html(arr.reverse()); //调用reverse方法 }) </script></head><body><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul></body></html>
八、对数组进行筛选
grep（）函数：根据过滤函数过滤掉数组中不符合条件的元素
jQuery.grep( array , function( elementOfArray , indexInArray ) , [ invert ] )
参数解释：
array：数组，用来搜索
function( elementOfArray , indexInArray )：处理每个项目的比对。参数1：项目；参数2：索引。返回一个布尔值。this将是全局的窗口对象
invert：false或没有提供：函数返回一个所有元素组成的数组，对于callback返回true
true：函数返回一个所有元素组成的数组，对于callback返回false
$.grep()方法删除必要的项目，以使所有剩余项目通过提供的测试。该测试是一个函数传递一个数组项和该数组内的项目的索引。只有当测试返回true，该数组项将返回到结果数组中。
注意：在筛选过程中原始数组不受影响。
应用：筛选出大于等于5的数组元素，并返回一个数组
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>对数组进行筛选</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var arr = [1,2,3,4,5,6,7,8,9,0]; arr = jQuery.grep(arr , function(value , index){ return value >= 5; },true); //没true，选出大于等于5的；有true过滤掉大于等于5的 alert(arr); }); /** * javascript 模拟jQuery的grep（）函数功能 function grep(elems , callback , inv) { var ret = []; for (var i = 0 , length = elems.length ; i < length ; i++) { if(!inv != !callback(elems[i] , i)) { ret.push(elems[i]); } } return ret; } window.onload = function(){ var arr = [1,2,3,4,5,6,7,8,9,0]; arr = grep(arr , function(value,index){ return vlaue >= 5; },true) ; //没true，选出大于等于5的；有true过滤掉大于等于5的 alert(arr); }**/ </script></head><body></body></html>
九、对数组进行转换
JQuery.map()函数：拥有grep（）函数的功能，同时还可以把当前数组根据处理函数处理后映射为新的数组，甚至可以在映射过程中放大数组。
jQuery.map( arry , callback( elementOfArray , indexInArray ) )
jQuery.map( arrayOrObject ,callback( value , indexOrKey ) )
参数解释：
array：待转换的数组
arrayOrObject ：待转换数组或对象
callback( elementOfArray , indexInArray ) ：被每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可以返回任何值。this将是全局的窗口对象。如果返回null，表示删除数组中对应的项目。如果返回一个包含值的数组，表示将扩展原来的数组。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>对数组进行转换1</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var arr = [1,2,3,4]; arr = jQuery.map(arr , function(elem){ //放大一倍 return elem*2; //返回：2,4,6,8 //放大后删除小于5的值 //return elem*2 > 5? elem*2 : null; //返回：6,8 //返回值为数组，则可以在映射数组中扩大数组的长度 //return [elem , elem*2]; //返回：1,2,2,4,3,6,4,8 } ); alert(arr); }); /** * 模仿jQuery的map()函数功能，映射函数 function map(elems,callback){ var ret = []; for(var i = 0 , length = elems.length ; i < length ; i++){ //遍历数组 var value = callback(elems[i],i); //执行回调转换函数，并获取函数返回信息 if(value != null){ //如果返回值不为null，则把该元素存储到临时数组中 ret[ret.length] = value; } } return ret.concat.apply([] , ret); //把临时数组连接到一个返回的空数组中，从而实现把数组类型的元素分开为元素，存储到返回数组中 } **/ </script></head><body></body></html>merge()函数：把两个参数数组组合并为一个新数组并返回
jQuery.merge( first , second )
参数解释：
first：第一个用来合并的数组，元素是第二个数组加进来的
second：第二个数组合并到第一个数组，保持不变
从第二个追加的元素数组顺序将保存。
$.merge()函数是破坏性的。如果需要原始的第一个数组，应在调用前复制。
可以用merge（）本身复制：
var newArray = $.merge([] , oldArray)
在jQuery1.4之前，参数应是原生的JavaScript数组对象。如果不是，要用$.makeArray()转换。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>把多个数组合并在一起</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var arr1 = [1,2,3,["a","b","c"]]; var arr2 = [4,5,6,[7,8,9]]; var arr3 = jQuery.merge(arr1,arr2); alert(arr1); //返回数组[1,2,3,["a","b","c"],4,5,6,[7,8,9]] alert(arr1.length); //返回8 alert(arr3); //返回数组[1,2,3,["a","b","c"],4,5,6,[7,8,9]] alert(arr3.length); //返回8 }) ; /**模仿jQuery的merge（）函数功能，合并数组 function merge(first , second){ var i = first.length,j = 0; if(typeof second.length === "number"){ //如果第二个参数为数组 for(var l = second.length ; j<l;j++) //遍历参数数组2 { first[i++] = second[j]; //逐一把数组2中的元素添加到参数数组1中 } }else{ //如果第二个参数为类数组的对象 while(second[j] !== undefined) //遍历该对象 { first[i++] = second[j++]; //逐一把对象中的成员添加到参数数组1中 } } first.length = i; return first; }**/ </script></head><body></body></html>十一、删除数组中重复元素
unique()函数：把重复的DOM元素删掉 （不能处理字符串或数字数组）
jQuery.unique( array )
参数解释：
array：DOM元素的数组
通过搜索数组对象排序数组，并移除任何重复的节点。该功能只适用于普通的JavaScript DOM元素的数组，主要在jQuery内部使用。在jQuery1.4中结果将始终按文档顺序返回。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>删除数组中重复元素</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var $arr1 = $("#u1 li"); var $arr2 = $("#u1 .red"); var $arr3 = jQuery.merge($arr1,$arr2); var $arr4 = jQuery.unique($arr3); alert($arr1.length); //返回3 alert($arr3.length); //返回3 alert($arr4.length); //返回3 }) </script></head><body><ul id="u1"> <li>1</li> <li>2</li> <li class="red">3</li></ul><ul id="u2"> <li class="red">4</li> <li>5</li> <li>6</li></ul></body></html>十二、在数组中查找指定值
inArray（）函数：查找数组中是否包含指定的值
jQuery.inArray( value , array )
参数解释：
value：要搜索的值
array：一个数组，通过它来搜索
搜索数组中指定值，并返回他的索引，如果没有找到则返回-1
如果检查array中存在value，只需要检查它是否不等于（或大于）-1即可。
应用：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>在数组中查找指定值</title> <script src="js/jquery2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ var arr = [ 4 , "Pete" , 8 , "John"]; $("span:eq(0)").text(jQuery.inArray("John" , arr)); $("span:eq(1)").text(jQuery.inArray(4 , arr)); $("span:eq(2)").text(jQuery.inArray("Kari" , arr)); }) </script></head><body><h2>arr = [ 4 , "Pete" , 8 , "John"]</h2><div>"John"位于<span></span></div><div>4位于<span></span></div><div>"Kari"位于<span></span> , 所以不存在</div></body></html>
- jQuery笔记——工具函数——对象和集合操作
- Jquery学习笔记——工具函数
- jQuery笔记——工具函数——jQuery标志
- Java学习笔记—对象的比较和集合工具类Collections
- jquery学习笔记— jQuery对象和DOM对象
- 操作jQuery集合——搜索操作
- 操作jQuery集合——串联操作
- 操作jQuery集合——过滤操作
- 黑马程序员——集合、集合框架工具类（collections和Arrays）和其他对象
- jQuery笔记——工具函数——缓存
- jQuery学习笔记——$.grep()工具函数
- 锋利的jQuery学习笔记（三）————DOM对象和jQuery对象
- jQuery学习笔记—jQuery对象和dom对象相互转化
- kotlin学习笔记——集合及集合操作符
- Jquery——Day5（工具函数）
- jQuery——对象样式操作
- jQuery 知识点(六) —— jQuery 工具函数和全局属性
- Java面向对象——集合工具类（Collections）
- linux下安装 Sublime Text 3
- SDL2：生成完全透明的纹理(SDL2: Generate fully transparent texture)
- Android多渠道打包
- 第二章笔记
- RelativeLayout中子控件改变layoutParams无效
- jQuery笔记——工具函数——对象和集合操作
- 机器学习练习（四）——多元逻辑回归
- java常见对象集合
- Android实践：如何高效加载Bitmap
- invalidate()和postInvalidate() 的区别及使用
- Error: 'S' is not a valid file-based resource name character: File-bas
- NADetector实时流量监控软件
- CUDA教程之——共享存储器(1)-矩阵相乘
- springmvc 整合mybatis dao层不写实现类
