关于js/jq的点击事件，以及获取 data-type 定义的值

一、

目前，个人认为最方便的点击事件便是 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的表单。