jQuery对象和DOM对象【jQuery开发注意点(一)】

转载:jQuery对象和DOM对象【jQuery开发注意点(一)】
http://www.blogjava.net/jy00314996/archive/2009/02/17/255083.html
学习jQuery已经3天了，总结一些注意的地方供给和我一样的初学者
jQuery对象和DOM对象；这是我第一个碰到的问题。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；

DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象；

$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等价的，是正确的，但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。
在说一个例子：就是this，我在写jQuery的时候经常这样写：this.attr("src","test.jpg"); 可是就是出错。其实this是DOM对象，而.attr("src","test.jpg") 是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如$(this).attr("src","test.jpg");

1.DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v");  //DOM对象
var $v=$(v);    //jQuery对象
转换后，就可以任意使用jQuery的方法了。 

2.jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0];    //DOM对象
alert(v.checked)   //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v");  //jQuery对象
var v=$v.get(0);   //DOM对象
alert(v.checked)  //检测这个checkbox是否被选中
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

我的jQuery学习笔记
http://www.blogjava.net/jy00314996/archive/2009/02/17/255081.html

 
/******************************    
 * jQuery学习笔记  
 * @author Linvo  
 ******************************/  
 
$() = $(document)   
    
//实现window.onload()效果   
$().ready(   
    function(){   
        //需要执行的内容   
    }   
);   
    
//获取DOM元素(返回值为jQuery对象)   
$(element) //相应元素名的   
$(.classname) //class值匹配的   
$(element.classname) //相应元素中，class值匹配的   
$(#id) //id匹配的   
$(element#id) //相应元素中，id匹配的   
$(element1 > element2)   //元素一 下 的所有元素二（只包括儿子）   
$(element1 element2)        //元素一 中 的所有元素二（包括子孙等）   
$(element1 + element2)  //元素一 后 的所有元素二（代码后）   
$(element1 ~ element2)  //与元素一 并列 的所有元素二（兄弟元素二）   
    
$(#id).html("") //设置 getElementById("id").innerHTML = ""   
$(#id).html()       //取出 getElementById("id").innerHTML   
    
//动画出现效果   
$(#id).show(speed, [callback])   
$(#id).slideDown(speed, [callback])   
 
//在<p>外面包围另一个结构（html代码/元素）   
$("p").wrap("<div class='wrap'></div>")   
$("p").wrap(document.getElementById('content'))   
    
$("p").append("<b>Hello</b>");  //<p>I would like to say: <b>Hello</b></p>   
$("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>   
$("p").before("<b>Hello</b>");  //<b>Hello</b><p>I would like to say: </p>   
$("p").after("<b>Hello</b>");   //<p>I would like to say: </p><b>Hello</b>    
    
//【删除相应class的p元素】   
//<p class="classname">AAA</p> BBB <p>CCC</p>   
//BBB <p>CCC</p>   
$("p").remove(".classname");    
  
//获取具有某属性值的相应元素   
$("input[name=qq]") //获取<input name="qq" type="text" />元素   
    
//属性与值关系   
=   //等于   
*=  //包含该值   
!=  //不包含该值   
^=  //以该值开头   
$=  //以该值结尾   
    
//为每一个匹配的元素执行该函数   
$(element).each(function(){   
    //需要执行的内容   
})     
 
/*  
jQuery中用post和get方法  
（ajax高层抽象方法，对ajax方法进行了封装）  
   
【当JQ中用post方式】  
PHP用$_POST接收时，只有n2  
PHP用$_GET接收时，只有n1  
   
【当JQ中用get方式】  
PHP用$_GET接收，n1 n2都有  
PHP用$_POST接收时，都没有  
*/  
$.post("do.php?n1=a", {n2: "b"},       
    function(data){   
        alert("Data Loaded: " + data);   
    }   
);   

//DOM对象 -> jQuery对象   
//$(DOM对象)   
var v = document.getElementById("id");  //DOM对象 v    
var $v = $(v); //jQuery对象 $v   
    
//jQuery对象 -> DOM对象   
//jQuery对象.get(0) 或者 jQuery对象[0]   
var $v = $("#id");  //jQuery对象 $v   
var v = $v.get(0); //DOM对象 v   
var v = $v[0]; //DOM对象 v   
    
$(element).get(); //获取指定元素的集合   
    
//jQuery用ajax方法（ajax低层方法）   
$.ajax({   
    type:   "POST", //POST时PHP中用$_POST接收，GET反之。   
    url:    "do.php",   
    data:   "n1="+x+"&n2="+y,   
    success: function(data){ alert( "Data Saved: " + data ); }    
});   

//序列表表格内容为请求字符串   
//返回值：（例）name=linvo&age=22   
$("form").serialize() //序列化整个表单元素内容   
$("input[type=text]").serialize() //序列化指定元素内容（例）   
    
$(element).empty(); //移除指定元素下所有元素   
    
/*  
 CSS设置  
*/  
$(element).addClass("classname"); //为指定元素添加css样式   
$(element).removeClass("classname") //移除指定元素的css样式   
$(element).toggleClass("classname") //指定元素的css样式，有则删除，无则添加   
$(element).css("attname"); //获取指定元素相应属性的值（attname例：color）   
$(element).css("attname","value"); //设置……属性值（例："color","#FF0000"）   
$(element).css({ "margin-left": "10px", "background-color": "blue" });    
//使用“名/值对”进行批量设置……（例子见自身）   
 
$(element1).next(element2) //与指定元素一 紧邻 的指定元素二   
$(element1).parent().is(element2) //元素一的父元素在元素二的集合中吗    
    
//模仿鼠标悬停事件   
//hover(over,out)   
//over:在上方执行 | out：移出时执行   
$(element).hover(   
    function(){   
        //在上方执行   
    }, function(){   
        //移出时执行   
    }   
)