随笔 - 1  文章 - 0  trackbacks - 0
<2010年9月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

常用链接

留言簿

随笔分类

随笔档案

搜索

  •  

最新评论

    通过JQuery丰富的选择器可以让开发者很容易的选择页面元素,然而却无法自在的使用传统javascript中操作Dom元素的方法。有必要了解JQuery和Dom对象的区别。
一、Dom对象
    在传统的js开发中,程序员通常通过以下方式获得Dom对象:
    1.var div = documnet.getElementById("testDiv");
    2.var divs = documnet.getElementByTagName("div");
    第一种方法是根据id获取单个Dom对象,第二个方法是根据Html标签名称获取Dom对象的集合。
    通过这种方式获得的Dom对象,有不同的类型,比如input、div、button、span等,Dom对象拥有有限的属性和方法。

二、JQuery对象
    通过JQuery选择器获得的对象拥有JQuery特有的属性和方法。事实上,通过JQuery的id或是name选择器获得的对象,无论是一个还是一组,都是经过JQuery包装过的集合,称作JQuery包装集。这个包装集使得获得的对象拥有丰富的属性和方法。
 
三、Dom对象与jQuery对象的转换
    1、Dom转jQuery包装集 
    要使用jQuery提供的函数,就要首先构造jQuery包装集。 构造JQuery包装集的方法通常有2种:
    (1) 通过JQuery选择器,形如:$("#testDiv");
    (2)当已经获得一个Dom元素的时候,可以通过$将其转化成JQuery包装集,形如:
    var div = document.getElementById("#testDiv"); 
    var dom_to_JQueryObject(div);
    2、jQuery包装集转Dom对象 
    JQuery包装集是一个集合, 可以通过索引器访问其中的某一个元素得到一个Dom对象,形如:
    var JQuery_to_domObject = $("#testDiv")[0];
    需要提及的一点是,JQuery包装集中的某些遍历方法,如each()中,可以传递遍历函数,在遍历函数中的this也是Dom元素,比如:
    $("#testDiv").each(function() { alert(this) });
    如果要在遍历函数中使用JQuery的方法操作Dom,可以利用上面提及的方法进行转换,即:
    $("#testDiv").each(function() {
        $(this).html("测试Div");
    });
 

posted on 2010-09-15 20:49 yacobi 阅读(266) 评论(0)  编辑  收藏 所属分类: Jquery

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


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问