jQuery——基础篇(1)

(1)、Ajax常用框架 Ext,DWR, prototype, jQuery
 Ext 框架库能够做出很绚丽的页面，但是这个库本身很大(500k) 不适合于大型网站，适合于公司内部网站

 

(2)、jQuery 操作DOM 和传统js操作DOM对比
 js脚本
  var external_links = document.getElementById('external_links');
 var links = external_links.getElementsByTagName('a');
 for (var i=0;i < links.length;i++) {
     var link = links.item(i);
     link.onclick = function() {
         return confirm('You are going to visit: ' + this.href);
     };
 }
 
 jQuery脚本
 $('#external_links a').click(function() {
     return confirm('You are going to visit: ' + this.href);
 });

(3)、 $() 函数的四种用法 
 (1)、$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组，但是它附带有大量特殊的 jQuery 函数。
 比方说，您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。
 (2)、还可以向 $() 函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个 jQuery 对象中。比方说 window 对象。
 $(window).load(function() {
     // alert();
 });
 (3)、有的时候，您希望首先完成图片加载，但是在大多数情况下，您只需加载超文本标志语言（Hypertext Markup Language，HTML）就可以了。通过在文档中创建特殊的 ready 事件，
 $(document).ready(function() {
     // do this stuff when the HTML is all ready
 });
 
 (4)、使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象
 $('<p></p>')  //等价$('p')
     .html('Hey World!')
     .css('background', 'yellow')
     .appendTo("body");

 在前一个例子中您可能已经注意到，jQuery 中的另一个功能强大的特性就是方法链接（method chaining）。每次对 jQuery 对象调用方法时，方法都会返回相同的 jQuery 对象。
 这意味着如果您需要对 jQuery 对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的：
 $('#message').css('background', 'yellow').html('Hello!').show();
 
(4)、jQuery 选择器
 jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；
 第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
 $(document).ready(function() {
  $("#orderedlist > li").addClass("blue");
 });这样，所有orderedlist中的li都附加了样式"blue"。
 精确简单的选择对象
 $('#element');// 相当于document.getElementById("element")
 $('.element');//Class
 $('p');//html标签
 $("form > input");//子对象
 $("div,span,p.myClass");//同时选择多种对象
 $("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
 $(":input");//表单对象
 $("input[name='newsletter']");//特定的表单对象

 find each 使用
  find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。
  $(document).ready(function() {
  $("#orderedlist").find("li").each(function(i) {
   $(this).html( $(this).html() + " BAM! " + i );
  });
 });

 //选择了所有的"form"元素，并在其中的第一个上call了一个reset()。
 $(document).ready(function() {
  $("#reset").click(function() {
   $("form")[0].reset();
  });
 });

 //文档中所有的form元素，并对它们都执行了一次reset()。
 $(document).ready(function() {
  // use this to reset several forms at once
  $("#reset").click(function() {
   $("form").each(function() {
    this.reset();
   });
  });
 });

(5)、jQuery 简化Ajax 调用
 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。
  还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 Ajax 体验的反馈。
 eg:
 $.ajax({
   url: 'aServlet.do?method=save&name='+$("#name"),
   type: 'GET',
   dataType: 'xml',
   timeout: 1000,
   error: function(){
       alert('Error loading XML document');
   },
   success: function(xml){
       // do something with xml
   }
 });

 success: function(xml){
     $(xml).find('item').each(function(){
         var item_text = $(this).text();
 
         $('<li></li>')
             .html(item_text)
             .appendTo('ol');
     });
 }
 当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的