[转自setting]神奇的jQuery

前言

之前的项目也一直都是在用jQuery,遇到问题就翻翻API,也从来没有进行过比较系统的总结和整理。最近由于要做个培训,因为比较系统的归纳了一下javascript的相关知识,顺手做个笔记。说到jQuery,难免避开javascript,所以打算本次分两篇文章简要的介绍一下,第一篇主要是jQuery方面的,第二章就是对javascript做一个比较深入的探讨。

 

jQuery的优点

jQuery是一个轻量级的js框架,它在出现后的段时间内就赢得相当大的一部分人的青睐,它有着相当多的优点:代码简练,容易上手,浏览器兼容,插件丰富....等等。就我个人而言,我选择jQuery是钟情于它简洁而强大的选择器和快速灵活的事件处理等。

好了,闲话扯了这么多,咱们转入正题,在介绍jQuery之前,我们先来看一段代码:

View Code
复制代码
<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可以很简洁的帮我们解决这个问题。请看下面的代码:

View Code
复制代码
<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,我们把上面的代码稍作修改即可,代码如下:

View Code
复制代码
<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>
复制代码
View Code
复制代码
<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一些常用的知识做一下整理和归纳。

 

一、构造函数

—1.jQuery( selector, [ context ] )
   selector一个包含CSS选择器的字符串
   context一个待查找的 DOM 元素集、文档或 jQuery 对象。
  例如:
  $(".navo")   //查找当前document下所有class="navo"的元素
  $(".navo","form")  //查找当前document下所有form中class="navo"的元素
 
—2.jQuery( element )
   element一个用于封装成jQuery对象的DOM元素。
   例如:
  
$(document.getElementById("signin"));  //将一个id="signin"的对象转换成jQuery对象
  提到这儿,就顺带的说一句:在使用jQuery的时候,我们分为window和jQuery两种对象,使用window对象只能使用window对象的一些属性和方法,同样,jQuery对象也只能使用jQuery的方法和属性。当然了,window对象和jQuery对象是可以互相转化的。
 
—3.jQuery( elementArray )
   elementArray一个用于封装成jQuery对象的DOM元素数组。
   这个与第二个构造函数十分相似,只不过一个是单个对象,一个是对象数组而已。
 例如:
  
$(document.getElementByName("signin"))  //将所有name="signIn"的对象转换成jQuery数组
 
—4.jQuery( jQuery object )
   jQuery object一个用于克隆的jQuery对象。
   这个最为普遍的用法就是:$(this).
   例如:
  
$("input").each(function(){
    if($(this).val()==""){
      //you can do something
    }
  });
 5.—jQuery( html, [ ownerDocument ] )
  html用于动态创建DOM元素的HTML标记字符串,不是XML
  ownerDocument一个文档的新元素将被创建。
  例如:
  
$(“<div></div>”);
 
6.—jQuery( html, props )
  html一个单标记的HTML 元素字符串 (例如: <div/> or <div>)。
  props访问新创建元素的属性,事件和方法。
  例如:
  
$(“<div/>”,{class: "test",
         text: "Click me!",
         click: function(){
        $(this).toggleClass("test");
        }
       });
 
7.—jQuery( callback )
  callback当DOM完成加载的时候绑定的函数
  这个也是经常用的一个构造函数,最普遍的写法就是:$(function(){});这个写法等同于:$(document).ready(function(){});
  例如:
  
$(function(){
      //you can do something……
    });
好了,构造函数就介绍到这儿,下面介绍选择器。
 
二、选择器
—jQuery的选择器支持 id、tagName、css1-3 expressions、伪类,以及可以使用通配符。从jQuery1.3的版本以后,已经不再支持XPath了。而且个人觉得XPath的语法格式有点坑爹,不喜欢。
先看一下jQuery选择器的一些例子:
  
—   $(“#name”)  //选择id="name"的元素
  $(“div”) //选择所有的div
  $(“.className”)  //选择所有class="className"的元素
  $(“ul>li”) //选择所有ul的下一级li元素
  $(“form input”)  //选择的form下的所有input元素
  $(“input[type=checkbox]”)  //选择所有的checkbox
  $(“form input:text”) //选择所有的text元素
 
—jQuery支持多个属性筛选
 
$(“input[name$=shop][type=text]”);
—jQuery支持选择多个元素
 
$(“div,span,p,.classname”)
—jQuery有提供一些查找对象的工具类。
  .find("")、.has("")、.eq(0)、:gt(0)、:lt(5)、.first()、.last()、.first-child、.last-child()、.not()、.next()、.nextAll()……
 
使用jQuery对象返回的属性值时,绝大部分的jQuery对象的属性值与dom对象的属性值相同,也有一部分的除外,例如checkbox
checkbox呈现选中状态的时:<input type="checkbox" checked="checked" value=""/>
那么我们在使用jQuery获取被选中的checkbox用 $("input:checked")  就可以获取到,判断一个checkbox是否被选中,if($("#checkboxObject").attr("checked")==true)即可,jQuery获取到的选中的checkbox的checked属性值为true,而非"checked".
另外,我们在获取一个元素组的value,应该遍历每个对象,取出value,jQuery默认只会返回第一个对象的value。而不似我们asp.net中的Request.Form["name"]会用","分隔开来所有对象的值。还是拿checkbox为例:
 
function getCheckBoxValue(){
  var value="";
  $("input:checked").each(function(){
    value += $(this).val();
  });
  return value;
 }
 
使用jQuery选择器,我们需要注意的地方有:
1.—通过jQuery选择器获取返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
2.—jQuery对象与dom对象可以互相转换。普通的dom对象一般可以通过$()转换成jquery对象,jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
以下的一些事例都是正确的:
$(document.getElementById("msg")).html();
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
 
三、事件
 —jQuery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jQuery获取的对象添加事件。所以我们不必再在页面元素上添加各种on*的属性和定义各种全局函数了。这对于开发人员来说,是一件非常happy的事情。
在jQuery中,我们通常的做法是选择器和事件相配合来完成某一系列的动作的。最为普遍的做法是:select.do().do().....
所以jQuery中的事件大都是在选择了某一对象之后紧接着添加事件。jQuery添加事件的语义是:$("element").EventName(function(){});
当然了,function不是必须的,如果不写function的话,就代表着执行这个事件。比如:$("input[type=submit]").click();表示执行submit的click事件。
 
jQuery常用的事件有:click、dblclick、hover、load、blur、focus、change、select、 serialize、 serializeArray、submit.....
除了上面直接在对象后面跟上事件名称这种形式之外,jQuery还提供事件的绑定方法,我们可以为对象绑定事件:$(“input[type=button]”).bind(“click”,function(){}); 当然,function(){}可以使用一个已定义的全局函数名称代替。$(“input[type=button]”).bind(“click”,FunctionName);
与bind对应的就是撤销事件(unbind),用法与bind一样,当然了,unbind不一定必须填写FunctionName.
 
下面对比较特殊一点的jQuery事件做个简单的说明:
bind/unbind  绑定和撤销对象的一个事件
delegate/undelegate  未对象附加一个或者多个事件,与bind不同的是,这个对象可以不存在的,只要后面添加的有这个对象,那么它也会自动绑定事件。
live/die  给对象附加和撤销一个事件,与delegate/undelegate 相似
 
下面的这一组事件与上面的事件是不尽相同的:
Load:可以绑定在window对象上也可以绑定在Jquery对象上
unload只能绑定在window对象上,而且不是对load事件的撤销,当发生以下情况时,会发出 unload 事件:
1.点击某个离开页面的链接
2.在地址栏中键入了新的 URL
3.使用前进或后退按钮
4.关闭浏览器
5.重新加载页面
 
说到事件的绑定,我们经常会遇到一个问题就是:在绑定事件的事件需要传递参数。那么我们在jQuery中该如何去做呢?通常,我的解决方法有两种:
1.
$("input[type=button]").bind("click",{name:"Button",value="Params"},function(event){
  alert(event.data.name);
   });
2.使用闭包。有关闭包的相关内容,将会在下一章中介绍,本章不做讨论。
3.还有一个方法,利用jQuery的.data()方法可以传递参数,但是这种类似添加自定义属性的做法传递的参数值不能太大,传的参数太多也不好。下面介绍一下这种方式。如果某个对象的事件需要参数,那么可以在给这个对象绑定事件以前利用.data()方法在对象本身上添加值。如代码:
$("#id").data(name,"value");
$(#id).click(function(){
  alert($(this).data("name"));
});

第三种方法感觉和在页面添加hidden传值比较类似,个人用的非常少,不深究。
 
前面有说过,我们习惯用法是select.do().do()......
那么在jQuery中,我们也可以这么来操作,对某一个对象,我们可以连续的绑定事件、获取属性、更改样式....,我们称之为链式语法。
例如:  
 
—$(“#demo”)
  .attr(“class”,”test”)
  .css("style","display:block")
  .text(“hello word”)
  .click(function(){//you can do something})
  .bind(“select”,function(){//you can do something})
 ……
四、其他
除了选择器和事件,jQuery还给我们提供了很多的方法来操作dom元素,比如:获取元素的属性、文本,操作样式,修改属性,操作节点等。
下面列举一些常用的jQuery方法:
.addClass()、 .append()、appendTo()、.after()、.attr()、.insertAfter()、.insertAfter()、.insertBefore()、.css()、.html()、.text()、.val()、 .replaceAll()、 .replaceWith()、.remove()、.prepend()、.prependTo().....
 
在对dom元素操作的时候,我们经常会对一个集合元素操作,不可避免的,我们会去遍历。在jQuery中推荐用它提供的方法.each()来操作。
jQuery中的each函数有两个,jQuery.each()和.each().这两个函数是不一样的, .each()是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或阵列。
举两个例子来说明。
$("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);
});
 
下面我们说说jQuery的另外一个函数:.extend()。通常,我们可以看到很多的jQuery插件调用的方法都是$.XXXX()这种形式,但是XXXX这个名称在jQuery中是没有被定义过的。为什么还能使用jQuery的$来调用呢?在这里,extend这个方法发挥了不小的作用。
下面看一段代码:
$.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会合并两个数组内容到第一个数组。是完全合并,不会排重的。

 
五、数据交互
最后,我们来说说jQuery的数据交互。jQuery给我们提供了相当多的方法来供我们与服务器进行异步交互,即我们常说的ajax。
—jQuery.ajax( url, [ settings ] )

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相关的东西。

posted @ 2014-09-30 15:39  super1234  阅读(495)  评论(0编辑  收藏  举报