posts - 15, comments - 6, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

JQuery FAQ

Posted on 2008-01-09 21:54 thomas.chen 阅读(617) 评论(0)  编辑  收藏 所属分类: JavaScript

1. JQuery对象和DOM对象如何转换
2. JQuery的get方法和eq方法的区别
3. 在事件处理程式中如何抓取事件的发出者
4. JQuery.getJSON()程式如何使用
5. JQuery 网络资源



1. JQuery对象和DOM对象如何转换
ą JQuery对象才能使用JQuery定义的方法;DOM对象才能使用DOM对象的方法;二者不可以混淆;
ą DOM对象通过$操作则可以转成JQuery对象。例如下面的例子,经过$操作以后,DOM对象就变成了JQuery对象,可以进行JQuery操作。

$(document.getElementById("msg"))

ą JQuery对象转成DOM对象则较复杂一些。由于JQuery对象本身也是集合,所以必须通过索引的方式来转成DOM对象。例如:

$("#msg")[0]
$(
"div").eq(1)[0]
$(
"div").get(0)
$(
"td")[5]

     以上操作执行以后,获取则是DOM对象,则不可以进行JQuery操作


 2. JQuery的get方法和eq方法的区别
ą eq返回的是jquery对象;
ą get(n)和索引返回的是dom元素对象。
     对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容
$("div").eq(2).html();                //调用jquery对象的方法
$("div").get(2).innerHTML;    //调用dom的方法属性


3. 在事件处理程式中如何抓取事件的发出者
在事件处理程式可以申明一个event对象的方式来抓取事件的发出者。
$(document).ready(function(){
       $(
"a.week").click(function(event){
          
var uri = "cWtc.do?";
          
var params = "action=blankWtc&wd=" + $(event.target).text();
          window.location.href
=uri + params;          
       });      
}); 


4. JQuery.getJSON()程式如何使用
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。它基于ECMA262语言规范(1999-12第三版)中JavaScript编程语言的一个子集。 JSON采用与编程语言无关的文本格式,但是也使用了类C语言(包括C, C++, C#, Java, JavaScript, Perl, Python等)的习惯,这些特性使JSON成为理想的数据交换格式。

JQuery.getJSON()是一种支持以AJAX为呼叫方式,以JSON格式进行数据通讯和服务器交互的函数。他有3个参数分别为:
第一个参数:呼叫服务器的URI地址;
第二个参数:参数,也是JSON的方式来表达;
第三个参数:呼叫完成以后的回调函数。(注意返回的资料必须是json格式的,否则回调函数不会启动)
var date = $("#w2").text().split("~")[0];

$.getJSON(
  'o.
do?action=p',
  {wd:date},
  
function(oweeks){
    parseWeek(oweeks);
  }
);

function parseWeek(oweeks){
      
for(i=4;i>0;i--){
          $(
"#w"+i).text(oweeks[4-i].weekdura);
          
if(oweeks[4-i].weekdura == ''){
                $(
"#w"+i).attr('href','#'); 
          }
      
          
if(oweeks[4-i].iscurrent){
                $(
"#w"+i).addClass("currentweek");
          }
else{
                $(
"#w"+i).addClass("week");
                $(
"#w"+i).removeClass("currentweek");
          }                
     }
}   

5. JQuery 网络资源
1. 官方站点 http://jquery.com/
2. 官方教程 http://docs.jquery.com/Tutorials

只有注册用户登录后才能发表评论。


网站导航: