JQuery 获取DOM初始化 ECharts

刚开始用ECharts,看了百度的例子,是使用原生的方法获取div,然后再初始化Chart组件:

var myChart = echarts.init(document.getElementById('main'));

尝试用JQuery获取DIV设置后,发现图直接消失了,后来用Chrome浏览器debug代码,发现document.getElementById$('#id') 返回的结果不一样。

然后用下面方式试了下,就可以了:

var myChart = echarts.init($('#main')[0]);
// 或者
var myChart = echarts.init($('#main').get(0));

平时一直使用这种方式来获取DOM元素,想当然的认为JQuery返回的就是DOM元素了,通过这次调试,发现其实并不是....

通过调试发现JQuery一直是返回数组的,即使未获取到DOM,也返回一个空数组。


JQuery 这么实现有这么几个好处,个人理解:

  • 返回一个JQuery对象,而不是DOM对象,主要是为了能够提供更多的方法,如val()、text()、html()等,提供丰富的操作方法
  • 获取的DOM元素是一个数组,这应该是因为获取的DOM元素个数不定,这样使用者可以不用考虑里面元素的个数,直接操作即可,内部实现也统一了。
  • 可以使用链式操作
  • 一般使用JQuery之后,很少情况再拿到DOM元素去做一些操作,而且操作起来并不比JQuery方便。真有需求,加个[0]即可。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,451评论 0 44
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,315评论 0 3
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,610评论 0 11
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1