首先,我们需要知道,为什么我们需要转化两者,原因在于,两者提供的方法不能共用。

比如:     

 $("#id").innerHTML;
document.getElementById(id).html();    

 以上代码都是错误的,

 第一行,$("#id") 是jQuery 对象,而innerHTML是Dom对象的方法;

第二行,document.getElementById(id) 是Dom对象,而html() 是jQuery对象的方法;

正如我们开始说的,两者提供的方法,不能为非本对象所用,即jQuery对象无法使用Dom对象提供的方法,Dom对象也无法使用jQuery对象提供的方法 。

 但有时,我们需要使用本对象中没有提供的方法,此时,需要转化两者。

 风格约定:我们约定好,jQuery对象变量名前加上$符号。

 let $str = $(".txt") // jQuery 对象
let str = $str.get(0); // Dom 对象

  

1.jQuery 对象转化为 Dom 对象

 (1)  jQuery 对象是一个数组对象,所以,我们可以使用[index]将其转化为Dom对象:    

  let $str = $(".txt") // jQuery 对象
let str = $(".txt")[0]; // Dom 对象

 (2) jQuery对象本身也提供了一种方法来转化为Dom对象,get(index):

  let $str = $(".txt") // jQuery 对象
let str = $str.get(0); // Dom 对象

 

 2.Dom对象转化为jQuery对象:

    Dom 对象转化为jQuery对象,只需用$()把Dom对象包裹起来,就可以获得jQuery对象

 let str = document.getElementById(id); // Dom 对象
let $str = $(str); // jQuery 对象

  

 我们可以通过console.log() 打印出两者

这样,我们就能直观的检测到,当前对象具体是Dom对象,还是jQuery对象。

 (完)                                                                                      

最新文章

  1. 无需Try catch 的UI事件封装类
  2. 完成端口(Completion Port)详解(转)
  3. Guardian of Decency(二分图)
  4. wince下的CPU和内存占用率计算
  5. hdu 4622 Reincarnation
  6. Android 第三方应用接入微信平台(2)
  7. windows server 2008 防火墙配置
  8. Postman newman
  9. 【行业干货】ASOS:外来快时尚品牌的入华战 - 行业干货 - 京东内部论坛 - Powered by Discuz!
  10. dot.js教程文档api
  11. cocos2d-x 3.1.1 学习笔记[13] listen 监听器
  12. phpcmsV9手机站内容页有时内容不显示
  13. oracle得到日期对应的星期
  14. windows下Eclipse操作MapReduce例子报错:Failed to set permissions of path: \tmp\hadoop-Jerome\mapred\staging\
  15. MySQL中的用户与授权
  16. JAVA多线程学习笔记(1)
  17. angular6实现对象转换数组对象
  18. PAT1001A+B Format
  19. Wireshark安装使用及报文分析(图文详解)
  20. python_str 字符串的所有方法

热门文章

  1. 51、tf-idf值提取关键词
  2. iframe调用页面中的局部部分
  3. Spingboot整合Redis,用注解(@Cacheable、@CacheEvict、@CachePut、@Caching)管理缓存
  4. docker-compose的scale的用法
  5. vue.js实现用户评论、登录、注册、及修改信息功能
  6. centos6系列更换阿里yum源
  7. 人生苦短,我学PYTHON
  8. Centos6安装破解Confluence6.3.1
  9. 笔记60 Spring+Mybatis整合
  10. MySql为某个表增加rownumber