首先定义两个按钮，添加一些常规属性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>
