首先定义两个按钮，添加一些常规属性type、id、value；其次再定义给每个按钮一个自定义的属性custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div>
姓名：<input type="checkbox" value="name" name="selectAll" lay-skin="primary" class="selectAll" id="selectAll" checked> <br>
</div>
<div>
输入框：<input type="text" name="age" lay-skin="primary" class="age" id="age"><br>
</div>
<select name="sex" style="margin-top: 10px;">
<option value="0">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<button id="sure">确定</button>
<input type="button" id="button1" value="按钮1" custom="这是自定义的属性1" onclick="fn(this)" />
<input type="button" id="button2" value="按钮2" custom="这是自定义的属性2" />
<input type="button" id="button3" value="按钮3" custom="这是自定义的属性3" />
<input type="button" id="button4" value="按钮4" custom="这是自定义的属性4" />
</body>
</html>
<script>
var test1 = $("#selectAll").prop("checked") // true
console.log(test1)
var test2 = document.getElementById("selectAll").checked //true
console.log(test2)
$("#sure").click(function() {
var value1 = $("[name='age']").val() //获取input框里value的值
console.log(value1)
console.log('--------分割线----------')
var value2 = $("[name='sex']").val() //获取option的value
console.log(value2)
var text2 = $("[name='sex']").children("[value=" + value2 + "]").text();
console.log(text2)
})
//方法一:直接给button一个onclick事件
function fn(e) {
//得到html
console.log(e);
//得到对象
console.log($(e));
//得到自定义的custom
console.log($(e).attr("custom"));
};
// 方法二：通过js给按钮添加一个click事件
var btn2 = document.getElementById("button2")
btn2.onclick = function() {
//得到html
console.log(this);
//得到对象
console.log($(this));
//得到自定义的custom
console.log($(this).attr("custom"));
};
// 方法二：通过js中click的addEventListener事件
var btn3 = document.getElementById("button3")
btn3.addEventListener('click', function() {
//得到html
console.log(this);
//得到对象
console.log($(this));
//得到自定义的custom
console.log($(this).attr("custom"));
}, false);
//方法四：通过jquery点击事件
$("#button4").click(function() {
//得到html
console.log(this);
//得到对象
console.log($(this));
//得到自定义的custom
console.log($(this).attr("custom"));
})
</script>
