jQuery实战1:概述,环境准备及入门实例

jQuery实战 同时被 2 个专栏收录
10 篇文章 0 订阅

jQuery是一套跨浏览器的JavaScript函数库,简化HTML与JavaScript之间的操作。由约翰·雷西格(John Resig)在2006年1月的BarCamp NYC上发布第一個版本。目前是由Dave Methvin领导的开发团队进行开发。全球前10,000个访问最高的网站中,有65%使用了jQuery,是目前最受欢迎的JavaScript函数库。

jQuery的特点:

  • Write less, Do more。
  • jQuery is designed to change the way that you write JavaScript。
  • 支持各种主流浏览器,包括IE,FireFox2以上,Safari2以上和Opera9以上的版本。
  • 以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作。
  • 屏蔽浏览器差异,对DOM的操作提供了方便的扩展,易用的事件处理API和动画API。
  • 强大的插件机制。

版本发布

JQuery目前分成1.x版与2.x版,这两种版本发布,后者不再支持IE 6/7/8,前者通过jQuery Migrate plugin与先前版本保持相容。

学习环境准备

1.一款自己喜欢的IDE。作为一名Java程序员,Eclipse是我最佳选择。
2.各种主流浏览器。考虑到浏览器的兼容问题,机器上最好同时装上Firefox,Chrome,Opera,IE等。由于我使用的操作系统是ubuntu,所以暂时不考虑IE。
3.自己熟悉的web服务器。这里以tomcat6.0为例进行学习。
4.api参考手册。Jquery1.8.3和w3school,w3school里面的api较多,覆盖了html,css到js,前端到后台的一些参考手册,但是针对性没有Jquery的参考手册,建议两者都可以选择,或者重点放在前者。

入门案例

1.下载jQuery文件。共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。压缩版一般以min.js结为,其目的是为了在生产时减少文件大小,降低网络带宽,这里两者都可以下载下来,官方下载地址

2.jQuery 库位于上诉下载的js文件中,其中包含了所有的 jQuery 函数。 可以通过下面的标记把 jQuery 添加到网页中:

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

src里面的内容替换成你的jQuery文件的位置。除了上诉引入jQuery的方法之外,还可以引入谷歌或者微软的CDN里面的jQuery文件,用法如下:

使用 Google 的 CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

使用 Microsoft 的 CDN

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

jQuery的基础语法是:

$(selector).action()

美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作,简单案例如:

$(document).ready(function(){
    alert("Hello Jquery");
});

jQuerydocumentJavaScriptdocumentready()jsonload (document).ready();里面是一个匿名函数,表示加载结束这也这个页面之后将触发函数体里面的内容。而这里的函数体只有一句话alter(“Hello Jquery”),表示在页面弹出窗口显示”Hello Jquery”,如果你是第一次接触jQuery,一定要运行出这个HelloWorld级别的程序出来,因为今后的博客与知识都是建立在这个程序的基础之上的。

好了,现在让我们来正式入门《jQuery实战》系列课程的第一节,做一个校验用户名合法性的模块。
功能需求:
一般在注册用户名之前,先对用户名的合法性进行校验。如果数据库中已经存在用户名则返回不可注册字样,如果数据库中没有被注册过,则返回可以注册字样。输入框中没有输入任何字符时,输入框红色波浪线提示,当输入框输入有字符时,红色波浪线自动消失。

html/jsp页面代码如下:

<body>
    请输入用户名: <input type="text" id="userName" class="userText"/>
    <button id="verifyButton">校验</button><br />
    <div id="result"></div>
</body>

body里的标签比较简单,一个input输入框提供给用户输入将要注册的用户名,button是一个按钮,这里不是用form表单提交,而是用ajax提交,所以不用form括起来,此外,这里还预留了一个内容空白的div,留作显示相应结果之用。
为了方便管理js文件,每个模块都单独的写一个js文件,本模块的userVerify.js,需要通过Javascript代码来做两件事情:
1.button被按下的时候,需要将文本框中的数据获取到,然后发送给服务器端,最后接受服务器返回的数据, 填充到我们预留的div中,这样用户就可以看到结果
2.文本框上,用户按键之后,需要判断文本框中的内容是否为空,如果不为空,红色的边框和背景图就应该取消,否则保留。

    //这里面的内容就是页面装载完成后需要执行的代码
    var userNameNode = $("#userName"); 
    //需要找到button按扭,注册事件
    $("#verifyButton").click(function() {
        //1.获取文本框的内容
        var userName = userNameNode.val();
        //2.将这个内容发送给服务器端
        if (userName == "") {
            alert("用户名不能为空");
        } else {
            $.get("../userVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
                    //3.接收服务器端返回的数据,填充到div中 
                    $("#result").html(response);
            });                 
        }
    });

注意:上面的代码是囊括在 (document).ready();iduserNameuserNameNode (“#verifyButton”).click(function() {});的含义是监听id为verifyButton的元素,触发单击事件时执行匿名函数,做的处理是将userNameNode的值取出来,判断是否为空,若不为空,则通过ajax的get方法向服务器发送数据请求。
jQuery的ajax get请求语法如下:

jQuery .get() .get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

本例用的get请求,所以请求的参数是通过url拼接传递的。后台的Servlet接受数据如下:

public class UserVerify extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String param = request.getParameter("userName");
            System.out.println("userName : " + param);
            if (param == null || param.length() == 0) {
                out.println("用户名不能为空");
            } else {
                String userName = URLDecoder.decode(param, "UTF-8");
                if ("admin".equals(userName) || "超管".equals(userName)) {
                    out.println("用户名[" + userName + "]已经存在,请使用别的用户名注册");
                } else {
                    out.println("可以使用用户名[" + userName + "]注册");
                }
            }
        } finally { 
            out.close();
        }
    } 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    } 

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    public String getServletInfo() {
        return "Short description";
    }

}

这个Servlet的doGet,doPost都是继承自Servlet父类来的,doGet负责相应get请求,doPost负责响应post请求,但是无论是get还是post,我们都可以让它通通用过processRequest()处理请求。processRequest函数的主要内容为:先获取前端传递过来的userName参数值。当不为空时进行判断是否是合法的,本系列博客的重点放在前端,所以没有对数据库中的用户名合法性校验,只是简单的在Servlet里面进行简单的判断,当用户名为”admin”或者”超管”的时候不合法,其他字符串都合法。
为了兼容中文字符串,js需要将userName进行两次编码:encodeURI(encodeURI(userName)。

为了实现输入框红色波浪线提示的功能,这里需要添加css文件,里面保存了输入框的样式。这合法div+css的书写原则,既html之负责基本骨架,css负责具体样式展示。
userVerify.css的代码如下:

/*控制文字边框是红色实线*/

.userText{
    border: 1px red solid;
    background-image: url("../image/userVerify.gif");
    background-repeat: repeat-x;
    background-position: bottom;
}

红色波浪线的效果是通过背景图片展示出来的,小红色波浪线通过repeat-x不断的重复,达到底部波浪线的效果。
为了达到提示效果,必须监听键盘事件,其中用到keyup事件,keyup语法如下:

$(selector).keyup(function)

function 可选。规定当发生 keyup 事件时运行的函数。

jQuery对应的处理代码

    //处理用户名输入框
    $("#userName").keyup(function() {
        var value = userNameNode.val();
        if(value == "") {
            $("#userName").addClass("userText");
        } else {
            $("#userName").removeClass("userText");
        }
    });

addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。removeClass() 方法从被选元素移除一个或多个类。如果没有规定参数,则该方法将从被选元素中删除所有类。上述代码的含义是当id为userName的节点键盘松开时候执行函数里面的内容,从input里面取到值,当值为空的时候,把userText的class加上,达到显示波浪线的效果。当输入框的值不为空的时候移除userText的class,到达去除红色波浪线的效果。

本节知识点

  • 1.HTML负责页面内容,CSS负责页面样式,Javascript负责页面行为
  • 2.HTML中应该有DOCTYPE来告知浏览器的渲染显示方式
  • 3.可以先定义div或span节点用于以后显示服务器返回数据。
  • 4.border属性可以控制页面元素的边框
  • 5.background-*可以控制背景图,以及背景图的位置,重复显示的方式
  • 6.可以通过#idname或.classname的方式来个制定的html节点定义样式
  • 7.可以通过$(document).ready(function(){})的方式来定义页面装载完成时,需要执行的方法。
  • 8.可以通过$()方法来获得页面的指定节点,参数是某种css的选择器
  • 9.可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据,定义事件,执行操作。
  • 10.val()方法可以获得节点的value属性值
  • 11.html()方法可以设定某个节点中的html内容
  • 12.click()方法可以响应鼠标点击事件
  • 13.keyup()方法可以响应键盘弹起的事件。
  • 14.$.get()方法可以和服务器端进行get方式的交互,注册的callback方法会再数据回来的时候被调用,这个方法会接收到代表服务器端返回数据的一个纯文本的参数
  • 15.addClass(),removeClass()方法可以给某个节点添加或删除一个class
  • 16.发送给服务器端的数据在javascript中做两次encodeURI,然后在服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文乱码问题。

代码下载地址:https://github.com/shizongger/JqueryInAction

参考资料:

  1. 维基百科
  2. jquery帮助文档
  3. 李兴奎老师《jQuery实战》
  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值