JQuery学习之（一）概述

http://blog.csdn.net/helen_shw/archive/2009/08/05/4406184.aspx

1.JQuery是一个优秀的javascript框架。

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&ouml；rn Zaefferer，罗马尼亚的Stefan Petre等等。

jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS，DO MORE，写更少的代码，做更多的事情。

它是轻量级的js库（压缩后只有21k），这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+， FF 1.5+， Safari 2.0+， Opera 9.0+）。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

主要功能：

（1）可以访问页面框架的局部

（2）可以更改页面的表现，它兼容CSS3，还兼容各种浏览器（IE 6.0+， FF 1.5+， Safari 2.0+， Opera 9.0+）。

（3）更改页面的内容

（4）响应事件兼容各种浏览器（IE 6.0+， FF 1.5+， Safari 2.0+， Opera 9.0+）。

（5）为页面添加动画

（6）实现异步交互（AJAX效果）

（7）简化代码和常用操作。

2.特点：

？体积小（v1.2.3 15kb）V1.2.6版54K？丰富的DOM选择器（CSS1-3 + XPath）？跨浏览器（IE6，FF，Safari，Opera）？链式代码？强大的事件、样式支持？强大的AJAX功能？易于扩展，插件丰富

3.使用方法：

先到JQ的官方网站下载最新版本的JQ：www.jquery.com，

然后在页面的<head></head>之间加入下面代码：

就可以进入JQ的奇妙之旅了。

JQuery学习之选择器

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery选择器</title>
    <style>
    .change{
     background-color:#009900;
    }
    .border{
     border:#FF0000 thin solid;
    }
    </style>

    <script language="javascript" type="text/javascript" src="jquery.min.js"></script>

    <script language="javascript">
    function change1()
    {
    var meinv=$("div");

    for(var i=1;i<meinv.length;i=i+2)
    {
    meinv[i].className="change";
    }
    }
    function change2()
    {
    var meinv=$("div");

    for(var i=1;i<meinv.length;i=i+2)
    {
      meinv[i].className="";
    }
    }
    function change3(){
    var getclass=$("div:last");
       $("span").text(getclass.attr("class"));
    }
    function change4()
    {
     $("div:gt(1)").addClass("border");
    }
    function change5()
    {
     $("div:gt(1)").removeClass("border");
    }
    function change6()
    {
     $("input:gt(1)").attr("disabled","disabled");
    }

        </script>

</head>
<body>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <div>
        高档有品味，方便又快捷，省时省力，又省心！</div>
    <p>
        <input name="d" type="button" onclick="change6()" value="锁定后面的Input" />
        <input name="d" type="button" onclick="change1()" value="实现隔行变色" />
        <input name="d" type="button" onclick="change2()" value="取消隔行变色" />
        <input name="d" type="button" onclick="change3()" value="得到最后一个div的CSS类名称" />
        <input name="d" type="button" onclick="change4()" value="为第二个以后的DIV加边框" />
        <input name="d" type="button" onclick="change5()" value="除去第二个以后的DIV边框" />
    </p>
    <span></span>
</body>
</html>