首頁 > 文章 > web前端 > jquery原理以及學習技巧介紹_jquery

jquery原理以及學習技巧介紹_jquery

WBOY原創: 2016-05-16 15:32:531075瀏覽

對於JQuery，想必大家都很熟悉。目前，很多web項目，在實作的過程中，考慮到各瀏覽器原生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));

首先，先看程式碼段一，我們建立一個javascript引用類型，可以根據該引用類型以及輸入的參數建立一個實例對象，輸入的參數模擬JQuery選擇參數，但沒有JQuery強大，支援部分類型。

我們知道，可以透過new JClass(...)來建構一個實例對象，這沒問題，但是JClass也是一個函數，可以直接被調用，而直接調用並不是我們想要的結果，為了防止JClass被開發人員直接調用，我們不能將JClass暴露給開發人員，那我們只能透過程式碼段二方式來建構JClass實例物件。

在程式碼段二，我們可以將JQuery暴露給開發人員，因為無論是透過new JQuery()還是JQuery(),傳回的都是JClass實例對象，這是我們要的結果。

在網頁開發過程中，為了程式碼的複用，我們常常會提供一些工具方法來方便開發，既然JQuery是完全暴露給開發人員使用的，我們完全可以將這些工具方法作為JQuery的靜態屬性。具體可參考程式碼段三，當然，我們還可以按照這種方式添加其它的工具方法如text,val,attr,css ........

這些工具方法確實不錯。 JClass實例物件（封裝了DOM）也存在一些公用的方法，剛好這些方法也可以藉助工具方法來實現，那怎麼為JClass實例物件建立公用方法呢？可以透過程式碼段四的方式實現（如果對這裡不理解，請百度JS的原型繼承概念）。

最後可透過程式碼段五，將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 代码片段。如 $('45a2772a6b6107b401db3c9b82c049c2text54bdf357c58b8a65c66d7c19c8e4d114') 等
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原理以及学习技巧介绍，内容很充实，信息量很大，需要同学耐心学习，希望从中有所收获吧。

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中利用各種循環進行遍歷的方式總結_基礎知識下一篇：JavaScript中利用各種循環進行遍歷的方式總結_基礎知識

看更多

jquery原理以及學習技巧介紹_jquery

相關文章