位置: 编程技术 - 正文

jquery原理以及学习技巧介绍(jquery实现原理)

编辑:rootadmin

推荐整理分享jquery原理以及学习技巧介绍(jquery实现原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery工作原理,jquery原理和实现步骤,jquery技术简介,jquery工作原理,jquery技术简介,jquery的理解,jquery原理和实现步骤,jquery 原理,内容如对您有帮助,希望把文章链接给更多的朋友!

对于JQuery,想必大家都很熟悉。目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。JQuery上手简单,也很容易学,即使是刚接触JQuery的开发人员,借助JQuery手册,也很快能在项目中使用开发。

虽然JQuery相对简单,但要全面掌握,且快速灵活的使用它也并不那么容易,它提供了很多方法,包含了网页开发的各个知识面,所以要全面掌握这些知识点,个人认为还是需要对jquery有深入的理解,对这些知识点做分类整理记忆,这样你才能面对一些JQuery代码的时候不会感到迷惑,才会知道采用何种方式实现某个特效是最佳实践,才能快速的采用JQuery来进行项目开发。

简单模拟JQuery

JQuery里的代码是出了名的刁钻,里面的奇技淫巧太多太多,如果你想通过源码来学习JQuery,没有一定的功底是很难做到的。所以下面写一个非常简单的库来模拟JQuery,方便大家理解。总体代码

首先,先看代码段一,我们创建一个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文件中进行测试,可参照下面代码:

JQuery的知识点分类

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

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

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 ... 作为属性名来进行存储的。所以,根据以上特性,我们完全可以通过下面这种方式来访问元素:

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

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

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

在JQuery中,如何验证某个元素是否为空?

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

总结

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

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

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

标签: jquery实现原理

本文链接地址:https://www.jiuchutong.com/biancheng/370499.html 转载请保留说明!

上一篇:jquery事件的ready()方法使用详解(jquery的事件处理)

下一篇:基于jquery步骤进度条源码分享(jquery基本操作)

  • 个人私活 要交个人所得税吗
  • 收到单位借款如何处理
  • 装修行业小规模纳税人增值税专票
  • 不在经营范围内开票会受到什么惩罚
  • 固定总价合同中,承包人承担的价格风险
  • 印花税已经申报在哪里点交费
  • 电子承兑被拒付(可拒付追索)
  • 没有收入的小规模纳税人可以无票入费用吗?
  • 增值税一般纳税人证明文件
  • 本年利润结转在贷方表示什么意思
  • 私车公用产生的过路费开个人发票还是公司发票
  • 代扣代缴附加税怎么做账
  • 合并报表中长期股权投资包括
  • 增值税预缴税需要申报吗
  • 延期付款利息的税率是多少
  • 劳务费发票税率是多少
  • 实缴资本是真的吗
  • 什么凭证需要审计报告
  • 维修材料属于什么会计科目
  • 公司注销固定资产怎么处理税怎么交
  • 转移性支出与转移性收入相对应主要包括
  • 使用权资产的界定
  • 专票只能开一万的额度开了三万的发票
  • 税控盘登不上怎么回事
  • 开发票征收品目怎么填
  • 利息调整摊销的经济意义
  • 多交的公积金怎么退回来
  • 筹建期间的租赁费计入
  • 冲销货款应怎么记账
  • PHP:pg_lo_read()的用法_PostgreSQL函数
  • 个人所得税的减数为2000元,实行日期为
  • 进项税额不得抵扣的情况有哪些
  • vue使用技巧
  • php阿里云oss
  • 增值税收范围
  • nginx反向代理未知域名
  • php foreach as
  • 工会经费和残保金的缴纳比例
  • 公允价值模式的特点
  • 公司搞研发是什么意思
  • 筹建期间发生的收入
  • 企业注销前的账务处理
  • 租金发票的税率多少
  • 事业周转编制
  • 金蝶财务软件系统要求
  • 计提了年终奖还能冲回吗
  • 财报层次和认定层次
  • sql server 2008 2014
  • 银行对账单和存款日记账怎样核对并标识
  • 企业购买银行理财产品的会计处理
  • 设备维修三种形式
  • 工会经费计提基数包括福利费吗
  • 印花税处罚适用征管法六十四条规定
  • 退回工伤保险的现金流
  • 接受代销货物的会计分录
  • 对公账户明细入账怎么查
  • 差旅费借贷记账法的会计分录
  • 专家评审费需要上税吗
  • windows允许多用户登录
  • ubuntu搭建网站教程
  • linux服务器安装虚拟机
  • xp系统蓝屏解决
  • win8录音文件保存在哪
  • 部分用户开启隐私,暂时无法查看怎么办
  • win7电脑剪贴板里面的内容在哪打开
  • 在Linux系统中如何打开R语言控制台
  • 高危KB3045645!Win7/8.1别安装这个补丁
  • win10升级最新版
  • win8如何升级到win10系统版本
  • win10登录界面壁纸
  • 打开电脑显示配置windows,可是一直0%,怎么办
  • bootstrap不支持ie
  • jquery网页设计
  • 初始学历是什么意思
  • shell脚本实现ssh登录
  • Linux 中的time函数
  • 税务局与稽查局哪个好
  • 支付给境外的咨询费需要什么资料
  • 不能抵扣消费税口诀
  • 银行手续费所得税是否可以税前扣除
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设