zoukankan      html  css  js  c++  java
  • 关于DOM对象与JQuery对象的那些事

                    这个问题源自上一次的工作室讨论班,主题是“jQuery选择器的使用”,在讨论班的结尾,我留了一个思考题:  jQuery获取到的对象和直接调用原生Javascript方法获得的对象有何区别呢?   这个思考题所引申出的内容就是今天的主题了:  关于DOM对象与jQuery对象的那些事~


     一、DOM对象与jQuery对象

                    jQuery是前端领域最流行的插件库之一了,是前端人员必学的技术之一。其强大的选择器、方便快捷的DOM操作能够在一瞬间俘获开发者的心灵,工作室里也有个代代相传的建议:千万不要太早学jQuery,不然会失去学原生JavaScript的动力的~(很多原生JavaScript里很麻烦的操作放在jQuery中区区几行代码就能实现,就会产生用jQuery打江山的幻想233333).。。。。。。 在初学者身上,常常会出现这样的错误:

                          

                   我也常常被问到这个问题:我已经引入JQuery文件了啊~ 为什么JQuery方法不能用呢?

                

              这里先简单提一下jQuery的实现原理: jQuery的所有方法都封装在核心对象jQuery里,使用这些方法肯定需要实例化。就拿jQuery选择器来说,如下图: 

                            

                    $其实就是jQuery本尊了,平时在使用选择器操作时,其实是使用了jQuery(selector)方法创建并返回了一个jQuery对象。这个jQuery对象中包含着    所获取的DOM对象,并且继承了jQuery对象的方法使得其可以调用之后jQuery带来的一系列非常方便快捷的方法。下面我们来看一下实例:

                              

                        在文档中创建一个DOM元素,然后分别用原生JavaScript方法和jQuery方法去获取它,得到了两个不同的返回结果。

                             

                          其中原生JavaScript方法直接返回了DOM对象,可以直接利用浏览器的DOM资源管理器显示在页面中。

                            、             

                             而jQuery选择器则返回了一个jQuery对象,其中有很多属性。需要特别关注的一点是,对象中的第一个子元素存储着这个元素的DOM对象,也就是用原生JavaScript方法获取到的那个东东~。


                         可以看到:

                        直接用JavaScript方法获取到的是DOM对象,其可以使用原生的JavaScript方法而不能使用jQuery方法(原生DOM对象并未继承到jQuery方法);

                        而通过选择器等jQuery方法获取到的jQuery对象,则无法使用原生JavaScript对象(经过了封装,该对象与DOM对象不同,DOM对象被封装在了一个属性中,故无法直接对jQuery对象使用JavaScript方法)。


      二、jQuery对象与DOM对象的相互转换

                            清楚了两种对象的不同,在编码的时候就会注意区分哪些方法可以用,哪些不可以用。  这个时候,两种对象之间的转换就很重要了,它可以让我们在项目中灵活转换这两种对象,种种方法我们都可以信手拈来~    下面总结一下转换的方法:

                  1、DOM对象转换成jQuery对象:

                         通过$(selector)获取到的元素就是jQuery元素了,可以说选择器方法就是所有jQuery对象的输出地了。

                                    

                                    

                                      对于一个已经获取好的DOM对象,直接用$()将它包起来就可以转换成jQuery对象了:

                                     


                              2、jQuery对象转换成DOM对象

                          上面提到了,jQuery对象中的第一项存储着该元素的DOM对象,我们直接访问这个属性即可得到该DOM元素。

                              3、注意区分两种对象。

                           jQuery的教材中都会提到,变量要用$开头。其实这条并不是像PHP一般严格的变量语法规定,这是鼓励大家养成一种良好的编程习惯。jQuery对象就用$开头的变量来存储,普通的JavaScript对象就用普通的变量名来存储,一目了然,可以避免很多不必要的错误。  尤其在代码量很大的程序中,如果没有清楚的标识,很容易发生开头那样的错误。


                            这就是关于DOM对象与jQuery对象之间的那些事了,是jQuery初学者们必须掌握的知识哦~  关于文章开头提到的jQuery实现原理,这也是我近期非常感兴趣的内容,在这里强烈推荐张鑫旭大神的博文: http://www.zhangxinxu.com/wordpress/2013/07/jquery-%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/  ~~

  • 相关阅读:
    [BJOI2019] 光线
    C# 从零开始写 SharpDx 应用 笔刷
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    PowerShell 拿到显卡信息
    PowerShell 拿到显卡信息
    win10 uwp 如何使用DataTemplate
    win10 uwp 如何使用DataTemplate
  • 原文地址:https://www.cnblogs.com/zhuwq585/p/5986008.html
Copyright © 2011-2022 走看看