其实,这篇写这篇文章的目的对大多数人可能没有作用,但是我觉得会有和我同样有这样困惑的同学的,献给他们。
敝人在学习前端JS的时候,没有学习最原生的JS,而是通过他人推荐学习了jQuery,使用jQuery的时间也有一年的时间了,特别喜欢jQuery的特效纷飞的感觉,对jQuery的链式编程也很喜欢,废话不多说。
在学习jQuery之后,对于操作DOM节点来写事件的情况是常有的事,而绝大多数没有使用例如JS中
onclick="button_click()"
或者
onmousemove="mouse_move()"
绝大多数是通过jQuery获取DOM节点的方式,例如
$(document).ready(function(){ $("#div").方法名(functin(){ .... }); });
<body> <div id='div'>div1</div> <div id='div'>div2</div> <div id='div'>div3</div> <div id='div'>div4</div> </body>
你可能会说,可以通过$("#div").each();来为每一个id=div的<div>绑定事件,但是以敝人的操作经验来看,这种方法多数会不起作用。也就是通过each()绑定的效果并不好。
那么具体的解决方案是什么呢?
因为,这篇博文的标题来看,只适用于跟我一样,首先学习jQuery而对JS一窍不通的情况下,其实方法很简单,那就是应用到前面说的,这些JS提供的这些属性来定义函数名,例如 如果想写点击事件,那么很简单添加上 onclick="button_click()",如果想写鼠标移动事件onmousemove="mouse_move()"
例如还是前面的这段DOM,为每一个div添加一个点击事件,希望知道点击了哪个div,并且也要知道输入框中的内容,只要为每一个div添加上onclick="div_click()"即可
<body> <input type='text' class='username' /><br/> <div id='div' onclick='div_click(this)'>div1</div> <div id='div' onclick='div_click(this)'>div2</div> <div id='div' onclick='div_click(this)'>div3</div> <div id='div' onclick='div_click(this)'>div4</div> </body>
function div_click(obj){ //这里面当然还是可以写jQuery代码 alert($(".username").val());//文本框值 alert(obj.innerHTML);//点击了哪个div obj为JS对象,innerHTML为JS中的属性,没接触过的人应该不知道,不过没关系,据你的需求来写这个函数里面的代码 }