Jquery源码解析-设计理念

最新推荐文章于 2021-09-11 18:41:39 发布

正在输入代码中

最新推荐文章于 2021-09-11 18:41:39 发布

阅读量529

点赞数

分类专栏： web前端文章标签： jquery 设计实例

本文链接：https://blog.csdn.net/qq_26744901/article/details/51685923

版权

web前端专栏收录该内容

145 篇文章 0 订阅

订阅专栏

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>

正在输入代码中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery源码解析-设计理念

JQuery是继prototype之后又一个优秀的javascript框架,它是轻量级的js库,兼容css3,兼容各种浏览器,但是JQuery2.0以后已经不再支持ie6/7/8浏览器.Jquery使用户能方便地处理HTM、events、实现动画效果,并且方便地为网站提供ajax交互.JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说的很详细,同时还有很多成熟的插件可供选择
复制链接

扫一扫

专栏目录