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

posted @ 2008-11-14 18:06  baiyicug  阅读(532)  评论(2编辑  收藏  举报