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>
  • 相关阅读:
    vscode webstrom 配置 eslint 使用 airbnb 规范
    IntelliJ idea webstrom Visual Studio Code vscode 设置cmder为默认终端 Terminal
    intellij idea 大内存优化配置 idea64.exe.vmoptions文件配置
    解决因 gtx 显卡而导致的 google chrome 颜色显示不正常。色彩变淡发白,其实很简单
    href=http:// href=// 的区别,src=http:// src=// 的区别。 链接里不带http,链接里直接使用双斜线 // 有什么不同。http://和//有什么区别?
    前后端分离之fiddler前端开发代理 autoresponder 正则表达式 regex:(?insx) 修正符详解
    开发环境部署脚手架搭建 步骤
    开发环境部署git 步骤
    requestAnimationFrame移动端实现回到顶部效果
    占位图片
  • 原文地址:https://www.cnblogs.com/huicao/p/2103974.html
Copyright © 2011-2022 走看看