写一个小游戏，用jquery语法写就是不成功，只有用dom操作才成功，这两种写法到底有什么不同？

Question

ball内第一二行注释内的jquery写法和三四五行的dom写法，区别在哪？为何用dom可实现，但用jquery写法实现不出效果

Answer 1

this.ball = $('<div class="ball">ball</div>'),包装后就是jQuery对象,
插入节点是没问题的,
后面似乎用了tiis.ball.addEventListener,程序是会报错的,
应当用this.ball[0].addEventListener.

Answer 2

按楼上说的看了下，确实底下有个addEventListener才会报错，用jQ就干脆全用这个库写，否则没意义啊。

如果用jQ的路子来写，那么应该是：

$('<div>', {'class': 'ball'}) // 这样就会调用createElement了，另外class必须加引号因为是保留字
    .on({ animationend: function(event){ /*这里写事件回调*/ } })
    .appendTo('body');

这样多省字，另外还省了一个变量不是~

Answer 3

append都不用，html就好了

Answer 4

jquery上对append的定义是这样的

append: function() {
    return domManip( this, arguments, function( elem ) {
      if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
        var target = manipulationTarget( this, elem );
        target.appendChild( elem );
      }
    } );
  }

，对原生的加了很多限制条件，这样会减少很多没必要的阻断代码运行的错误，单看你贴出来的代码，没什么触犯了这里的限制条件。你说的用jquery不成功，用原生的成功。成功的定义是什么，应该不是节点没有添加上吧？

好吧，刚刚没有看到你下面还写了addEventListener，原生的代码生成的this.ball是一个节点，nodeType就是1，属于object，就是<div class="ball"></div>，但是jquery生成的this.ball虽然也是个object，但是里面包装了很多内容（你可以自己打印出来看看），不是节点类型了，所以用addEventListener就会报错了。
addEventListener属于原生的方法，你既然用jquery了，就用on添加事件呗，干嘛jquery定义节点，又用原生的方法写事件。还是坚持一个吧。

Answer 5

$("p").append(" <div>Hello world!</div>"); 这样写可以的 增加的元素不用写成Jquery对象

Answer 6

既然是用jquery,你为什么,不这样写呢

$('body').append('<div class="ball"></div>')

如果按你这样的写法,应该是

this.ball = $('<div class="ball"></div>');
this.ball.appendTo('body');

下次如果要贴代码,麻烦直接复制上来,设置为代码格式