献给和我同样学习前端脚本时，先学jQuery，而之前没有接触过JS的同学

最新推荐文章于 2022-05-10 20:11:18 发布

徐文志程序猿

最新推荐文章于 2022-05-10 20:11:18 发布

阅读量1.7k

点赞数

分类专栏：前端Js-jQuery-Ajax

本文链接：https://blog.csdn.net/u014646984/article/details/24734885

版权

前端Js-jQuery-Ajax 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

其实，这篇写这篇文章的目的对大多数人可能没有作用，但是我觉得会有和我同样有这样困惑的同学的，献给他们。

敝人在学习前端JS的时候，没有学习最原生的JS，而是通过他人推荐学习了jQuery，使用jQuery的时间也有一年的时间了，特别喜欢jQuery的特效纷飞的感觉，对jQuery的链式编程也很喜欢，废话不多说。

在学习jQuery之后，对于操作DOM节点来写事件的情况是常有的事，而绝大多数没有使用例如JS中

 οnclick="button_click()"

或者

 οnmοusemοve="mouse_move()"

绝大多数是通过jQuery获取DOM节点的方式，例如

$(document).ready(function(){
    $("#div").方法名(functin(){
        ....
    });
});

这种通过在DOM中获取选择器的写法，可能是使用jQuery的同学经常用的，但是问题出现了，如果页面中有多个相同 “选择器”的话，例如

<body>
<div id='div'>div1</div>
<div id='div'>div2</div>
<div id='div'>div3</div>
<div id='div'>div4</div>
</body>

使用$("#div").方法名(function(){}); 只能定位到第一个<div>，这个问题很让人头疼。

你可能会说，可以通过$("#div").each();来为每一个id=div的<div>绑定事件，但是以敝人的操作经验来看，这种方法多数会不起作用。也就是通过each()绑定的效果并不好。

那么具体的解决方案是什么呢？

因为，这篇博文的标题来看，只适用于跟我一样，首先学习jQuery而对JS一窍不通的情况下，其实方法很简单，那就是应用到前面说的，这些JS提供的这些属性来定义函数名，例如如果想写点击事件，那么很简单添加上 οnclick="button_click()",如果想写鼠标移动事件οnmοusemοve="mouse_move()"

例如还是前面的这段DOM,为每一个div添加一个点击事件，希望知道点击了哪个div，并且也要知道输入框中的内容，只要为每一个div添加上οnclick="div_click()"即可

<body>
<input type='text' class='username' /><br/>
<div id='div' οnclick='div_click(this)'>div1</div>
<div id='div' οnclick='div_click(this)'>div2</div>
<div id='div' οnclick='div_click(this)'>div3</div>
<div id='div' οnclick='div_click(this)'>div4</div>
</body>

function div_click(obj){
    //这里面当然还是可以写jQuery代码
    alert($(".username").val());//文本框值
    alert(obj.innerHTML);//点击了哪个div obj为JS对象，innerHTML为JS中的属性，没接触过的人应该不知道，不过没关系，据你的需求来写这个函数里面的代码
}

想说的话，就是这些，希望能够对你有帮助。