`

jQuery之DOM

阅读更多
参考资料
1 跳蚤的小窝:)jQuery对象和DOM对象【jQuery开发注意点(一)】
http://www.blogjava.net/jy00314996/archive/2009/02/17/255083.html
2 浅谈jQuery
http://www.7lemon.net/2011/04/jquery-at-a-glance.html
jQuery对象和DOM对象是二个不同的概念,这二者之间方法不能共用!
1 DOM对象转成jQuery对象
只需要通过$()来包装DOM对象就可以了
2.jQuery对象转成DOM对象:
首先先要明白的是jQuery是一个数组,所以转换为DOM对象有二种方法:[index]和.get(index);

示例1如下:
 //等待dom元素加载完毕.
	$(document).ready(function(){
	    var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
		var $jQueryObj = $(domObj);  //jQuery对象
		alert("DOM对象:"+domObj.innerHTML);
		alert("jQuery对象:"+$jQueryObj.html());
    }); 

<h3>例子</h3>

示例2如下:
$(function(){
			    //把jQuery对象转换为DOM对象
			    /*
			    var $li = $("li");    	//返回jQuery对象
			    //var li =$li[0];     	//返回DOM对象
			    var li =$li.get(0);    	//返回DOM对象
			    alert(li.innerHTML);
			    */
			    
			  //把DOM对象转换为jQuery对象
		      var li = document.getElementsByTagName("li");    //获取所有li元素
			  var $li = $(li[0]);    //把第一个li元素封装为jQuery对象
			  alert($li.html());    //调用jQuery对象的方法		
			  $('ul').append($('<li>new item</li>'));
			  	    
			});	
			
			$(function(){ 
			    $('ul').css('color','red');
			});


<h1>标准DOM</h1>
        <p>这是一份简单的<strong>文档对象模型</strong></p>
        <ul>
            <li>D表示文档,DOM的物质基础</li>
            <li>O表示对象,DOM的思想基础</li>
            <li>M表示模型,DOM的方法基础</li>
        </ul>       
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics