zoukankan      html  css  js  c++  java
  • jQuery学习之开篇

    吐槽

           近期比較烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比。前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧。EasyUI的研究过程中发现,假设没有掌握JS、JQuery想要进行兴许的开发会很困难。得,又得学下JQuery,一种蛋蛋的忧伤。一直觉得前端的水很的深这段时间算是见识到了,哎,只是工作还的继续,吐槽完了,卯足干劲充电吧!

    前言

           某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是《瑞丽的JQuery》,先入门看了两章,感觉能看懂,还不错。

    日后的学习也就打算採用该书了。当然參考网络上的一些博客文章(独立博客)也是十分必须的。

    认识JQuery

    JavaScript

          认识JQuery之前,有必要了解下javascript。

          一种脚本语言,使得网页和用户之间实现了一种实时的、动态的和交互的关系,网页中包括了很多其它的交互性的元素。

    其强大之处不用我这菜鸟再做赘述。只是其本身存在的一些弊端也就造成了兴许js库的产生。基本的三大弊端:


    •  复杂的文档对象模型(DOM)
    •  不一致的浏览器实现       
    •  缺乏便捷的开发、调试工具

          基于javascript上述的缺点,为了简化js的开发一些javascript库诞生了。

    js库封装了非常多提前定义的对象和有用函数.能更加高速、便捷的建立页面交互元素。

    这里对于有哪些js库就不再多谈了,重点了解下JQuery,这也是自己兴许学习的重点。

    JQuery

           一个很优秀的javascript库,对于js性能的理解也是十分的到位的。

    现现在在javasript渐渐隐去时(表喷我),JQuery也越发的受欢迎了。

           JQuery凭借简洁的语法和跨平台的兼容性,极大地简化了js开发人员遍历HTML文档、操作DOM、处理事件、运行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了javascript开发人员设计思路和编敲代码的方式。

           JQuery的主旨就是"wirte less do more",写更少的代码,实现很多其它的功能。

    不管你是网页设计师、后台开发人员、业余爱好者还是项目管理者,也不管是javascript刚開始学习的人还是javascript高手,都有足够的理由去学习JQuery。

    JQuery的优势

           jq强调的理念就是"wirte less,do more"。jq独特的选择器、链式的DOM操作、事件处理机制和封装完好的Ajax都是其它js库所不能达到的。

    概括来说jq的优势大致分为例如以下几个方面:

          (1) 轻量级

               jquery是很轻巧的,採用Dean Edwards编写的Packer(http://dean.edwards.name/packer/)压缩后,大小不到30kb。假设使用Min版本号而且在server端启用Gzip压缩后,大小仅仅有18kb。

          (2) 强大的选择器

               jqery同意开发人员使用从css1到css3差点儿全部的选择器,以及jquery独创的高级并且复杂的选择器。

          (3) 出色的DOM操作的封装

               jquery封装了大量经常使用的DOM操作,使开发人员在编写DOM操作相关程序时候可以得心应手。

    jquery轻松的完毕各种原本很复杂的操作,使得js菜鸟也能写出出色的程序。

          (4) 可靠的事件处理机制

               jquery的事件处理机制吸收了javascript专家Dean Edwards编写的事件处理函数的精华,使得jquery在处理事件绑定的时候相当可靠。

    在预留退路、循序渐进以及非入侵编程思想方面,jquery也做的很不错。

          (5) 完好的Ajax

               jquery将全部的Ajax操作封装到一个函数$.ajax()里,使得开发人员处理ajax的时候可以专心的处理业务逻辑而无需关心浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

          (6) 不污染顶级变量

              jquery仅仅是建立了一个名为jquery的对象,器全部的函数都是在这个对象之下的。

    其别名也能够随时交出控制权,不会污染其它变量,这使得jquery能够与js和其它js库共存,在项目中放心的引用而不须要考虑到后期可能的冲突。

          (7) 出色的兼容性

               作为一个流行的js库,jquery的浏览器兼容性也是十分良好的。

          (8) 链式操作

               对发生在同一个jq对象上的一组动作,能够直接连写而无需反复获取对象。这样的链式操作方式使得jq的代码无比优雅。

    并且无需反复获取对象使得性能得到提升(选择器获取对象是比較消耗性能的)。

          (9) 隐式迭代

               当用jq找到带有".class"类的所有元素,隐藏它们时,无需编写循环遍历每个返回的元素。jq里面的方法都是被设计成自己主动操作对象的集合,而不是单独的对象,这使得大量的玄幻结构变得不再必要,优化了代码量。

          (10) 行为层与结构层的分离

                 开发者能够使用jqery选择器得到元素,然后直接给元素加入事件。这样的将行为层与结构层全然分离的思想,使得jquery开发者页面开发者各司其职,避免了一些不必要的冲突,同一时候也便于后期的维护,不须要再html代码中寻找某些寒素和反复改动html代码。

          (11) 丰富的插件支持

                 jquery是easy扩展的,这使得基于jquery的开源插件越来越懂,也越来越好,借助于一些开源的插件,可以高速的构建交互性较强的应用。

          (12) 开源。

                 jquery是一个开源的产品,不论什么人都能够自由的使用并提出改进意见。开源使得一个产品更加具有活力,也会促进一个产品的不断改进,同一时候一些新的灵感和idea也将促进产品的深化。

    有理由相信开源的JQuery会越来越受欢迎。


    JQuery牛刀小试

           简单的了解了下jquery接下来简单的尝试下jquery吧。

    JQuery环境

           1、获取jquery

                  进入jquery官网:http://jquery.com/,下载最新的jquery库。


           2、jquery库类型说明

                   在正式的编写代码之后,有必要了解下jquery库的两种类型:JQuery xxx.min.js(Minified and Gzipped) 和 JQuery xxx.js(Uncompressed)

               前者是经过JSMin等工具进行压缩后的版本号,大小为54kb,假设server开启Gzip压缩之后,大小将进一步减小为18kb。主要用户产品和项目。

               后者是完整无压缩版本号,主要用户測试、学习和开发。

            3、JQuery环境配置

                jquery无需安装,仅仅需解压到相关目录中,开发的时候在html页面中引入该.js文件就可以。


    JQuery入门

           一个简单的样例:点击某个div实现隐藏该div,和原生js进行比較,代码例如以下:

    <html>
    <title>JQuery学习入门</title>
    <script src="js/jquery-1.9.1.js"></script>
    <head>
        <style>
            .div {
                background: #58c3d6;
                text-decoration-line: none;
                text-align: center;
                line-height: 60px;
                color: #ffffff;
                height: auto;
            }
        </style>
        <script>
            /**通过JQuery库来实现隐藏DIV*/
            $(document).ready(function() {
                $("#div").click(function() {
                    $(this).hide();
                });
            });
    
            /*通过原生js实现DIV的隐藏、显示*/
    
            function toggle(targetId) {
                var target = document.getElementById(targetId);
                if (target.style.display == 'block') {
                    target.style.display = "none";
                } else {
                    target.style.display = "block";
                }
            }
        </script>
    </head>
    
    <body>
    
        <button onclick="toggle('div')">开关</button>
        <div class="div" id="div">点我隐藏</div>
    
    </body>
    
    </html>


              实际的效果这不贴图了,能够看出的是jq相比較js获取元素的方式更为的简单快捷了,JQuery的后缀query本来就是查询的意思,这也许就是jquery名字的由来呢。


             简单的了解了JQuery,也算对jquery有了一个认知吧,兴许的就是一些知识点的积累了,OVER!


  • 相关阅读:
    Linux6
    大小超过2t的分区规划 parted命令
    fdisk命令磁盘分区
    扩展
    磁盘管理
    在Linux中如何手动创建一个用户
    Linux5
    Linux4
    19_权限和分组
    18_django的用户模型和扩展django的用户模型
  • 原文地址:https://www.cnblogs.com/cxchanpin/p/7089058.html
Copyright © 2011-2022 走看看