<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<form action="">
<input type="checkbox" value="reading"> reading
<input type="checkbox" value="sport"> sport
<input type="checkbox" value="game"> game
<input type="button" value="TEST">
</form>
<script src="lib/jquery-2.2.2.js"></script>
<script>
// $(function(){
// $('div').click(function(){
// alert('click!');
// });
// })
// $('div').click(fn);
// function fn(){
// alert('!!');
// }
// $('div').click(function(){
// console.log(this);//this指的是被点击的原生dom对象
// alert($(this).index())
// });
// 定义(绑定事件处理程序)
// 定义(绑定事件处理程序)
$(":button").click(function() {
var arr = [];
$(":checkbox:checked").each(function() {
arr.push($(this).val());
});
console.log(arr);
});
// $(":button").click(); // 直接触发click事件(事件模拟)
// 原生(点击时弹出每个div的索引)
// 方法一:
// var os = document.getElementsByTagName("div");
// for(var i = 0; i < os.length; i++){
// os[i].dataset.index = i;
// os[i].onclick = function() {
// alert(this.dataset.index);
// };
// }
// 方法二:
// var os = document.getElementsByTagName("div");
// for (var i = 0; i < os.length; i++) {
// (function(j) {
// os[j].onclick = function () {
// alert(j);
// };
// })(i);
// }
</script>
</body>
</html>
jquery的click事件用法
猜你喜欢
转载自blog.csdn.net/weixin_44606660/article/details/88198392
今日推荐
周排行