刚开始用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]即可。