（本文年代久远，请谨慎阅读）JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

AJAX：即“Asynchronous Javascript And XML”（异步JavaScript和XML），可以不刷新页面完成数据库操作（包括查询并返回数据），在验证输入时有很重要的作用。

文档说明：Jquery有完整的API开发文档，比如jQuery1.11.0_20140330.chm，手册查询非常方便，即查即用

代码和html内容分离：使用Jquery不用再在html里面插入一堆js来调用命令了，只需要定义id即可，通过id选择器来选中JQuery对象，之后便可以通过对象方法来操作

总结

JQUERY是一个JAVASCRIPT库（子集）、JS文件也是一个工具包；

封装了大量的有用函数，提高了开发效率；强大的DOM、CSS事件处理操作能力；使代码更加简洁；减弱了与浏览器的相关性；提高了运行效率；

下载地址：http://docs.jquery.com/Downloading_jQuery

使用

jQuery的Id选择器；jQuery的事件方法；修改样式函数css()；修改属性函数attr()；

  • 新建一个html文档
1
2
3
4
5
6
7
8
<!doctype html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>Document</title>
     </head>
     <body></body>
</html>

!DOCTYPE是文档说明，做一个兼容性的网页一般完整的文档说明如下:

为网页提供了一种编码方式,否则页面很可能出现乱码.UTF-8 是没有国家的编码,也就是独立于任何一种语言,任何语言都可以使用 Document是网页的标题名称
  • 要使用JavaScript脚本首先要导入js的库文件，即导入jquery-1.11.1.min.js（此处是压缩版的库文件）：
    1
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    “src”是js库文件的路径，”type”是代表插入脚本的类型，可以为”text/javascript”或者”text/css”等。

带有min的文件打开后是没有缩进的，不带min的那个是完整格式的，打开后是有良好格式的js代码，方便阅读和修改（一般不要改）

应用

  • 首先在html文档中写一个输入框和两个按钮：
    1
    2
    3
    4
    <form action="sub.html" onsubmit="return doCheck();">
       <span><font color="red">账号</font></span><input type="text" id="account" /> 
       <input type="submit" value="提交" /><input type="reset" value="重置" />
    </form>

<< 更多精彩尽在『程序萌部落』>>
<< https://www.cxmoe.com >>

以上两句写在html中的<body></body>标签中，<input>标签写在<form>标签中，
<input>标签中的type类型”submit”是提交form标签之间文本框中输入的数据；
<input>标签中的type类型”reset”是重置form标签之间文本框中输入的数据为空；
<form>中的action属性标示了按下提交按钮后的跳转，可以是一个简单的网址，也可以是一个action的名字（框架中）；
<form>中的onsubmit’属性标示了跳转之前要检查onsubmit的值，false则不跳转，true?false的值来自doCheck()这个JS函数；

doCheck函数的实现作为JavaScript脚本要放在<head></head>标签中间，并用<script type="text/javascript></script>包含起来，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
<title>Document</title>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //public void doCheck();
    //在这个方法中写入表单验证的代码。如果此方法返回true，则会执行action中的URL，否则就不执行。
    function doCheck() {
        //alert('docheck done');
        var validFlag = true;
        //获取用户输入的账号文本值
        var account = document.getElementById('account').value;
        //判断账号的长度是6-30个字符之间
        //获取账号的长度
        var len = account.length;
        if (len < 6 || len > 30) {
            validFlag = false;
        }
        return validFlag; 
    }
</script>
</head>

从以上代码可以看出，js代码和Java代码非常相似，但：

函数定义以function打头，可以返回true/false或者变量，或者数组等任何值（包括一个对象）
没有数据类型的分别，定义一个变量用var关键字，var parameter = xx；
数组的定义：var Arr = new Array('a','b','c'); //new Array('')是固定格式

以上获取文本框输入值使用的是Dom对象的方法，Dom（documnet），其对象有getElementById()这个方法，可以按html标签内的id名来获取到dom对象

1
2
var account = document.getElementById('account').value;
//即取到id为account的控件的value值，并赋值给account，

此处的account值是一个类似Java中的String类型（注意：不要混用Java中的各种方法），Js有其自己的各种函数来操作字符串，使用之前要确定正确

比较字符串可以用if(account=="example")等方式来比较；其对象还有length属性，直接获取字符串长度；

doCheck完成的是判断用户输入内容的长度，在6-30位是正确的，点击提交会跳转到sub.html页面；



😒 留下您对该文章的评价 😄


相关文章

转载请注明出处。
博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：
https://www.cxmoe.com/article/dcf0.html


  HTML JQuery

 评论




全站共计 313.7k 字，自豪地使用 Volantis 主题

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

—
新版站点已运行

Copyright © 2017-2022 程序萌部落

 萌ICP备 20250821号