jQuery入门参考

功能简介：
(1)可以访问并修改页面元素的相关属性（css，内容，事件等）

(2)与服务器异步交互。jQuery 也提供了一整套Ajax 相关的操作，大大方便了异步交互的开发和使用。

(3)为页面添加动画。通常在页面中添加动画都需要开发大量的JavaScript 代码，而jQuery大大简化了这个过程。jQuery 的库提

    供了大量可自定义参数的动画效果。

(4)简化常用的JavaScript 操作。jQuery 还提供了很多附加的功能来简化常用的JavaScript操作，例如数组的操作、迭代运算等。



JQuery优点

▪ 体积小（v1.2.3 15kb）

▪ 丰富的DOM选择器(CSS1-3 + XPath)

▪ 跨浏览器（IE6,FF,Safari,Opera）

▪ 链式代码

▪ 强大的事件、样式支持

▪ 强大的AJAX功能

▪ 易于扩展，插件丰富

 

代码风格： 

$(document).ready(function() {

      //为页面上的每一个链接添加一个点击事件

      $("a").click(function() {

            alert("Hello world!");

      });

      //为ID为orderedlist的元素添加red样式

      $("#orderedlist").addClass("red");

});

  

1.关于DOM元素的获取

$("#p"):  ID为p的一个元素，相当于JavaScript里的document.getElementById("p")

$(".p"):   所有样式名为p的元素，返回的是一个元素集

$("p"):    所有HTML标签为p的元素，返回的是一个元素集 

jQuery的选择符支持id,tagName,css1-3 expressions,XPath;

除此之外，还可以根据DOM元素的父子关系，内容，属性，位置等相关信息进行筛选，

也可以在获得的元素集上进一步筛选，具体功能参见API文档(中文，英文)

2.修改设置元素的属性、样式及DOM处理

html(),html(val)        text(),text(val)         val(),val(val)

height(),height(val)   width(),width(val)

相信从字面上就能知道他们的意思了

此外jQuery还提供了强大的方法来方便我们操作DOM对象，详细说明请见API文档

3.事件

对于JavaScript里的onXXX事件(如onclick,onchange,onsubmit等)，在jQuery里都有对应的表示方法，只是

jQuery不喜欢onXXX，所以都改成了XXX，去掉了on。其他的一些事件，如ready和hover,也提供了相应的方法。

//JavaScript:  

obj.onclick=function(){alert('hello!');}

//jQuery:      

$("#id").click(function(){alert('hello!');});

4.Ajax

(1)通用方式：

$.ajax(prop)  通过一个ajax请求，获取远程数据，prop是一个hash表，它可以传递的key/value有以下几种。

   (String)type：数据传递方式(get或post)。

   ((String)url：数据请求页面的url

   ((String)data：传递数据的参数字符串，只适合post方式

   ((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")

   ((Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false

   ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout

   ((Boolean)global：是否为当前请求触发ajax全局事件，默认为true

   ((Function)error：当请求失败时触发的函数。

   ((Function)success：当请求成功时触发函数

   ((Function)complete：当请求完成后出发函数

相关代码

$.ajax({url: "ajax.htm",

          success:function(msg){ 

                         $("#a").html(msg);

                } 

    });   //将ajax.htm返回的内容作为id为a的div内容 

$.ajax({ url: "ajax.aspx",

              type:"get",           

             dataType:"html",

             data: "name=John&location=Boston",

             success:function(msg){ 

                                 $("#a").html(msg);

                              } 

         });  //用get方式向ajax.aspx页面传参数，并将返回内容负给id为a的对象。

(2)简化方式：

$.get(url, params, callback)  用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！

$.post(url, params, callback)  用post方式向远程页面传递参数，请求完成后处理函数callback

$.get( "ajax.htm" , function(data){ $("#a").html(data)  });

$.post(  "ajax.asp", 

         { name: "young", age: "25" },

         function(data){ alert("Data Loaded: " + data); }

      );

5.动画

hide(), show()  显示/隐藏对象;  toggle() 切换元素的可见状态。

slideDown,  slideUp,  slideToggle  通过高度变化显示/隐藏对象，切换元素的可见状态，即垂直方向上的滑动效果。

fadeIn, fadeOut, fadeTo  淡入淡出效果

animate 自定义动画效果

详细使用说明请参考API文档

 

jQuery官方API文档：

中文：http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

英文：http://docs.jquery.com/Main_Page

其他一些参考文档：
http://www.k99k.com/jQuery_getting_started.html http://thinhunan.cnblogs.com/archive/2008/03/05/1091816.html http://wiki.jquery.org.cn/doku.php http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html