jquery工具模块介绍

最新推荐文章于 2022-11-13 21:13:13 发布
kevin_love_it
最新推荐文章于 2022-11-13 21:13:13 发布
阅读量393
点赞数
分类专栏： javaScript/jquery 文章标签： html javascript jquery jsp css
本文链接：https://blog.csdn.net/kevin_love_it/article/details/78598534
版权
javaScript/jquery 专栏收录该内容
18 篇文章 0 订阅
订阅专栏
jquery数组和对象操作，函数以及测试对象类型
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script src="../../Document/lib/jquery-3.2.1.min.js"></script>
	<title>jquery ajax</title>
</head>
<body>
	<h2>jquery tool</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
		<font id="someElement" color="red"></font>
		<font id="anotherElement" color="blue"></font>

		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>

		<font id="#results" color="green">xxx</font>

		<input type="text" id="id01" value="test"/>
	<script type="text/javascript">
		// alert(jQuery.support.boxModel);
		document.write(navigator.userAgent+"<br>");
		$.each( [0,1,2,5], function(i, n){
			document.write("Item#"+i+":"+n+"<br>");
		});

		// 数组和对象操作
		$.each( { name: "John", lang: "JS" }, function(i, n){
			document.write( "Name: " + i + ", Value: " + n +"<br>");
		});

		var settings = { validate: false, limit: 5, name: "foo" };
		var options = { validate: true, name: "bar" };
		document.write(jQuery.extend(settings, options)+"<br>");
		
		// 返回大于0的元素
		document.write($.grep( [0,1,2], function(n,i){
			return n > 0;
		})+"<br>");

		// 返回小于0的元素
		document.write($.grep( [0,1,2], function(n,i){
			return n > 0;
		},true)+"<br>");

		$.when( { testing: 123 } ).done(
			function(x){ document.write(x.testing+"<br>") } /* alerts "123" */
		);

		var arr = jQuery.makeArray(document.getElementsByTagName("div"));
		var rra = arr.reverse();
		for (var i = rra.length - 1; i >= 0; i--) {
			document.write(rra[i]+"<br>");
		}

		// 原数组元素+4
		document.write($.map( [0,1,2], function(n){
			return n + 4;
		})+"<br>");

		// 原数组元素大于0的+1，否则删除
		document.write($.map( [0,1,2], function(n){
			return n > 0 ? n + 1 : null;
		})+"<br>");

		// 原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。
		document.write($.map( [0,1,2], function(n){
			return [ n, n + 1 ];
		})+"<br>");

		// 返回数组中元素的位置
		var arr = [ 4, "Pete", 8, "John" ];
		document.write(jQuery.inArray("John", arr));  //3
		document.write($.inArray("John",arr));// 3
		document.write(jQuery.inArray(4, arr));  //0
		document.write(jQuery.inArray("David", arr));  //-1
		document.write(jQuery.inArray("Pete", arr, 2)+"<br>");  //-1

		// 合并数组为新数组
		document.write($.merge( [0,1,2], [2,3,4] )+"<br>");

		// 解析json为字符串
		// Java序列化是指把Java对象转换为字节序列的过程；而Java反序列化是指把字节序列恢复为Java对象的过程。
		var obj = jQuery.parseJSON('{"name":"John"}');
		document.write(( obj.name === "John" )+"<br>");

		var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>',
		xmlDoc = $.parseXML( xml );
		$xml = $( xmlDoc );
		$title = $xml.find( 'title' );	        // append "RSS Title" to #someElement
		$( '#someElement' ).append( $title.text() );	    // change the title to "XML Title"
		$title.text( 'XML Title' );    // append "XML Title" to #anotherElement
		$( '#anotherElement' ).append( $title.text() );

		// jQuery.contains(container,contained) 包含
		document.write(jQuery.contains(document.documentElement, document.body)+"<br>"); // true
		document.write(jQuery.contains(document.body, document.documentElement)+"<br>"); // false

		// 测试类型的对象
		document.write((jQuery.type(true) === "boolean")+"<br>");
		document.write((jQuery.type(3) === "number")+"<br>");
		document.write((jQuery.type("test") === "string")+"<br>");
		document.write((jQuery.type(function(){}) === "function")+"<br>");
		document.write((jQuery.type(new Date()) === "date")+"<br>");
		document.write((jQuery.type(/test/) === "regexp")+"<br>");
		document.write($.isArray([])+"<br>");

		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);
		});

		document.write(jQuery.isEmptyObject({})+"<br>"); // true
		document.write(jQuery.isEmptyObject({ foo: "bar" })+"<br>"); // false

		document.write(jQuery.isPlainObject({})+"<br>"); // true
		document.write(jQuery.isPlainObject("test")+"<br>"); // false

		// 是否为数值
		$.isNumeric("-10");  // true
		$.isNumeric(16);     // true
		$.isNumeric(0xFF);   // true
		$.isNumeric("0xFF"); // true
		$.isNumeric("8e5");  // true (exponential notation string)
		$.isNumeric(3.1415); // true
		$.isNumeric(+10);    // true
		$.isNumeric(0144);   // true (octal integer literal)
		$.isNumeric("");     // false
		$.isNumeric({});     // false (empty object)
		$.isNumeric(NaN);    // false
		$.isNumeric(null);   // false
		$.isNumeric(true);   // false
		$.isNumeric(Infinity); // false
		$.isNumeric(undefined); // false

		// 去掉首尾空格
		document.write($.trim("  hello, how are you?  ")+"<br>");
		var str = "  hello world! ";
		document.write(str.trim()+"<br>");

		// 序列化对象为key/value
		var params = { width:1680, height:1050 };
		var str = jQuery.param(params);
		document.write(str+"<br>");

		// 对比两种序列化
		var myObject = {
			a: {
				one: 1, 
				two: 2, 
				three: 3
			}, 
			b: [1,2,3]
		};
		var recursiveEncoded = $.param(myObject);
		var recursiveDecoded = decodeURIComponent($.param(myObject));

		document.write(recursiveEncoded+"<br>");
		document.write(recursiveDecoded+"<br>");
		//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
		//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

		var shallowEncoded = $.param(myObject, true);
		var shallowDecoded = decodeURIComponent(shallowEncoded);

		document.write(shallowEncoded+"<br>");
		document.write(shallowDecoded+"<br>");
		//a=%5Bobject+Object%5D&b=1&b=2&b=3
		//a=[object+Object]&b=1&b=2&b=3

		// 重载jQuery.error，以便可以在Firebug里显示
		// jQuery.error = console.error;

		// 测试是否为jquery对象
		// DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象;
		var a = { what: "A regular JS object" };
		var d = $("#results");
		if(d.jquery){
			// alert('d is a jQuery object! ');
		}
		b = $('body');
		if ( a.jquery ) { // falsy, since it's undefined
			// alert(' a is a jQuery object! ');
		}    
		if ( b.jquery ) { // truthy, since it's a string
			// alert(' b is a jQuery object! ');
		}

		// jquery对象和DOM对象互相转换

		//=================jquery对象==>Dom对象==============================

		// jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。可能有人会觉得奇怪，怎么是用下标呢，没错，jquery对象就是一个数组对象.
		// 下面代码将演示一个jquery对象转换成dom对象，再使用dom对象的方法

		// var $cr=$("#cr");  //jquery对象
		// var cr = $cr[0];   //dom对象 也可写成 var cr=$cr.get(0);
		// alert(cr.checked); //检测这个checkbox是否给选中

		//==================dom对象==>jquery对象=============================
		// 对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);

		var inputDom=document.getElementById("id01"); //dom对象
		var $inputDom = $(inputDom); 				  //转换成jquery对象
		document.write($(inputDom).val()+"<br>");
		document.write($inputDom.val()+"<br>");
		//==================================================================
		// 获取jquery版本号
		document.write("jquery version:"+ $.fn.jquery);
	</script>
	</div>
</body>
</html>