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>