一、jQuery介绍
jQuery是JavaScript的一个库,兼容CSS3,还兼容各种浏览器。jQuery官方文档https://www.jquery123.com/。
开发工具 sublime text 3、hbuilder
需要引入js库,官网下载js库并且在html页面使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery入门</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script>
$(function(){
alert("hello jquery!");
});
</script>
</head>
<body>
</body>
</html>
1.2 、jQuery页面加载与JavaScript页面加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js与jq页面加载</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
window.onload = function(){
alert("陈思文");
}
//传统的方式页面加载会存在覆盖问题,加载比jQuery慢(
//整个页面加载完毕<包括里面的内容,如图片>)
window.onload = function(){
alert("老王");
}
//jquery的加载要比js快!(当整个dom树结构回执完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
});
//jQuery不存在覆盖问题,加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
});
//简写方式
$(function(){
alert("杨少杰");
});
</script>
</head>
<body>
</body>
</html>
1.3、jQuery的获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery获取</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//传统方式加载
/*document.getElementById("btn").onclick = function(){
location.href = "惊喜.html";
}*/
//jQuery方式获取
$("#btn").click(function(){
location.href="惊喜.html"
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜" id="btn" />
</body>
</html>
惊喜.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飞龙在天</title>
<style>
div{
border: 1px solid white;
width: 500px;
height: 400px;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="../../img/飞龙在天.gif" width="100%" height="100%"/>
</div>
</body>
</html>