jQuery分析
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1. jQuery在实现上也可以分成两大部分,一部分是jQuery的静态方法,也可以称作实用
方法或工具方法,通过jQuery.xxx()的jQuery命名空间直接引用。
第二部分是jQuery 的实例方法,通过jQuery(xx)或$(xx)来生成jQuery实例,然后通过这个实例来引用的方法。
这部分的方法大多数是从采用静态方法代理来完成功能。
真正的功能性的操作都在jQuery的静态方法中实现。
2. 这些功能细分起来,可以分成以下几个部分:
3. 1、Selector,查找元素。
这个查找不但包含基于CSS1~CSS3的CSS Selector功能,
还包含其对直接查找或间接查找而扩展的一些功能。
4. 2、Dom元素的属性操作。
Dom元素可以看作html的标签,对于属性的操作就是对于
标签的属性进行操作。
这个属性操作包含增加,修改,删除,取值等。
5. 3、Dom元素的CSS样式的操作。
CSS是控制页面的显示的效果。
对CSS的操作那就
得包含高度,宽度,display等这些常用的CSS的功能。
6. Event的操作。
对Event的兼容做了统一的处理。
7. jQuery(expression,[context]),jQuery(html),jQuery(elements),jQuery(callback)四种
构寻jquery对象的方式。
其中jQuery可以用$代替。
这四种是经常用到。
其实Jquery 的参数可以是任何的元素,都能构成jquery对象。
8. 匿名函数,是一种定义时不带名称的函数。
作用:对于在Dom对象上注册事件侦听器或者将函数作为参数传递给其他方法时特别有用。
可以封装并保护自己的所有函数、对象和变量。
而且由于它们位于同一个函数之中,所以它们之间仍然可以互相访问。
脚本其他部分的代码将无法使用你的函数。
自执行的匿名函数,能保证你的代码被包含在它自己的小空间内:
(function(){
//代码
})();
应该承认这是相当优雅的代码。
包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后的一对空括号立即执行返回的未命名函数。
向其中放入一个参数,理解更容易一些。
(function(arg){
alert(arg);
})(‘This will show in the alert box’);
使用匿名函数封装的另一个好处是,你不需要将自己的命名空间前缀逐一添加到众多的函数和对象上。
唯一需要添加命名空间,就是给window对象赋值的语句。
9. 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!
真神奇哦!
另一方面,在函数外部自然无法读取函数内的局部变量。
Js代码
function f1(){
var n=999;
alert(n); // error
这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。
如果不用的话,你实际上声明了一个全局变量!
Js代码
function f1(){
n=999;
}
f1();
alert(n); // 999
二、如何从外部读取局部变量?
出于种种原因,我们有时候需要得到函数内的局部变量。
但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。
那就是在函数的内部,再定义一个函数。
Js代码
function f1(){
n=999;
function f2(){
alert(n); // 999
}
}
在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。
但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。
这就是Javascript 语言特有的“链式作用域”结构(chain scope),
既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
function f1(){
n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
--------------------------------------------------------------------------------------------------------
三、闭包的概念
上一节代码中的f2函数,就是闭包。
闭包可以用在许多地方。
它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢?请看下面的代码。
Js代码
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中,result实际上就是闭包f2函数。
它一共运行了两次,第一次的值是999,第二次的值是1000。
这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是“nAdd=function(){n+=1}”这一行,首先在nAdd 前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。
其次,nAdd的值是一个匿名函数(anonymous function),而这个
匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
如果你能理解下面代码的运行结果,应该就算理解闭包的运行机制了。
Js代码
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return ;
};
}
};
alert(object.getNameFunc()());//The Window
在javascript中,数据类型可以分为“真值”和“假值”。
顾名思义,真值转换为bool时值为true;假值转换为bool时值为false。
下表罗列了一些常见的数据类型转换为bool时的值:
数据类型转换为bool后的值
null FALSE
undefined FALSE
Object TRUE
function TRUE
0 FALSE
1 TRUE
0、1之外的数字TRUE
字符串TRUE
""(空字符串) FALSE
在if表达式中,javascript首先将条件表达式转换为bool类型,表达式为真值则执行if中的逻辑,否则跳过。
于是有了:
Js代码
1.if(!a){
2. a="defaultValue";
3.}
下面我们再来看“&&”、“||”两个表达式。
由于javascript是弱类型语言,所以在javascript中这两个表达式可能跟其他语言(比如java)中不太一样。
Js代码
Js代码
E6 IE7 IE8(Q) 中遵循老旧的CSS 1 规范,当‘display’ 特性设定值为非'inline'、'block'、'none'、'inline-block'、'list-item' 时,'display' 特性设置将遭到忽略。
init: function( selector, context ) {
// Make sure that a selection was provided
selector = selector || document;
做好缓存
选中某一个网页元素,是开销很大的步骤。
所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。
比如,下面这样的写法就是糟糕的写法:
jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');
更好的写法是:
var cached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');。