当前位置:首页 > 开发 > Web前端 > 前端 > 正文

jq入门

发表于: 2010-05-16   作者:石头的日记   来源:转载   浏览次数:
摘要: JQuery霹雳:一、Hello JQuery 2010年01月07日 星期四 10:09 (原创:灰灰虫的家http://hi.baidu.com/grayworm) JQuery是一个功能非常强大的JavaScript库。 一、JQuery特点: 1.轻量级:只有几十K大,压缩后一般只有18K。 2.强大选择器:拥有类似于CSS的选择器,可以对任意DOM对象进行操作 3.动画
JQuery霹雳:一、Hello JQuery
2010年01月07日 星期四 10:09
(原创:灰灰虫的家http://hi.baidu.com/grayworm)
JQuery是一个功能非常强大的JavaScript库。

一、JQuery特点:
1.轻量级:只有几十K大,压缩后一般只有18K。
2.强大选择器:拥有类似于CSS的选择器,可以对任意DOM对象进行操作
3.动画操作不再复杂:可以使用很简单的语句实现复杂的动画效果
4.Ajax支持:$.ajax()从底层封装了ajax的细节问题。
5.浏览器兼容性高:不用再担心客户端浏览器兼容性问题。
6.连式操作:同一个JQuery对象上的多个操作可以连写,无需分开写。
7.隐式迭代:自动对获取到的JQuery对象迭代操作,不需要再编写循环代码。
8.丰富的插件:大量的稳定实用的插件可以大大提高我们开发效率。
9.开源:自由使用,集全世界程序员的智慧,有更广阔的发展前景。

二、JQuery配置:
首先:去http://jquery.com下载最新的JQuery库;


《图0》
在网站上有两种类库可供我们下载
jquery-1.3.x.js :完整,无压缩版,可供学习、开发。
jquery-1.3.x.min.js : 压缩后的版本,主要用于项目的发布。
在这里我们主要使用jquery-1.3.x.js来开发

如果你使用的是VS2010 Beta2,在新建网站的时候会自动导入JQuery1.3.2库,并放在Scripts文件夹中。这里我都使用VS2010 Beta2为开发工具。



《图1》

然后:在使用的时候需要在页面的<head>中导入jquery-1.3.x.js文件,在VS2010中我们可以从“解决方案管理器”中拖动js文件到页面<head></head>中就可以生成脚本导入语句。



《图2》
一般来说JQuery的导入语句应当写在比较靠前的地方。即:在我们使用JQuery对象之前导入JQuery库,否则会找不到JQuery对象。

三、第一个JQuery程序:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                alert('hello world');
            }
   );
    </script>
</head>
......
</html>

首先要导入jquery库文件
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

在JQuery中$代表的是JQuery,$(document)等价于JQuery(document)。

$(document).ready(function(){
/*......*/
});
上面这段代码会在以后的JQuery代码中经常用到。它类似于JavaScript的window.onload();在文档加载完成后会执行function(){}中的内容。但它们之间又有细微的不同之处:
a.执行时机不同:window.onload()是等待页面所有内容加载完成后被触发。而$(document).ready();是等待页面中DOM元素绘制完成后被触发。
如果页面中有大量图片,window.onload()是等待所有图片都显示完成后再被触发;而$(document).ready();是页面中HTML生成完成后就被触发,可以此时图片还没来得及显示出来。
b.编写个数不同:
如果页面中有多个$(document).ready(),那这些代码都能被执行。
如:
$(document).ready(
             function () {
                 alert('hello world');
             }
   );
   $(document).ready(
         function () {
             alert('hello again');
         }
   );
  执行结果:会依次弹出两个提示框。

如果页面中有多个window.onload(),那只有最后一个的代码会被执行
如:
  window.onload=function(){
    alert("hello world");
   };
   window.onload=function(){
    alert("hello again");
   }
   执行结果:只会弹出一个提示框“hello again”。

四、稍微复杂的点JQuery程序
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready( //页面加载执行
        function () {
            $("#btn").click( //绑定按钮点击事件,$("#btn")代表id是btn的DOM对象。
            function () {
                $("#dd").html($("#txt").val()); //将文本框中的内容写入id="dd"的div中去。
            });
        }
        );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="txt" type="text" /><input id="btn" type="button" value="Click" />
        <div id="dd"></div>
    </div>
    </form>
</body>
</html>
执行的效果是:当点击按钮的时候会在div中显示文本框中的内容(原创:灰灰虫的家http://hi.baidu.com/grayworm)

五、JQuery的主要知识点:
JQuery看似复杂,实际它就是一种客户端的脚本。我们只有接受JQuery这种语法格式才能学好。
学习JQuery不要被它纷繁复杂的表现特效所迷惑,特效你是学不完的,但“万变不离其宗”,我们需要学习的是JQuery中“根本的东西”和“相对稳定的东西”,并熟练应用,然后“以不变应万变”,达到掌握JQuery的目的。


在JQuery学习中要学习哪些东西呢?
学习JQuery必须的基础是CSS样式表,如果对样式表一无所知,是学不懂JQuery的。
1.JQuery选择器与DOM操作
选择器是JQuery中非常强大的功能,也是它比JavaScript表现更方便的一种功能,它是学习JQuery 的基础。
DOM操作是所有编程语言的必备功能,通过它我们能够解析DOM树,能够对HTML页面进行全面操控。

2.JQuery的事件与动画
通过JQuery的事件与动画我们可以用很简单的代码实现很华丽的动画效果。

3.JQuery实现Ajax
过去在JavaScript中实现Ajax有两个难点:1.考虑客户端代码与浏览器的兼容性;2.对XMLHttpRequest对象的操作很多,消息我们很多的精力。
而JQuery可以很好地解决这两个问题,当然还是免不了要写一些JQuery代码的。

4.插件的使用
我们学习JQuery的目的是用它来简化开发过程中复杂应用的,插件可以为我们提供高效健壮的解决问题的方法,好多功能没有必要我们用JQuery 一一实现,我们应当知道要实现这个功能应当使用什么样的插件,以及如何使用这个插件。
所以插件的使用应当是JQuery的学习重点。

六、本系列的示例页面:
页面:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div>
   <div class="one" id="one" >
   id为one,class为one的div
       <div class="mini">class为mini</div>
   </div>

     <div class="one" id="two" title="test" >
   id为two,class为one,title为test的div.
       <div class="mini" title="other">class为mini,title为other</div>
       <div class="mini" title="test">class为mini,title为test</div>
   </div>

   <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
     <div class="mini">class为mini</div>
     <div class="mini"></div>
   </div>

   <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>

   <div style="display:none;" class="none">style的display为"none"的div</div>

   <div class="hide">class为"hide"的div</div>

   <div>
     包含input的type为"hidden"的div
     <input type="hidden" size="8"/>
   </div>

   <span id="mover">正在执行动画的span元素.</span>
</div>

标式表style.css:
div,span,p
{
     width:140px;
     height:140px;
     margin:5px;
     background:#aaa;
   border:#000 1px solid;
     float:left;
     font-size:17px;
     font-family:Verdana;
   }
div.mini
{
     width:55px;
     height:55px;
     background-color: #aaa;
     font-size:12px;
}
div.hide
{
    display:none;
}

运行效果:



《图3》

(原创:灰灰虫的家http://hi.baidu.com/grayworm)

jq入门

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
作者: 阮一峰 日期: <a href="http://www.ruanyifeng.com/blog/2011/07/" style="list-style-t
什么是插件   插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一
明白jqGrid是怎么工作的会很快加速你理解和掌握这个插件的全部功能。首先第一个要了解的事情是这个
4 jq1000
超强1000个jquery插件!(连载中。。。。最近更新2011年01月25日) 如果没有您要的内容,请使用下面
5 jq1000
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件。 二手图
demo: http://rubentd.com/radios-to-slider/ 用法: <script src="js/jquery-1.10.2.min.js">
demo: http://rubentd.com/radios-to-slider/ 用法: <script src="js/jquery-1.10.2.min.js">
demo: http://rubentd.com/radios-to-slider/ 用法: <script src="js/jquery-1.10.2.min.js">
MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JS
jQ.Mobi是基于HTML5重写的jQuery框架,由appMobi开发并且开源托管于github,在此有简易的在线文档提
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号