您的位置：首页 > Web前端 > JQuery

Jquery源码解析-设计理念

2016-06-15 23:06 525 查看

JQuery是继prototype之后又一个优秀的javascript框架,它是轻量级的js库,兼容css3,兼容各种浏览器,但是JQuery2.0以后已经不再支持ie6/7/8浏览器.

Jquery使用户能方便地处理HTM、events、实现动画效果,并且方便地为网站提供ajax交互.JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说的很详细,同时还有很多成熟的插件可供选择.

Jquery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html插入一堆js来调用命令，只需要通过id、css、元素操作即可

The Write Less,Do More(写更少,做更多),无疑是JQuery的核心理念，简洁的API、优雅的链式、强大查询与便捷的操作。

虽然JQuery文档很完善，潜意识降低了前端开发的入门的门槛，要实现一个动画，只要简单的调用一个animate方法传递几个执行参数即可，但如果要自己实现一个定制的动画？我们要考虑的问题太多了，浏览器兼容、各种属性的获取、逻辑流程、性能等等，这些才是前端开发的基础核心。

附上三个JQ快捷小实例：

简单的点击收放：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
p{
color: red;margin: 5px;cursor: pointer;
}
p:hover{
background-color: yellow;
}
</style>
</head>
<body>
<p>测试一</p>
<p>测试二</p>
<p>测试三</p>
<script>
$("p").click(function(){
$(this).slideUp();
});
</script>
</body>
</html>

简单animate动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
background-color: aqua;
width: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<button>开始</button>
<div id="div">hello!</div>
<script>
$("button").click(function(){
if($("#div").width()==100){
$("#div").animate({
width:"500px",
opacity:0.4,
fontSize:"40px"

},1500);
}else{
$("#div").animate({
width:"100px",
opacity:1,
fontSize:"10px"

},1500);
}
});
</script>
</body>
</html>获取checkox选中数量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
background-color: aqua;
width: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="checkbox"  checked />
<input type="checkbox"  />
<input type="checkbox"  />
<input type="checkbox"  />
<input type="checkbox"  />
<div></div>
<script>
var numck=function(){
var n=$("input:checked").length;
$("div").text(n+(n===1?"个":"颗")+"选中");
$("body").append("<input type='checkbox' />");
}
$("body").delegate("input[type=checkbox]","click",numck);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航