1 整个jQuery的结构
(function (window,undefined) {
// 构造jQuery对象
var jQuery=function () {
var jQuery=function (select,context) {
return new jQuery.fn.init(select,context,rootjQuery);
};
return jQuery;
}();
// 工具方法
// 回调函数列表
// 异步对象
// 功能测试
// 数据缓存
// 队列
// 属性操作
// 事件系统
// 选择器
// DOM遍历 过滤查找
// DOM操作
// 样式操作
// Ajax异步请求
// 动画
// 坐标尺寸等
window.jQuery=window.$=jQuery;
})(window);
2 构造函数的7种用法
2.1 jQuery(selector [,context])
当选择器是#id时，内部调用document.getElementById()，其他是调用.find()方法。
$(".my").click(function () {
$("span",this).text("bolala");
})
2.2 jQuery(html[,ownerDocument])
当传入的是单独标签时，会调用原生的createElement，当是复杂html时调用$.buildFragment()创建。
第二个可选参数ownerDocument指定文档对象，默认是当前的document。
$("<p>BBQ</p>").appendTo($(".my"));
2.3 jQuery(element)
常用于事件监听中，将DOM元素封装成jq对象。
$(".my").click(function () {
$(this).slideToggle();//封装DOM元素
})
2.4 jQuery(object)
将js对象封装成jq对象。
2.5 jQuery(callback)
相当于在document上绑定ready事件。
$(function () {
console.log("触发事件")
});
$("document").ready(function () {
console.log("触发ready事件")
})//两个效果相同
2.6 jQuery(jQuery object)
传入jq对象，创建jq对象副本引用相同的DOM元素。
2.7 jQuery()
不传入参数，返回空jq对象。
3 jQuery构造函数的结构
(function (window,undefined) {
// 构造jQuery对象
var jQuery=(function () {
var jQuery=function (select,context) {
return new jQuery.fn.init(select,context,rootjQuery);
};//3
// jQuery构造函数的原型
jQuery.fn=jQuery.prototype={
constructor:jQuery,
init:function (select,context,rootjQuery) { }
// 其他原型属性和方法
};//5
jQuery.fn.init.prototype=jQuery.fn;//6
jQuery.extend=jQuery.fn.extend=function () { };//7
jQuery.extend({
// jQuery上扩展的静态属性和方法
});//8
return jQuery;//4
})();//2
window.jQuery=window.$=jQuery;
})(window);//1
1处 执行自调用匿名函数，执行所有代码。
2处 返回jQuery，后面暴露给window,并且定义$简写。
3+4处 又定义一个jQuery并返回给外层jQuery，3处的函数就是一个构造函数。
console.log($);
/*
* ƒ ( selector, context ) {
* return new jQuery.fn.init( selector, context, rootjQuery );
* } 这就是jQuery构造函数
*/
5处覆盖构造函数的原型对象，也定义了原型方法jQuery.fn.init方法，实际上当调用构造函数时，返回的是init的实例，
另外还有一些其他的原型属性和方法。
6处用jQuery.fn覆盖jQuery.fn.init的原型。
7处定义extend方法 合并多个对象到第一个对象。
8处 定义构造函数上的静态属性和方法。
tips1:
return new jQuery.fn.init(select,context,rootjQuery);
这样写当我们创建jQuery对象时，可以省略new直接写jQuery()。
tips2:
jQuery.fn.init.prototype=jQuery.fn;
jQuery构造函数实际上是init的实例，用jQuery的原型覆盖init的原型可以使init()的实例访问到jQuery构造函数的原型属性和方法。
4 .extend([deep,] target,object1 [,objectN])
jQuery.extend()是扩展静态属性和方法，jQuery.fn.extend()是扩展原型属性和方法。
用法：如果有两个或更多的对象，会合并到第一个对象，如果只用一个对象，jQuery和jQuery.fn会被当成目标对象，通过这种方式可以添加属性和方法，常常用于编写插件和处理函数的参数。
var obj=$.extend({1:"bolala",2:"hashqi"},{2:"bbq"});
console.log(JSON.stringify(obj));//{"1":"bolala","2":"bbq"}
5 原型属性和方法
- selector 选择器表达式
- jquery 版本号
- length 元素个数
- size() 元素个数
$content=$("ul li");
console.log( $content.selector);//ul li
console.log( $content.jquery);//1.7.1
console.log( $content.length);//5
console.log( $content.size());//5
- toArray() 将jQuery对象这种类数组转换为真正的数组
（类数组：具有length，并且有数组下标，例如函数参数argument） - get() 有参数时返回指定位置的DOM元素，没有参数时调用toArrary()
$content=$("ul li");
console.log( $content.toArray());//所有DOM的数组
console.log( $content.get());//所有DOM的数组
console.log( $content.get(2));//第三个li DOM元素
- $.each()静态遍历方法，对于数组和类数组通过下标遍历，其他对象通过属性名(for-in)遍历。
- each()遍历jq对象并执行函数，直接用$.each()实现,所以一定是数字下标。
$content=$("ul li");
$content.each(function (i,item) {
console.log(i+":"+item);
// 0:[object HTMLLIElement]等
});
var obj={name:"bolala",age:25,msg:"hello"} ;
$.each(obj,function (i,item) {
console.log(i+":"+item);
//name:bolala等
})
- $.map()遍历数组或对象处理执行函数，结果放入新数组中。
- map()遍历jq对象处理执行函数，结果放入新jq对象中。
$content=$("ul li");
console.log($content.map(function (i, item) {
return $(this).text();
}).get().join(","));//1,2,3,4,5
console.log($.map([3,6,2,5],function (n,i) {
return n+2;
})); //[5, 8, 4, 7]
- .pushStack() 入栈
- .end() 出栈 返回上一个筛选结果
$("ul").css({"background": "red"})
.find("li").height("50px")
.end().css({"color": "white"})
- .eq() 指定位置的元素
- .first() 第一个元素
- .last() 最后一个元素
- .slice() 一个范围内的元素
console.log($("ul li").slice(0, 2));//前两个元素
- .push() 末尾添加
- .sort() 排序
- .splice() 插入，删除，替换等
6 静态属性和方法
- jquery.noConflict() 解除$的引用
- jQuery.parseJSON() 解析成js数据
var obj={name1:[{item1:"1",item2:"2",item3:"3"}],name2:[{item1:"1",item2:"2",item3:"3"}]};
var str = '[{"name": "bolala", "age": "24"},{"name": "bolala", "age": "24"}]';//json数组
console.log($.parseJSON(str));
console.log(JSON.parse(str));
console.log(JSON.stringify(obj));
//{"name1":[{"item1":"1","item2":"2","item3":"3"}],"name2":[{"item1":"1","item2":"2","item3":"3"}]}
- jQuery.now() 当前时间的毫秒表示
console.log($.now());//1582010627439
网友评论