前言
之前的项目也一直都是在用jQuery,遇到问题就翻翻API,也从来没有进行过比较系统的总结和整理。最近由于要做个培训,因为比较系统的归纳了一下javascript的相关知识,顺手做个笔记。说到jQuery,难免避开javascript,所以打算本次分两篇文章简要的介绍一下,第一篇主要是jQuery方面的,第二章就是对javascript做一个比较深入的探讨。
jQuery的优点
jQuery是一个轻量级的js框架,它在出现后的段时间内就赢得相当大的一部分人的青睐,它有着相当多的优点:代码简练,容易上手,浏览器兼容,插件丰富....等等。就我个人而言,我选择jQuery是钟情于它简洁而强大的选择器和快速灵活的事件处理等。
好了,闲话扯了这么多,咱们转入正题,在介绍jQuery之前,我们先来看一段代码:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<form id="loginForm" action="/" method="post"> <p>用户名:<input type="text" name="UserID" /></p> <p>密 码:<input type="password" name="UserPassword" /></p> <p>验证码:<input type="text" name="ValidateCode" /></p> <p> <input type="submit" value="登录" /> </p> </form>
在这段代码中我们定义了一个登录表单,这种表单在我们的网站各个地方都可能存在,我们在表单提交之前一般都需要做一些事情,比如表单验证。然而,我不希望在每个有这样表单的页面都写上一段JS来进行表单的验证,jQuery可以很简洁的帮我们解决这个问题。请看下面的代码:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<script type="text/javascript"> $(function () { $("form#loginForm input[type=submit]").click(function () { var validate = true; $("form#loginForm").find("input[type=text],input[type=password]").each(function () { if ($(this).val() == "") { validate = false; alert("登录表单填写的不完整"); return false; } }); return validate; }); }); </script>
这段代码是在每个id="loginForm"的form提交前都会验证text和password是否为空。当然了,您不可能每个form的id都为"loginForm"(虽然没有这个id的form浏览器也不会报js错误),也不会每个form都用submit提交,那要验证提交的form该怎么做呢?这个难不倒jQuery,我们把上面的代码稍作修改即可,代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<form action="/" method="post"> <p>用户名:<input type="text" empty="false" name="UserID" /></p> <p>密 码:<input type="password" empty="false" name="UserPassword" /></p> <p>验证码:<input type="text" empty="false" name="ValidateCode" /></p> <p> <input type="submit" value="登录" /> </p> </form>
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<script type="text/javascript"> $(function () { $("form").submit(function () { var validate = true; $(this).find("input[empty=false]").each(function () { if ($(this).val() == "") { validate = false; alert("登录表单填写的不完整"); return false; } }); return validate; }); }); </script>
可以看到,我们在表单需要验证的元素中加入了一个empty="false"的属性(部分的浏览器支持required属性,为了说明jQuery支持自定义的属性,用了empty),然后我们在表单提交前去做输入验证。当然了,您也可以用别的自定义属性名称或者值来区分您要验证的对象,比如 inputType="email",inputType="phone"之类的来验证邮箱或者电话号码,只需要把表单提交中的逻辑稍作修改即可。jQuery已经提前让我们享受到了HTML5的特性了。
OK,说了这么多,您是否对jQuery已经产生了一点兴趣呢?那么下面,我简要的把jQuery一些常用的知识做一下整理和归纳。
一、构造函数
$(".navo") //查找当前document下所有class="navo"的元素 $(".navo","form") //查找当前document下所有form中class="navo"的元素
$(document.getElementById("signin")); //将一个id="signin"的对象转换成jQuery对象
$(document.getElementByName("signin")) //将所有name="signIn"的对象转换成jQuery数组
$("input").each(function(){ if($(this).val()==""){ //you can do something } });
$(“<div></div>”);
$(“<div/>”,{class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } });
$(function(){ //you can do something…… });
— $(“#name”) //选择id="name"的元素 $(“div”) //选择所有的div $(“.className”) //选择所有class="className"的元素 $(“ul>li”) //选择所有ul的下一级li元素 $(“form input”) //选择的form下的所有input元素 $(“input[type=checkbox]”) //选择所有的checkbox $(“form input:text”) //选择所有的text元素
$(“input[name$=shop][type=text]”);
$(“div,span,p,.classname”)
function getCheckBoxValue(){ var value=""; $("input:checked").each(function(){ value += $(this).val(); }); return value; }
$(document.getElementById("msg")).html(); $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML;
$("input[type=button]").bind("click",{name:"Button",value="Params"},function(event){ alert(event.data.name); });
$("#id").data(name,"value"); $(#id).click(function(){ alert($(this).data("name")); });
—$(“#demo”) .attr(“class”,”test”) .css("style","display:block") .text(“hello word”) .click(function(){//you can do something}) .bind(“select”,function(){//you can do something}) ……
$("input",form).each(function(){ if($(this).attr("type")=="text"){ alert("针对文本框可以做一些操作。"); } });
var data=[{name:"sherry",value:"20"},{name:"alex",value:"26"}]; $.each(data,function(){ alert($(this).name); });
$.extend({min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; }});
在这段代码中我们定义了两个函数:min和max,然后我们就可以直接使用$.min(10,20)和$.max(10,20)这种形式调用了。
jQuery.extend()这个函数的描述是这样的:合并两个或更多的对象的内容汇集成到第一个对象。它的构造函数是:
jQuery.extend( [ deep ], target, object1, [ objectN ] )
从这儿我们可以看出,extend的作用就是讲多个对象合并起来,如果target被省略,那么就会默认的被合并到jQuery的命名空间下。
有人会对deep这个参数产生疑问。我们再看下面的代码:
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, durian: 100 }; $.extend(object1, object2); //object1 === {apple: 0, banana: {price: 200}, cherry: 97, durian: 100}
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, lime: 100 }; $.extend(true, object1, object2); //object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, lime: 100}
从上面的例子可以看出,如果第一个对象的属性本身是一个对象或数组,这将是完全用第二个对象相同的key重写一个属性,如果true
为第一个函数参数,对象将被递归合并。
当然了,.extend()是可以返回对象的。看下面的代码:
var empty = {} var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = $.extend(empty, defaults, options); //settings == { validate: true, limit: 5, name: "bar" } //empty == { validate: true, limit: 5, name: "bar" }
说到合并,顺便说一下jQuery.merge()函数,还是看代码更具体:
var first = [0,1,2,3]; var second = [1,2,3,4,5]; $.merge( first, second); //first=[0,1,2,3,1,2,3,4,5];
merge会合并两个数组内容到第一个数组。是完全合并,不会排重的。
url:一个用来包含发送请求的URL字符串。
settings :一个以“{键:值}”组成的AJAX 请求设置。
下面我们看一下常用的setting列表:
—async // boolean,是否同步。跨域请求和dataType: "jsonp"请求不支持同步操作。 —complete(jqXHR, textStatus) // function 函数完成时执行,不论成功或者失败 —data //object,string {} 需要的参数 —dataType// string (“xml“, ”html“, ”script“, ”json“, ”jsonp“, ”text”),返回类型有多个时用空格分割 —error(jqXHR, textStatus, errorThrown)// function 发生错误时执行(null,"timeout", "error", "abort" 和 "parsererror”) —success(data, textStatus, jqXHR)// function请求成功后执行 —type// string get/post, PUT 和 DELETE 也可以使用,但仅部分浏览器支持 —url// string 请求需要的地址 —timeout// Number 设置为超时的执行时间 —statusCode// Map 根据函数返回的状态码来执行相应操作,调用方式为:statusCode: {404: function() { alert('page not found');} —jsonp// string 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分 —cache// Boolean是否启用浏览器缓存 —beforeSend(jqXHR, settings)// function请求发送前调用
下面写两个事例:
$.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').html(data); } });
var jqxhr = $.ajax({ url: "ajax/test.html" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); jqxhr.beforeSend(function(){ alert("beforeSend"); });
这两种写法都是支持的。
还有两个.ajax()的简化版本:
jQuery.get()
jQuery.post()
$.ajax({ url: url,
data: data,
success: success,
dataType: dataType });
由于浏览器的安全限制,大多数的请求不能成功地检索来自不同的域,子域或协议的数据。但是有两种数据形式(dataType)不受这个限制:script和jsonp,以及他们有两个简写的快速调用方法:
jQuery.getScript()
jQuery.getJSON()
这两种方式已经跨出的浏览器的安全限制,所以要慎用。如果供调用方不是您信任的网站,请不要使用这种方式,因为它可能会为您的网站带来相当大的风险,它们都是会执行请求的内容的,具体的内容可以参阅园子里其他大牛的分享。
最后说一个方法:.load()。
这个和jQuery.get()比较相似,不同的是.load()不是全局函数,而且这个方法都不是用来请求数据的。.load() 方法将返回的HTML 内容数据设置到相匹配的节点中,所以我们经常用它来加载HTML片段。
有关jQuery的东西就到这里,在这儿我只是作为一种学习笔记做个记录,很多的内容都没有深究。之前都是看别人的经验,很少自己写东西。如果其中有谬误,欢迎指正。由于最近经常在做前端的一些开发,所以对javascript的接触相当的频繁,所以我的下一篇文章打算写一点关于javascript相关的东西。