一,谈一谈JQuery
发布在jQuery基础2013年10月8日view:4097
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言:应‘韩松Snow’的盛情邀请,鄙人决定分享一下对jQuery的一些认识。若有不正确之处,希望大牛们给以指正,鄙人感激不尽!

什么是jQuery?“jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.”这是jQuery官网的一段原话,大致意思是:jQuery是一个反应速度快、轻量级、框架丰富的javaScript库。他通过一个能跨多个浏览器工作的易用的API,把一些像HTML DOM遍历、操作,事件处理,动画,Ajax等事情变得非常简单。兼备多功能性和可扩展性,jQ已经改变了很多写js的人的方式!

如果你还没明白,那简单点说就是,jQ就是一个别人写好的一个js框架,把前端人平常经常用的一些DOM操作,事件处理等js代码封装好了,你只需调用API就行了,而且还不受浏览器限制哦。总之write less,do more!

Okay!jQ介绍完毕了,但由于本文不可能像教材一样面面俱到,所要根据大家的提问来讲解,所以,大家如果对jQ有什么疑惑的地方,可以提出来,我会权衡之后讲解。

专题一:用jquery做表单的检校

以用户名验证为例。

HTML表单如下

<div>
    <div id="show_result">验证结果将返回到这儿!</div>
    <input type="text" id="username" />
    <input type="submit" id="lo_button" value="" />
</div>

大家应该都知道验证表单的步骤为:1.获取表单值--->2.判断表单是否格式正确-->3.ajax提交到服务器--->4.服务器脚部程序接收提交值--->5.对比数据库返回结果--->6.接收结果并将结果显示到DOM

其中1、2、3、6步骤都是用js实现,但是,用js要写一大堆繁琐的代码,而且特别是第3步ajax,不同浏览还要判断浏览器内核种类,简直头痛!这时,你就需要jQ.

1.获取表单值

var um=$("#username").val();

2.判断表单是否格式正确

var a=(new RegExp(/^[a-z0-9_-]{3,16}$/)).test(um);

3.ajax提交到服务器 6.接收结果并将结果显示到DOM

$("#lo_button").click(function(){      //点击DOM中 <input type="submit" id="lo_button" value="" />触发这个事件执行function里面的内容
          $.post("/login_check.php",{"username":um},function(outcome){    //鄙人用的php,$.post这个函数可以向服务器传入参数并接收服务器返回值,其中outcome就是接收值
                        if(outcome==1){  //服务器返回1时,就表示表单值与数据库值吻合
                                 $("#show_result").html("用户名正确!");  //将结果反映到DOM上
                 }else{
                     $("#show_result").html("用户名失败!");  //将结果反映到DOM上
                     }   
              },"json")

   });

持续更新中...

评论
发表评论
4年前
添加了一枚【评注】:测试
4年前
添加了一枚【评注】:测试
4年前
添加了一枚【评注】:测试
4年前
添加了一枚【评注】:测试
4年前
添加了一枚【评注】:测试
4年前
添加了一枚【评注】:测试
6年前

@芋头 不会……

6年前

@米粽粽 那你来嘛,的确很容易啊

6年前

@芋头 这样就能赚钱啊,好像很容易诶

6年前

赞助已付,谢谢分享。

6年前

@芋头 okay了

6年前

支付宝链接填的不对,到 http://me.alipay.com 去获取链接

6年前

@芋头 thanks

6年前

支持,希望LZ多多更新。

and,现在发表文章问题的编辑器的确不是非常好用,大家凑合下,不过还是希望大家可以把格式编辑的好一些。

6年前

学习了,谢谢!!!

WRITTEN BY
wanisan
hello world!
TA的新浪微博
PUBLISHED IN
jQuery基础

欢迎各位大拿来写一些心得总结指导下初学者

我的收藏