jQuery原理与学习技巧介绍
对于jQuery,您必须熟悉它。目前,许多Web项目在实现过程中考虑到了浏览器的兼容性。他们中的大多数选择jQuery或jQuery像框架开发网页effects.jquery简单易学。即使刚刚接触jQuery的开发人员也借助jQuery手册快速地使用项目中的开发。虽然jQuery是相对简单的,但要完全掌握,快速灵活的使用它是不那么容易,它提供了许多方法,包括Web开发的各种知识,从而全面掌握知识,个人认为还是需要深入了解jQuery,这些知识点梳理记忆让你无法脸,当一些jQuery代码是困惑的,可我知道在这一个特殊的效果是最好的实践方式,可以快速使用jQuery开发项目。
jQuery的简单模拟
jQuery代码很复杂,里面的奇技淫巧太多,如果你想通过源代码学习jQuery,没有一定的知识是很难做到的。所以这是一个非常简单的jQuery库来模拟,便于你了解。
通用代码
(函数(窗口){)
var doc = window.document;
-两个C/O代码
函数(选择器){
返回新对象(选择);
}
三 / /代码----
jquery.html =功能(obj){
如果(obj obj.nodetype = 1){
返回obj.innerhtml;
}
}
-编码
Var JClass =功能(选择){
如果(选择器。节点类型){ / /如果传入的DOM元素
this.length = 1;
} else if(selector.charat(0)=#){ / /如果输入形式的# ..
this.length = 1;
这{ 0 } = doc.getelementbyid(selector.slice(1));
} else if(typeof选择器= 'String'){
输入 / /是一个字符串,假设所有的HTML标签等as'div,'p'等
无功节点= doc.getelementsbytagname(选择器);
this.length = nodes.length;
对于(var i = 0,len = nodes.length;我< len;i++){
这个{节点} { };
}
}其他单词不是单词,而不是识别。
this.length = 0;
}
};
四代码
jquery.prototype.html =函数(){
如果({ { 0 }){
返回JQuery.html(这{ 0 });
}
}
jclass.prototype = jquery.prototype;
-五- /代码
美元= window.jquery = jQuery的窗口;
}(窗口);
首先,让我们先看看代码段。我们创建一个Javascript引用类型。我们可以根据引用类型和输入参数创建实例对象。输入参数模拟jQuery选择参数,但没有足够强大的支持某些类型的jQuery。
我们知道,通过新JClass(…)来构造一个对象的一个实例,这是没有问题的,但JClass是一个函数,可以直接调用,而直接调用并不是我们想要的结果,为了防止对象开发者直接调用,我们不能让JClass给开发商,然后,我们只能通过代码来创建的类对象实例的两种方式。
在代码段,我们可以让jQuery开发人员,因为无论是通过新的jQuery和jQuery()(),返回JClass的例子,这是我们想要的结果。
在web开发过程中,为了重用代码,我们经常提供一些工具和方法来促进开发。因为jQuery是完全暴露给开发者,我们可以把这些工具作为jQuery静态属性。具体参考代码三,当然,我们也可以这样,如文本、Val、属性添加其他工具,CSS…
这些工具都是真的good.jclass实例对象(封装DOM)也有一些常用的方法。这些方法也可以借助工具来实现。我们如何创造JClass的实例对象的常用方法它可以在代码段四的方式完成的(如果不明白,请百度JS的原型继承的概念)。
最后,您可以使用代码段五将jQuery作为别名,并将其作为一个全局变量公开,然后将代码导入到HTML文件中进行测试,参考下面的代码:
jquery-t2
点击查看效果
div的文本值
警报(美元。HTML(document.getelementbyid('result '))); / /点击查看效果
警报(美元。HTML)(('span ')); / /点击查看效果
警报($(' # TST)。Html()); / / div的文本值
jQuery中知识点的分类
通过jQuery库的仿真结果,我们应该知道jQuery DOM元素的主要功能:通过强大的选择器,然后针将包装成日常操作对应于这些DOM元素的方法,如价值、分配、修改和删除,以及jQuery的Web开发提供了一些工具,如每个,Ajax,ISArray扩展等。所以总的来说,jQuery的知识点可以分为三类:
jQuery选择器
jQuery对象的操作,如DOM操作、表单操作等。
jQuery的工具方法
jQuery插件编写(知识扩展)
jQuery是如此受欢迎,网上的信息太多,所以很多新手不知道从哪里学来见一个博客,在双重来源,收集了大量的资料,最后发现没有时间学习,甚至花很多时间学习,学习成为jQuery系统不结束所有的遗忘当开发,你只能把手册,你能写出好的代码不可能的u3002
现在我分享我认为比较适合初学者一步一步学习的信息。
介绍(书+博客)
夏普jQuery(第二版)
jQuery设计思想
jQuery深入学习(深入研究jQuery和Javascript)
源分析系统
jQuery的一些概念
学习是永远的记忆,而记忆会被遗忘是迟早的事。真正学到技术,最基本的原则是理解它。学习jQuery也在学习jQuery的知识点,你首先要理解一些概念,帮助你理解这些知识要点。有jQuery三个主要概念:jQuery(),jQuery对象和DOM对象。
让我们从DOM对象开始,这非常简单。它定义了一组访问HTML文档对象的属性、方法和事件。在jQuery,我们通常直接操作DOM API,熟悉使用方,getelementbytagname等等。
它在jQuery中有一个别名。通过上面部分的仿真代码(与模拟代码中的jQuery相对应),我们可以看到实际上它是一个函数。更详细的一点是jQuery对象的工厂方法。它可以根据不同的条目构造jQuery对象,例如:
字符串表达式,如$('span '),$('span。类),$(' # ID),等等。
HTML代码片段,比如$(中的)等
DOM元素。如$(DOM)DOM = document.getelementbyid / / var假说('id');
js函数。例如$(函数(…){ });一般对象或数组。如果{,}…}。
除了创建jQuery对象,jQuery还有很多jQuery本身的静态方法,它也可以被称为工具方法,如每个、Ajax、修剪等,这些工具方法不仅在Web设计中经常使用,而且作为工具实现jQuery对象的原型方法。
jQuery对象,一个很重要的概念,类似于对象实例的模拟代码,通过jQuery构建通常的实例。在jQuery,我们经常看到jQuery对象如$(' # ID),$('div),等等。为jQuery对象,我们应该了解以下几点:
1,jQuery对象继承了jQuery原型(原型)的所有属性和方法。
2、jQuery对象不是数组,而是使用类似的阵列结构来存储元素,和元素的存储是通过选择器的DOM对象。指的仿真代码(JClass以上各章实例对象),jQuery对象具有长度属性,一些存储在DOM对象的当前对象表示,通过选择DOM对象用于0, 1, 2。和3…作为存储的属性名称,因此,基于上述特性,我们可以以以下方式访问元素:
var obj = $('div);
对于(var i = 0,len = objs.length;i <长度;i++){
var o =对象{我}; / /获取DOM元素
…
}
一般来说,jQuery对象、jQuery对象和DOM对象之间的关系是三:jQuery是构建jQuery对象的工厂方法;jQuery对象是一个类数组对象,它存储DOM对象。
为了理解三者之间的关系,当我们理解下面的知识点时,我们就比较容易理解了:
你如何理解过滤器选择器比如$('div:第一)。
如果你了解jQuery对象的内部结构,jQuery过滤选择器是容易理解的,如:第一是对'0'object jQuery对象的属性(封装jQuery对象),同样:去年作为length-1的元素属性,情商(指数)从指标属性的元素。
在jQuery中,如何验证一个元素是否为空
var $ O = $('div.class);
如果($ = NULL){错误的方式
/没有找到什么
......
}
/正确的方式
(如果)($ o.html = = null){
/没有找到什么
…
}
/正确的方式
如果($ o.length){
/没有找到什么
…
}
jQuery对象和DOM对象如何转换
VaR DOM = document.getelementbyid('id');
将DOM对象转换为jQuery对象
var $ DOM(DOM);
将jQuery对象转换为DOM对象
对于(var i = 0,len = $ dom.length;i <长度;i++){
var;
…
}
总结
作为jQuery,它很简单,但是如果你想快速有效的使用它,你还需要了解jQuery。这些都只是在学习和整理过程中的一些个人的感受,建议在研究中根据自己的习惯,形成一套自己的知识体系,便于一天之后的发展,但也容易访问其他人的代码,注意到一些有趣的小问题。如果你感兴趣的话,想一想。
问题1。你认为下列哪种方式更好为什么
VaR(文本=美元美元#文本);
VaR的TS = text.text美元(美元);
VaR(文本=美元美元#文本);
变量$ $ = text(text);
问题二。下面的代码中的这个是什么实现的一般原则是什么
选择复制到笔记中
$(#盒)。Click(function(){)
var obj =这;
…
}
以上是jQuery的原理和学习技巧的介绍。内容很充实,信息量很大。我们需要学生耐心地学习,希望从中得到一些结果。