一、
目前,个人认为最方便的点击事件便是 onclick() 的调用方法的事件,不仅可以传值,还可以避免一些不必要的麻烦:
页面代码:
<div onclick="thisOnClick(this)" id="测试(ID)" type="测试(type)" data-type="测试(data-type)"> 点击我一下 </div>
js代码:
function thisOnClick(e) { console.log("获取到了当前元素的ID:",e.id);//获取定义的id,结果:id="测试(id)" console.log("获取到了当前定义的type:",e.getAttribute("type"));//获取type:type定义的值,结果:type="测试(type)" console.log("获取到了当前定义的data-type:",e.getAttribute("data-type"));//获取data-type定义的值,结果:data-type="测试(data-type)" console.log("获取到了当前定义的data-type:",e.dataset.type);// data-type(html5),结果:data-type="测试(data-type)"
console.log( $(this).attr('data-type') )//输出的结果是 HTML中定义的 :data-type="测试(data-type)"
}
二、
使用 类 或者使用 id 进行绑定点击事件,常用方式如下:
html代码:
<div class="classStype1 jsClass" id="jsId" data-type="测试(data-type)"> 点击我一下 </div>
jq代码
// 用类 $(".jsClass").click(function (e) { console.log(e) });
// 用ID $("#jsId").click(function (e) { console.log(e) });
//但是在如果html的代码是动态渲染出来的,那么用上面的Dom方法是不行的,会触发不了,因此有个新的方式: $('body').on('click', '.jsClass', function (e) { console.log(e) });
3、 当然,除了以上常用的 绑定id和 绑定class之外,还有就是绑定name了
jquery根据name属性查找
$("div[id]") //选择所有含有id属性的div元素 $("input[name='keleyicom']") //选择所有的name属性等于'keleyicom'的input元素 $("input[name!='keleyicom']") // 选择所有的name属性不等于'keleyicom'的input元素 $("input[name^='keleyi']") //选择所有的name属性以'keleyi'开头的input元素 $("input[name$='keleyi']") //选择所有的name属性以'keleyi'结尾的input元素 $("input[name*='keleyi']") //选择所有的name属性包含'keleyi'的input元素 $("input[id][name$='keleyi']") //可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素 //例如: $(":input[name='keleyi']")// 表示查找的是name为keleyi的表单。