您现在的位置: 万盛学电脑网 >> 程序编程 >> 数据库 >> 数据库综合 >> 正文

我眼中的jQuery

作者:佚名    责任编辑:admin    更新时间:2022-06-22

今天为大家介绍的是一位资深作者的jQuery学习心得,希望大家会喜欢。

作为一名多年从事Web应用开发的工作者来说,深感一个开发框架对开发者意味着什么。它好比一员战将的武器、士兵的配枪,其重要性不言而喻,那么,对于专业从事Web开发的人员来说,选择一个优秀的框架,势必会如虎添翼、事半功倍,而这个优秀的框架就是我们今天要介绍的主角——jQuery。

jQuery是目前使用最为广泛的一个JavaScript库,全球排名前100万位的网站中,有近一半以上在使用它开发,且微软也将它作为官方的标配开发工具,为它提供了相当大的支持,学习它的重要性和必要性是无须置疑的.

入门容易、使用方便是jQuery学习的一个很重要的特征。通过学习它,开发者既可以使用到最前沿的前端技术,又可通过一些简单代码实现复杂的效果,同时,还能为后续其他框架的学习打下必要的基础。

虽然入门容易,但真正掌握和理解jQuery内部的运行机制并不容易,这也是初学者普遍感入门易但提高难的原因所在。本人在2011年时,推出了自己的《jQuery权威指南》一书,并取得了不错的销量,改编成课件和视频后很荣幸地发布在慕课网,这本书旨在通过一个个精选示例,降低初学者入门成本,根据源码的分析,能逐步理解jQuery中的内部运行机制,进而不断提升。

人们常说,“知其然,更要知其所以然”,学习一门程序框架语言更是如此。要想学好jQuery,必须要理解jQuery的内部运行机制,而要理解这一点,就要从观察代码执行特征开始,概括来说,jQuery的执行特征有下列几个方面:

1、先选择,后操作

在jQuery框架中,使用率最多的就是选择器功能,所有页面中的操作都是先通过各种选择器,定位元素,再进行下一步操作,而这个过程,可以理解为向jQuery中的构造函数传实参的过程,也就是实例化一个jQuery对象,再借助对象进行后续操作。

如下列常用代码:

$(document)、$('#Id')、$('.Class')、$('#Id,.Class')

特有代码:

$('div:odd')、$('div:gt(2)')、$('div:animated')

因此,学习好jQuery框架的第一步是掌握它的选择器使用方法,在慕课网中的jQuery基础课程中,用了大量的章节来介绍选择器的功能,结合网上在线编辑代码器功能,可以时时验证自己所写的选择器代码。

(ps:想深入学习的小伙伴请戳阅读原文)

 2、同一个函数实现取值和赋值

在之前的JavaScript代码中,我们对一个变量或对象的取赋值通常要经过多个步骤才能实现,可在jQuery中,取值和赋值都是一个函数,由参数决定。

如下列代码:

$('div').html()、$('div').html('jQuery');

但使用时需要注意:如果对象是多个元素,这种方式在取值是只获取第一个元素中的内容,而赋值时则是全部对象。

更多介绍可以结合慕课网jQuery基础课程中的第5个章节进行学习。

 3.事件直接绑定元素

在jQuery中,绑定元素的事件非常方便,如下面代码:

$('div').click(function(e) {

$(this).html('我被人点了');

}

在上面代码中,元素

通过“.”逗号的形式就可以直接和事件绑定,还可以通过this返回绑定的对象元素,这种绑定事件的操作在jQuery内部都是通过bind方法来实现的,因此,我们可使用unbind方法来解除元素对事件的绑定,还可以通过one进行一次事件绑定,操作非常方便。

 4.封装

从原则上来说,任何一个框架都是一个封装好的盒子,根据需求输出不同的功能,但jQuery的封装做的是最好最全的一种,像ajax请求操作。

如下列代码:

$("#divload").ajaxStart(funA);

$("#divload").ajaxStop(funB);

$.ajax({

url: url,

dataType: "json",

success: fun1

});

在上面代码中,调用封装好的ajax方法就可以直接请求服务端数据,通过success回调函数就可以获取请求的数据,当开始或停止请求时,可以分别调用ajaxStart和ajaxStop全局方法进行监控,所有的这些,都体现了jQuery的封装效果,更多的封装功能可以结合慕课网jQuery基础课程中进行实践学习。

 5.强大的工具方法

除有完美的封装外,jQuery还有大量功能强大的工具类方法可以直接使用,开发人员无需再引入其它第三方插件工具。

如下列代码:

$.trim()、$.each()、$.type()

由于工具类方法直接定义在jQuery构造函数上,属于jQuery.method()格式,因此,开发人员可以直接使用,而无需再创建一个实例化对象。

后记

上述内容的介绍只是本人在实际开发过程中的一个经验感悟,其实jQuery的内容远不止这些,大家可以在慕课网通过jQuery基础课程进行系统学习。

但不管是何种学习,如果我们在平时学习过程中,多注意观察它执行时的特征,多提练出一些共性,多想想它的原理,入门后要想提升也并不是难事。

以上就是我们为大家准备的jQuery学习心得的相关内容,希望对大家可以有所帮助。