下面我将详细讲解“jQuery中:button选择器用法实例”的完整攻略。
1. :button选择器的基本介绍
":button"选择器可以选取页面中所有<button>和<input>元素中type属性值为"button"、"reset"和"submit"的元素。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery :button选择器用法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(":button").click(function () {
alert("Hello World!");
});
});
</script>
</head>
<body>
<button>Click me!</button>
<input type="button" value="Click me too!">
</body>
</html>
2. :button选择器的高级用法
":button"选择器还支持一些高级用法，如只选取<button>元素或只选取type属性值为"reset"或"submit"的元素。
2.1 只选取<button>元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery :button选择器用法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button:button").click(function () {
alert("Hello World!");
});
});
</script>
</head>
<body>
<button>Click me!</button>
<input type="button" value="Click me too!">
</body>
</html>
此代码仅选取页面中的<button>元素，而忽略所有的type属性值为"button"、"reset"和"submit"的<input>元素。
2.2 只选取type属性值为"reset"或"submit"的元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery :button选择器用法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(":button[type='reset'], :button[type='submit']").click(function () {
alert("Hello World!");
});
});
</script>
</head>
<body>
<button>Don’t click me!</button>
<input type="button" value="Click me too!">
<input type="reset" value="Reset me!">
<input type="submit" value="Submit me!">
</body>
</html>
此代码仅选取type属性值为"reset"或"submit"的<button>和<input>元素。
总结
以上就是关于“jQuery :button选择器用法实例”的完整攻略。通过本文的介绍，相信大家已经掌握了":button"选择器的基本和高级用法，能够在实际项目中灵活运用了。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中:button选择器用法实例 - Python技术站
微信扫一扫 
支付宝扫一扫 