JQuery是一个javascript的框架，是对javascript的一种封装。
个人：在事件里面，操作着属性、内容、标签
入门
个人：在事件里面，操作着属性、内容、标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<div id="d">DIV</div>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//事件
$("#b1").click(function(){
//属性、标签、内容
$("#d").hide()
})
$("#b2").click(function(){
$("#d").show()
})
})
</script>
</body>
</html>
获取标签（1，2，3）获取属性（4）获取内容（5，6）
1、获取标签：通过标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pink{
background-color:pink;
}
</style>
</head>
<body>
<button id="b1">获取标签：标签选择器</button>
<div>DIV</div>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$("div").addClass("pink")
})
})
</script>
</body>
</html>
2、获取标签：id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pink{
background-color:pink;
}
</style>
</head>
<body>
<button id="b1">获取标签：id选择器</button>
<div id="d">DIV</div>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$("#d").addClass("pink")
})
})
</script>
</body>
</html>
3、获取标签：class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pink{
background-color:pink;
}
</style>
</head>
<body>
<button id="b1">获取标签：class选择器</button>
<div class="d">DIV</div>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$(".d").addClass("pink")
})
})
</script>
</body>
</html>
4、获取属性：attr()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pink{
background-color:pink;
}
</style>
</head>
<body>
<button id="b1">获取属性</button>
<h1 id="h" align="center" game="LOL">居中</h1>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
alert($("#h").attr("align"))
})
})
</script>
</body>
</html>
5、获取内容：val()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pink{
background-color:pink;
}
</style>
</head>
<body>
<button id="b1">获取内容</button>
<input type="text" id="h" value="默认值">
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
alert($("#h").val())
})
})
</script>
</body>
</html>
6、获取内容：通过html()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pink{
background-color:pink;
}
</style>
</head>
<body>
<button id="b1">获取内容</button>
<div id="d1">DIV</div>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
alert($("#d1").html())
})
})
</script>
</body>
</html>
事件
1、加载事件
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#message1").html("页面加载成功");
});
$(function(){
$("#img").load(function(){
$("#message2").html("图片加载成功");
});
});
</script>
<div id="message1"></div>
<div id="message2"></div>
<img id="img" src="https://how2j.cn/example.gif">
2、点击事件
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b").click(function(){
$("#message").html("单击按钮");
});
$("#b").dblclick(function(){
$("#message").html("双击按钮");
});
});
</script>
<div id="message"></div>
<button id="b">测试单击和双击</button>
3、焦点事件
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("input").focus(function(){
$(this).val("获取了焦点");
});
$("input").blur(function(){
$(this).val("失去了焦点");
});
});
</script>
<style>
</style>
<input type="text" >
<input type="text" >
4、提交事件
<script src="https://how2j.cn/study/jquery.min.js"></script>
<form id="form" action="https://how2j.cn/study/login.jsp">
账号 : <input name="name" type=""> <br>
密码: <input name="password" type=""><br>
<input type="submit" value="登陆">
</form>
<script>
$(function(){
$("#form").submit(function(){
alert("提交账号密码");
});
});
</script>
5、绑定事件
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b").on("click",function(){
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function(){
$("#message").html("双击按钮");
});
});
</script>
<div id="message"></div>
<button id="b">测试单击和双击</button>
6、触发事件
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b").on("click",function(){
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function(){
$("#message").html("双击按钮");
});
$("#b").trigger("dblclick");
});
</script>
<div id="message"></div>
<button id="b">测试单击和双击</button>
网友评论