zoukankan      html  css  js  c++  java
  • JQuery快速学习,3分钟搞清楚JQuery

        JQuery是什么?VS2010已经集成进去这个东西,从应用上看,未来Web的开发,基本上它应该成为事个默认的事实标准。

        JQuery实际上是JavaScript开发的一个Web客户端框架。而且是一个很有钱途的框架。一说到框架,程序员的脑子里很可能立即就浮现出“庞大,复杂,笨重,难懂”等等词汇。本人一开始,也是对号称“框架”的东西有一定的抵触和畏惧心里,比如MS那庞大的.net FrameWork或者MFC。

        但是,JQuery经过简单的了解后,才发现完全不是那么回事,它的简单易用,震惊了本人,这里就分享一下我的理解和心得。

    首先看下JQuery的官方定义:

        jQuery 是一个 JavaScript 库。

        jQuery 极大地简化了 JavaScript 编程。

        jQuery 很容易学习。

        果然是精辟及名符其实,但是这里我要再加一条,JQuery很有钱途,为什么?可能有心人已经注意到了,JQuery就是$,所有的开始,都从一个$出发。JQuery太简洁易懂,介绍它也应该省墨,下面就开始学习:

    第一分钟,引入JQuery库:

        可以到http://www.jquery.com/下载JQuery库,当然VS2010直接就集成了,然后在你要引入JQuery的网页的Head区加上库的引用如下,

    <head><script type="text/javascript" src="jquery.js"></script></head>
    VS2010是 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

    然后就可以在你的JavaScript代码里,使用JQuery框架了。

    第二分钟,使用JQuery库

        无废话,先看代码:

    $("button").click(function()

    {$("button").hide();}

    );

        看,其实这里面已经有两行JQuery的使用代码,仔细观察下,JQuery使用了三段来组合,可以称之为三段论或者三截棍。

        首先,一个$,表示这是使用JQuery的库

        其次:("button"),一个选择器,用于指定操作的范围,它可以是一个Html元素,比如这里是选择要操作的对象是Button,其它还可以按属性,按样式,按名字,来选择。语法分别是:(".ClassName"), 接样式选择,("#Id"),按ID来选择。当然可以几种选择组合起来。

        这里简单类比一下,要让JQuery库干活,首先要给钱 $ ,然后找人手,(选择器), 这找人手,可以按类型,比如说那些民工,来搞建筑,按样式,那个穿马甲的,就是在叫你呢,按名字,张三,你快过来,有事要你做。也可以组合起来形成更精确的选择,比如说民工里那个穿马甲的张三,给你钱快过来做事。

        最后,给了钱,找了人手,就得做事了。.click(...), .hide()等,就是要做的动作或事件。

        总结一下,$("button").hide();  JQuery的语法大都遵循这样的三段论,给钱,找人,做事。下面是一段完整例子:

    <html>
    <head>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("button").html("Hello world.");
            });
        });
    </script>
    </head>
    
    <body>
    <button type="button">Click me.</button>
    </body>
    </html>
    

    第三分钟,搞清楚JQuery能干哪些事:

        上一分钟,我们知道了JQuery可以做("元素"), (".样式"), ("#名称")的选择及组合,这里看看选择了后,能做什么。大约能做的是,产生事件,改变内容,动态效果,Callback和Ajax等。

        直接看例子:

    $("button").click(...); button单击事件
    $("button").html("Hello world.");更改button的内容
    $("button").hide(speed,callback);隐藏button并回调callback
    $(selector).css(name,value) 为所有匹配元素的给定 CSS 属性设置值
    $(selector).css(name)  返回指定的 CSS 属性的值
    
    $(document).ready(function(){
      $("button").click(function(){
      htmlobj=$.ajax({url:"www.cnblogs.com",async:false});
      $("button").html(htmlobj.responseText);
      });
    }); Ajax回调
    
    

    基本上,这三分钟结束,大体上已经可以理解并使用JQuery了,其精练程度的确让人吃惊,实际上更可怕的事情就是,用JQuery及其它扩展出来的插件(三段论的JQuery,选择器和方法事件很容易扩展),就可完成Asp.net上面那大堆复杂的,重量级控件完成的功能,而且不需要在服务端,烦了GridView,UpdatePanel这样重量级控件的人,应该是时候尝试一下JQuery了。

    剩下来的事情,就是用到的时候,需要看JQuery有哪些方法属性,有哪些插件了。参考连接:

    http://www.jquery.com/ JQuery官网

    http://www.w3school.com.cn/jquery/jquery_reference.asp JQuery参考手册

    http://www.cnbeta.com/articles/128813.htm  2010年最佳jQuery插件

    欢迎转载,转载请注明出处:http://www.cnblogs.com/demo/ 欢迎到此快速关注 谢谢 

  • 相关阅读:
    Facelets应用程序的生命周期
    JavaServer Faces生命周期概述
    spring security使用自定义登录界面后,不能返回到之前的请求界面的问题
    记一次使用mybatis进行like 模糊查询遇到的问题
    用Filter作用户授权的例子
    p132代码解析
    xml
    java EE第一周博客
    spring security的简单应用
    Java包装类,以及Integer与int之间的比较
  • 原文地址:https://www.cnblogs.com/Demo/p/1902888.html
Copyright © 2011-2022 走看看