ciya68

jQuery原理

发布时间: 2022.06.09
阅读量: 57
分享:

 jQuery原理

1. 引入jquery.js后: 在全局创建了一种新的类型jQuery

         (1). 构造函数: 负责创建当前类型的一个新的子对象

         (2). 原型对象: 负责保存该类型所有子对象共有的方法


2. 创建jQuery子对象: 要想使用jQuery家所有简化版函数,必须先创建jQuery家的子对象。然后,才能用子对象调用jQuery原型对象中的简化版函数


image.png



3. 问题:jQuery的简化版函数,都是为了简化DOM操作,来操作DOM元素的。比如: .click()代替DOM的onclick为元素绑定事件。.html()就是代替innerHTML获取或修改元素的内容。但是,如果只创建jQuery家子对象,是不知道该用这些函数操作哪个DOM元素的!


4. 解决:今后创建jQuery子对象时,都会顺便传入一个DOM元素,供jQuery简化版函数去操作!2种方式:


         (1). 在创建jQuery子对象时,提供一个选择器,去查找DOM元素,并将找到的DOM元素放入新创建的jQuery子对象中。

         var jq子对象=new jQuery("选择器")


         (2). 也可以直接在new jQuery()中放入一个已经获得的DOM元素参数。表示将一个原生DOM元素封装为jQuery类型的子对象

         var jq子对象=new jQuery(DOM元素对象)


         比如: var $this=$(this)  


    image.png


5. 结果:将来对jQuery子对象调用那些简化版的函数,其实操作的就是找到的这个DOM元素。


6. 问题: 简化版函数如何变成原生DOM的属性和方法呢?


7. 解决: 其实,每当我们调用一个简化版函数时,jq子对象都会自动将简化版函数翻译为对应的原生的属性和方法


image.png


8. 问题: jquery的作者认为,每次使用jquery都要new jQuery()太繁琐!


9. 解决: 简化:

        (1). 将new jQuery()放入jquery构造函数内。结果: 今后创建jQuery子对象时,不用每次都写new,只写jQuery()即可

        (2). 给jQuery起了一个别名叫$。从此要想创建jquery类型的子对象,只用$()即可。


10. $的本质: 创建一个jQuery类型的子对象,等效于new jQuery()



image.png


11. 问题: 使用原生的DOM查找函数找到的元素对象和使用jquery的$()找到的结果对象是不一样的!

         (1). 原生的DOM查找函数,找到的直接就是原生的DOM元素

         (2). $()最后获得的是一个jQuery类型的子对象,其中包含着找到的原生DOM元素对象


         如何区分?


12. 解决: 今后,凡是用$()找到的结果对象,都要以$开头命名!


image.png


13. 问题: jQuery事件处理函数中的this


      (1). jQuery事件处理函数的原理和DOM事件处理函数的原理是一模一样的。$btn.click(function(){ ... })就等效于btn.οnclick=function(){ ... }


      (2). 所以, jQuery事件处理函数中的this->当前触发事件的DOM元素对象


      (3). 但是, this默认指的是当前正在触发事件的原生DOM元素,无法使用jQuery家所有简化版函数


14. 解决: 只要将this,用$()包装一下,包装成一个jQuery类型的子对象。就可以使用jQuery类型的子对象调用简化版函数,来操作this指向的DOM元素对象。


         var $btn=$(this)


image.png


15. 问题: 案例中, 获取按钮的内容用.html(),修改按钮的内容用的还是.html()。一个函数,怎么既能获取,又能修改呢?


16. 总结: 其实大部分jquery简化版函数都有三大特征:


         (1). 一个函数两用: 多数和修改相关的函数,都是一个函数两用。即能获取旧值,又能修改新值。如何判断本次是该修改,还是该获取?重载。


         a. 如果本次调用函数时,没有传新值,就默认执行获取旧值的操作

         b. 如果本次调用函数时,传了新值,就自动切换为修改操作。


        

 (2). 自带遍历:

         a. 其实, jquery查找结果对象是一个类数组对象。无论选择器找到多少元素,都可以包裹进jquery对象中

         b. 只要对整个jQuery子对象调用一次简化版函数,就等效于对jquery对象内每个DOM元素都调用一次对应的原生DOM属性或方法。无需自己写for循环。


image.png

         c. 示例: 使用jQuery记录三个按钮各自的单击次数


         2_jQueryAPI.html

image.png

image.png


         (3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。(需要循序渐进,以后的知识点中,会逐步介绍,请持续关注,待续...)



分享到微信朋友圈 ×

Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号 Copyright © 2016 ciya. Inc. All rights reserved