浅析jQuery ------使用jQuery简化AJAX开发

 

 

1.      jQuery 是什么？

 

jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。

 

2.      jQuery资源地址

可以在http://docs.jquery.com/地址下载jQuery的开发包.这个开发包也很简单最主要的就是一个lib文件夹.只要把这个lib文件夹加到相应的js调用目录即可.操作十分方便. 在lib文件夹下有jquery.js 文件.它的作用就相当于我们架构中的bfptable.js.

好了, 现在我们来看看怎么用jquery进行开发!

3.      简单的代码简化

例如:

向每个li段增加一onclick事件

<ol id="orderedlist">

        <li>中国队</li>

        <li>马来西亚</li>

        <li>伊朗</li>

<li>乌兹</li>

</ol>

一般操作如下:

var tmp1 = document.getElementByid("orderedlist");

var tmp2 = tmp1.getElementsByTagName('li');

for (var i=0;i < tmp2.length;i++) {

    var link = tmp2.item(i);

    link.onclick = function() {

        return confirm('You are going to visit: ');

};

 

用jQuery完成:

$('#orderedlist > li').click(function() {

return confirm("You are going to visit:");

});

 

怎么样, 简单吧.几行代码即可以搞定.

简单解释一下这段代码:  首先$() --- jQuery 中功能最强大的函数. 通常，我们都是使用这个函数从文档中选择元素的这个对象. 括号里边即可以是对象名.DOM元素,也可以是一段字符串.  向上面的例子,就是取得id是orderlist 下所有 li元素. # 符号后面对应的元素的ID . li就是DOM元素标识了. 而且如果要取得这组li中的最后一个在li后加上 :last 即可.  怎么样? 猖狂吧!

再举几个例子,说说jQuery的$()函数.

★                  $(myForm.input1 ).hide();  隐藏myForm表单中的id是input1的元素.如果有多个id 是input1的元素怎么办?  不要紧, 即使有多个也会被全部隐藏而不用多写任何代码.

★                  $("<div><p>Hello</p></div>").appendTo("#myBody"); 

“Creates a div element (and all of its contents) dynamically, and appends it to the element with the ID of body. Internally, an element is created and it's innerHTML property set to the given markup. It is therefore both quite flexible and limited.”

这是英文的解释, 我担心被我翻译之后, 原来的意思不能完整的表达. 所以就贴到这里了.

    还有好多其它的应用, 暂不一一列举. 如果有兴趣可以到http://visualjquery.com/下载jQuery的API. 那时你就会知道精彩才刚刚开始.呵呵 ﹋

4.      使AJAX变得简单

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。

AJAX的主要特点就是实现了服务器和显示界面的异步.

例如用post进行提交

$.post("test.java",

  { name: "John", time: "2pm" },

  function(data){

    alert("Data Loaded: " + data);

  }

);

函数原型是: $.post(url, params, callback)

参数不用解释.  望名即可知意.  返回值是XMLHttpRequest类型.

 

如果确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 Ajax 体验的反馈。此外，还有一些其它的参数可供使用，可以使用它们设置 Ajax 请求的超时，也可以设置页面 “最近一次修改” 的状态。例如:

$.ajax({

    url: 'detailTable.xml',

    type: 'post',

    dataType: 'xml',

    timeout: 1000,

    error: function(){

        alert('Error loading XML document');

    },

    success: function(xml){

        // do something with xml

    }

});

函数原型: $.ajax(properties)

参数是map类型.  返回值XMLHttpRequest类型;

 

5.      DOM 脚本和事件处理

jQuery可以简化DOM脚本和事件处理. 遍历和处理DOM非常简单. 可以创建元素并使用append()函数把它们与其它的一些元素链接到一起. Clone() 复制元素. Empty() 删除内容. Remove() 删除所有元素. 还可以获得元素所有的siblings(). parents(), children(). 可以选择next() , prev() 兄弟元素. Find() 使用jQuery选择器搜索jQuery对象中元素的后代元素. 等等…

 

例如:

$('myForm#login')

    // hide all the labels inside the form with the 'optional' class

    .find('label.optional').hide().end()

 

    // add a red border to any password fields in the form

    .find('input:password').css('border', '1px solid red').end()

 

    // add a submit handler to the form

    .submit(function(){

        return confirm('Are you sure you want to submit?');

});

 

首先，选择登录表单myForm。然后，发现其中含有可选标签，隐藏它们，并调用 end() 返回表单。

然后，创建了密码字段，将其边界变为红色，再次调用 end() 返回表单。

最后，在表单中添加了一个提交事件处理程序。Submit调用就象调用click() 一样.

 

6.      结束语

jQuery还有许多功能. 它的API共分为CORE, DOM, CSS , JAVASCRPT , AJAX 等七个部分. jQuery提供了丰富了javascript代码 , 极大程序上方便了我们的开发工作.