zoukankan      html  css  js  c++  java
  • jquery常用例子!

    我们先了解一下jquery
     prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,   而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。   一些实用的函数   这个类库带有很多预定义的对象和实用函数,这些东东的目的显然是把你从一些重复的打字中解放出来 。

    jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是 ,写更少的代码,做更多的事情。
    它是轻量级的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即可。
    Jquery是继prototype之后又一个优秀的Javascrīpt框些啊

    下面我写例子时用到的,例如:
    $() 这个东西和js里面的document.getElementById()
    怎么用,下面我们来看看他的效果
    今天将会学到的
    选择器:#di  属性:html text addClass() val()  事件 ready(fn)

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="../js/jquery-1.4.3.js" type="text/javascript"></script>
    <style type="text/css">
    .wrong{ color:#F00;}
    </style>
    <script language="javascript">
    $(document).ready(function(){
    <!--alert("hello"); -->
    //声明变量,这样是为了jquery执行效率更高,他每次要找一个属性要检索全部,如果声明成变量就只需找到变量即可
    var $Name=$("#txtName");//名字
    var $Pwd=$("#txtPwd"); //密码
    var $nameTip=$("#NameTip");
    var $PwdTip
    =$("#PwdTip")
    //点击事件
    $("#btnHello").click(function(){
    <!--alert("hello");-->
    if($.trim($Name.val())=="")
    {
    $nameTip.html(
    "请输入姓名!").addClass("wrong").fadeIn(500).delay(1000).fadeOut(500);
    return false;
    }
    if($.trim($Pwd.val())=="")
    {
    $PwdTip.html(
    "请输入密码!").fadeIn(500).delay(1000).fadeOut(500);
    return false;
    }
    else
    {
    $PwdTip.text(
    "提交成功!").fadeIn(500).delay(1000).fadeOut(500);
    }
    });
    //失去焦点事件
    $Name.blur(function(){
    if($.trim($Name.val())=="")
    {
    $nameTip.html(
    "请输入姓名!").addClass("wrong").fadeIn(500).delay(1000).fadeOut(500);
    return false;
    }
    });
    $Pwd.change(function(){
    if($.trim($Pwd.val())=="")
    {
    $PwdTip.html(
    "请输入密码!").fadeIn(500).delay(1000).fadeOut(500);
    return false;
    }

    });
    });


    </script>
    </head>
    <body>
    <table>
    <tr><td>
    <input id="txtName" type="text" /><div id="NameTip"></div>
    </td>
    </tr>
    <tr>
    <td>
    <input id="txtPwd" type="password" /><div id="PwdTip"></div>
    </td></tr>
    <tr><td>
    <input id="btnHello" type="button" value="提交"/>
    </td></tr>
    </body>
    </html>
  • 相关阅读:
    ubuntu环境下快速搭建开发环境
    Ubuntu安装mysql及设置远程访问方法
    lua 获取指定目录下指定后缀文件名
    DLL远程注入及卸载实现
    c字符检测函数
    数据库bcp导入导出批处理工具
    Schtasks命令详解(计划任务DOS批处理)
    lmathlib文件
    Github常用命令【转】
    Github上传代码菜鸟超详细教程【转】
  • 原文地址:https://www.cnblogs.com/huicao/p/2103974.html
Copyright © 2011-2022 走看看