一.简介
jQuery是一个简洁的JavaScript框架,设计宗旨是写更少的代码,做更多的事情。
jQuery拥有独特的链式语法的特性,也就是用点的方法进行连接。
jQuery拥有高效灵活的css选择器,并且可以进行扩展。
jQuery可以兼容各种主流的浏览器。
参考jQuery百度百科:https://baike.baidu.com/item/jQuery/5385065?fr=aladdin
引包 :js文件嵌套在静态页面里,让js语法有了可以执行的环境。
jQuery下载网址:https://www.jq22.com/jquery-info122
jQuery学习手册:https://jquery.cuishifeng.cn/
二.源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery框架的简介和体验</title>
<!-- 引包 -->
<script src="./js/jQuery.js"></script> <!-- jQuery-2.1.4版本 -->
<style>
*{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div></div>
</body>
</html>
<script>
// 单击
$("li").click(function(){
$(this).css({'background':'red'});
});
// 动画
$("div").animate({'left':1000},1000);
</script>
三.效果图
篇章
上一篇:BOM教程4-游戏实战之坦克行走