• JQuery学习之(一)概述


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

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

        jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jö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>之间加入下面代码:

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

        就可以进入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>


     

  • 相关阅读:
    C++细节决定成败---菜鸡程序员被前辈蹂躏历程(持续更新)
    VIM杂记——基本使用
    UE4——用Android Studio打开UE4工程
    UE4——打包时遇到Could not determine java version from 'xx.x.x'的问题
    HTML笔记——常用标签总结
    LeetCode——142. Linked List Cycle II
    Leetcode——344. Reverse String
    UE4 隐藏虚拟摇杆
    UE4——实现走近物件其上方出现互动按钮并弹出UMG的功能
    UE4——调用API实现布娃娃死亡效果
  • 原文地址:https://www.cnblogs.com/blsong/p/1636112.html
Copyright © 2020-2023  润新知