jquery的知识汇总系列
提示：jquery的知识总是用了又忘，这次终于下定决心汇总一下。
前言
提示：网上关于jquery的知识点很多，许多人都是用到了就搜一下，但这样其实也挺费时间的，现在终于鼓起勇气自己总结一下。但一定要记得，前提是要正确引入jquery.js文件啊。
一、点击事件，事件类型在括号内
大多数的写法都是on与时间类型连着写，这里先介绍类型写在括号中的写法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jquery事件</title>
</head>
<body>
<label for="test1">测试1：</label>
<input type="text" id="test1">
获得焦点就触发
<hr>
<label for="test2">测试2：</label>
<input type="text" id="test2">
改变时才触发
<hr>
<label for="test3">测试3：</label>
<input type="text" id="test3">
失去焦点就触发
<hr>
<label for="test4">测试4：</label>
<input type="text" id="test4">
一直点击一直触发
<hr>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 获得焦点就触发
$("#test1").on("focus", function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
// 值改变时才触发
$("#test2").on("change", function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
// 失去焦点就触发
$("#test3").on("blur", function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
// 一直点击一直触发
$("#test4").on("click", function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
});
</script>
</body>
</html>
二、点击事件，事件类型在括号外
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jquery事件</title>
</head>
<body>
<label for="test1">测试1：</label>
<input type="text" id="test1">
获得焦点就触发
<hr>
<label for="test2">测试2：</label>
<input type="text" id="test2">
改变时才触发
<hr>
<label for="test3">测试3：</label>
<input type="text" id="test3">
失去焦点就触发
<hr>
<label for="test4">测试4：</label>
<input type="text" id="test4">
一直点击一直触发
<hr>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test1").focus(function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
$("#test2").change(function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
$("#test3").blur(function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
$("#test4").click(function (event) {
$(this).val($(this).val() + "2")
console.log($(this).val());
});
});
</script>
</body>
</html>
三、点击事件，事件内联于表单元素
代码如下（示例）：
<input type="button" id="buy" value="购 买" onclick="buyGoods(${Decorate.id})">
<input type="button" id="back" value="返 回" onclick="javascript :history.back(-1);">
<script type="text/javascript">
$(document).ready(function() {
//点击更多按钮
$("#more").click(function() {
//跳往该商品所有评论页面
location.href="${pageContext.request.contextPath}/CommentServlet?flag=all&id=${Decorate.id}";
});
});
//详情页面点击购买按钮
function buyGoods(e){
//判断用户是否登录账号
if("${User}" == ""){
//跳出模态框，提醒用户应该登录账号
$('#myModal-1').modal("show");
}
else{
//跳往支付页面
location.href="${pageContext.request.contextPath}/SelectGoodsServlet?flag=pay&id="+e;
}
}
</script>
四、点击事件，给普通按钮赋予表单提交功能
代码如下（示例）：
<form id="formid" action="${pageContext.request.contextPath}/AddGoodsServlet?flag=add" enctype="multipart/form-data" method="post" onsubmit="return check()" >
<button type="button" onclick="onSubmit()">确认提交</button>
<script type="text/javascript">
$(document).ready(function() {
});
//确认提交
function onSubmit(){
document.getElementById("formid").submit();
}
//表单验证通过返回true
function check(){
//alert(flag);
return flag;
};
</script>
总结
以上就是今天要讲的内容，本文仅仅简单介绍了jquery事件的使用，jquery的知识点比较多，以后再慢慢补充吧。
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
