Jquery 원리 및 학습 기술 소개_jquery-JS 튜토리얼-php.cn

모든 사람이 JQuery에 익숙해야 합니다. 현재 많은 웹 프로젝트의 구현 과정에서 각 브라우저의 기본 JS API 호환성을 고려하여 대부분 웹 페이지 효과를 개발하기 위해 JQuery 또는 JQuery와 유사한 프레임워크를 선택합니다. JQuery는 시작하기 쉽고 배우기 쉽습니다. JQuery를 처음 접하는 개발자라도 JQuery 매뉴얼의 도움을 받아 프로젝트에서 빠르게 사용할 수 있습니다.

JQuery는 상대적으로 간단하지만, 웹 개발의 다양한 지식 측면을 포괄하는 많은 방법을 제공하므로 완전히 익히고 빠르고 유연하게 사용하기가 쉽지 않습니다. 일부 JQuery 코드를 접할 때 혼란스럽지 않고 특정 특수 효과를 얻기 위해 어떤 방법을 사용해야 하는지 빨리 알 수 있도록 jQuery에 대한 심층적인 이해가 필요하고 이러한 지식 포인트를 분류하고 구성해야 한다고 생각합니다. 프로젝트 개발에는 JQuery를 사용하세요.

JQuery의 간단한 시뮬레이션

JQuery의 코드는 까다롭기로 악명 높고 그 안에 트릭과 트릭이 너무 많습니다. 소스 코드를 통해 JQuery를 배우고 싶다면 특정 기술 기반 없이는 어려울 것입니다. 이제 모든 사람이 이해할 수 있도록 JQuery를 시뮬레이션하는 매우 간단한 라이브러리를 작성해 보겠습니다.
전체 코드

(function(window) {
 var doc = window.document;
 // -------------代码段二 ------------------
 var JQuery = function(selector) {
  return new JClass(selector);
 }
 
 // --------------- 代码段三 ----------------
 JQuery.html = function(obj) {
  if(obj && obj.nodeType === 1) {
   return obj.innerHTML;
  }
 }
 
 // ---------代码段一 --------------
 var JClass = function(selector) {
  if (selector.nodeType ) { // 如果传入的是DOM元素
 this.length = 1;
  }else if(selector.charAt(0) === '#') { //如果传入的是'#..'形式
 this.length = 1;
   this[0] = doc.getElementById(selector.slice(1));
  }else if(typeof selector === 'string') {
   //传入的是字符串，假设全部为html标签 ，如'div' 'p'等
   var nodes = doc.getElementsByTagName(selector);
   this.length = nodes.length;
   for(var i=0,len=nodes.length;i<len;i++) {
    this[i] = nodes[i];
   }
  }else { //都不是的话，就不识别咯
   this.length = 0;
  }
 };
 
 // ------------ 代码段四 --------------------
 JQuery.prototype.html = function() {
  if(this[0]) {
   return JQuery.html(this[0]);
  }
 }
 JClass.prototype = JQuery.prototype; 

 // ------------ 代码段五 ---------------
 window.$ = window.JQuery = JQuery;
 
}(window));

로그인 후 복사

먼저 코드 스니펫 1을 살펴보겠습니다. javascript 참조 유형을 생성합니다. 참조 유형과 입력 매개변수를 기반으로 인스턴스 객체를 생성할 수 있지만 입력 매개변수는 JQuery 선택 매개변수를 시뮬레이션합니다. JQuery만큼 강력하지는 않지만 일부 유형을 지원합니다.

new JClass(...)를 통해 인스턴스 객체를 생성할 수 있다는 것을 알고 있는데 이는 문제가 없지만 JClass도 함수이므로 직접 호출할 수 있으며 직접 호출은 그렇지 않습니다. 결과적으로 개발자가 JClass를 직접 호출하는 것을 방지하기 위해 JClass를 개발자에게 노출할 수 없으므로 코드 조각을 통해서만 JClass 인스턴스 객체를 구성할 수 있습니다.

코드 세그먼트 2에서는 개발자에게 JQuery를 노출할 수 있습니다. new JQuery()를 통해서든 JQuery()를 통해서든 반환되는 것은 우리가 원하는 결과인 JClass 인스턴스 객체이기 때문입니다. .

웹 개발 과정에서 코드를 재사용하기 위해 개발을 용이하게 하기 위해 몇 가지 도구 메서드를 제공하는 경우가 많습니다. JQuery는 개발자에게 완전히 노출되므로 이러한 도구 메서드를 JQuery의 정적 속성으로 완전히 사용할 수 있습니다. 자세한 내용은 코드 세그먼트 3을 참조하세요. 물론 이러한 방식으로 text, val, attr, css.....

와 같은 다른 도구와 메서드를 추가할 수도 있습니다.

이러한 도구와 방법은 정말 좋습니다. JClass 인스턴스 객체(DOM 캡슐화)에는 일부 공용 메소드도 있으며 이러한 메소드는 도구 메소드의 도움으로 구현될 수도 있습니다. 그렇다면 JClass 인스턴스 객체에 대한 공용 메소드를 생성하는 방법은 무엇입니까? 이는 코드 세그먼트 4를 통해 달성할 수 있습니다(이해가 이해되지 않으면 Baidu JS의 프로토타입 상속 개념을 참조하세요).

마지막으로 코드 세그먼트 5를 통해 JQuery에 $ 별칭을 지정하고 전역 변수로 노출할 수 있습니다. 그런 다음 테스트를 위해 HTML 파일에 코드를 삽입합니다. 다음 코드를 참조하세요.

<html>
<head>
 <title>jquery-t2</title>
 <script src="JQ.js"></script>
</head>
<body>
 <div style="margin:10px 10px;">
  <span id='result'>
  点击看效果
  </span>
 </div>
 <div id='tst'>div文本值</div>
</body>
<script>
 alert($.html(document.getElementById('result '))); //点击看效果
 alert($('span').html()); //点击看效果
 alert($('#tst').html()); //div文本值
</script>
</html>

로그인 후 복사

JQuery的知识点分类

通过上面模拟的JQuery库，我们应该可以大概知道JQuery的主要功能：通过强大的选择器获得DOM元素，然后针将这些DOM元素的日常操作封装成对应的方法，如取值、赋值、修改、删除等，同时JQuery还为网页开发提供了一些工具类方法，如each、ajax、isArray、extend等。所以总的来说，JQuery知识点可分为三大类：

JQuery选择器
JQuery对象的操作，如DOM操作、表单操作等
JQuery的工具方法
JQuery插件编写（知识扩展）

JQuery太流行了，网上的资料太多太多，以致于很多初学者根本不知道从哪学起，这里看一篇博客，那里翻一翻源码，收集了大量的资料，最后发现根本没时间学习，即使花了大量的时间学习，学习到的JQuery也成不了一个体系，到最后全部忘记了。开发的时候又只能去翻手册，一直翻手册能写出好的代码么？不可能吧。

下面我分享一下个人认为比较好的资料供初学者一步一步学习。

JQuery入门(书籍+一篇博客)
锋利的JQuery（第二版）
JQuery设计思想
JQuery深入学习（深入学习JQuery和javascript很好的资料）
JQuery源码分析系统

JQuery的一些概念

学习永远都不是记忆，记忆的东西迟早会被遗忘。真正要学习一门技术，最基本的原则就是要理解它。学习JQuery也是，在学习JQuery的知识点时，你首先要理解一些概念来辅助你理解这些知识点。 JQuery中的概念主要有这三个： JQuery()、JQuery对象和DOM对象。

先说DOM对象，这个很简单，它定义了访问HTML文档对象的一套属性、方法和事件，没有JQuery前，我们通常直接操作DOM，比较熟悉的API有getElementById 、GetElementByTagName等。

JQuery，它在JQuery中有个别名 $ 。通过上面章节的模拟代码（对应模拟代码中的JQuery)可知，其实就是一个函数，说得更细致点就是JQuery对象的工厂方法，它可以根据不同的入参来构造JQuery对象，如：

字符串表达式。如 $('span') 、$('span .class')、$('#id')等
HTML 代码片段。如 $('text') 等
DOM元素。如$(dom) //假设 var dom = document.getElementById('id');
JS Function 。如 $(function(...) { ... } ); 一般对象或数组。如 { ｝、[ ... ]等

JQuery除了能创建JQuery对象的同时，JQuery自身也有很多静态方法，也可以称为工具方法，如 each、ajax、trim等。这些工具方法不仅在网页设计时常常会被用到，而且也会被当作工具方法用来实现JQuery对象的原型方法。

JQuery对象，非常重要的一个概念，类似于模拟代码中的JClass实例，通常是通过JQuery构造出的实例。在JQuery中，我们常常见到的JQuery对象是这样的： $('#id') 、$('div')等。关于JQuery对象我们要明白以下几点：

1、JQuery对象继承了JQuery原型(prototype）的所有属性和方法
2、JQuery对象不是数组，但是采用了类似数组的结构来存储元素，而且存储的元素是通过选择器获取得到的DOM对象。参照上面章节的模拟代码(JClass实例对象），JQuery对象有个length属性，表示当前对象里存储DOM对象的个数，而这些通过选择获得的DOM对象，是采用下标为0、1、2、3 ... 作为属性名来进行存储的。所以，根据以上特性，我们完全可以通过下面这种方式来访问元素：

var objs = $('div');
for(var i=0,len=objs.length;i<length;i++) {
 var o = objs[i]; //获取dom元素
 ... ...
}

로그인 후 복사

综合来说，JQuery、JQuery对象、DOM对象三者之间的关系是： JQuery是个工厂方法，用来构造JQuery对象； JQuery对象是个类数组对象，里面存储了DOM对象；

理解了三者之间的关系，我们在理解下面知识点时，相对来说也就比较容易了：

关于过滤选择器如何理解？如$('div:first') 。
如果理解了JQuery对象的内部结构，理解JQuery的过滤选择器就很容易了，如 :first 其实就是取JQuery对象属性为'0'的对象（封装成JQuery对象），同理 :last取的是属性为 length-1 的元素，:eq(index)取的是属性为index的元素。

在JQuery中，如何验证某个元素是否为空？

var $o = $('div .class');
if($ == null) { // 错误的做法
 //什么都没找到
 ......
 } 
//正确的做法 
if($o.html() == null) {
 //什么都没找到
 ... ...
 } 
//正确的做法 
if($o.length) {
 //什么都没找到
... ...
 }

로그인 후 복사

JQuery对象和DOM对象如何转换？

var dom = document.getElementById('id');
// DOM对象转换成JQuery对象
var $dom = $(dom); // 参照JQuery对象的构造方式

// 将JQuery对象转换成DOM对象
for(var i=0,len=$dom.length;i<length;i++) {
 var o = $dom[i]; //获取dom元素
 ... ...
}

로그인 후 복사

总结

关于JQuery，上手虽然简单，但如果要高效快速的使用开发，还是需要好好理解下JQuery的。以上只是个人学习过程中的一些感悟和整理，建议各位在学习时也按照自己的思维习惯形成一套自己的知识体系，一来便于日后的开发，二来也便于查阅别人的代码。最后附注一些有意思的小问题，各位有兴趣就思考下吧。

问题一. 你觉得下面哪种方式代码好一点？为什么？

 // 方式一
var $text = $("#text");
var $ts = $text.text();

//方式二
var $text = $("#text");
var $ts = $.text($text);

로그인 후 복사

问题二. 下面代码中的this是什么呢？大概实现原理有什么？

全选复制放进笔记
$('#box').click(function(){ 
 var obj = this;
 ... ...
}

로그인 후 복사

以上就是关于jquery原理以及学习技巧介绍，内容很充实，信息量很大，需要同学耐心学习，希望从中有所收获吧。