JQuery道理引见及学习方法

2024年1月20日 154次阅读 来源: 唐小新

媒介

关于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 代码片断。如 $('<span>text</span>') 等

  • 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;
   ... ...
}

（完）

    原文作者：唐小新
    原文地址: https://segmentfault.com/a/1190000003926465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞