2012.11.30（juquery和DOM的相互转化，关于val(),getElementByIdx(),this和$(this)）

来源：互联网发布：Java大小写转换编辑：程序博客网时间：2024/05/19 02:39

一、jQuery对象和DOM对象相互转化

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；

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

$("#img").attr("src","test.jpg"); 和document.getElementByIdx("img").src="test.jpg";是等价的，是正确的，但是$("#img").src="test.jpg";或者document.getElementByIdx("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.getElementByIdx("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对象取值的3种方式：val()、html()、text()

.css('border','none')
.css('borderBottom','solid 1px navy')
.css({'width':'30px'});
以上三行代码都是针对之前的jQuery对象设置CSS样式，如果一次需要设置多个CSS值，可用另一种形式，如：
.css({'border':'none','borderBottom':'solid 1px navy','width':'30px'});

css()函数如果只传一个字符串参数，则为取样式值，比如css('color')为取得当前jQuery对象的样式属性color的值。jQuery对象有多种这样的函数，比如，val('')为设value，val()为取value，text('text')为设innerText,text()为取得innerText，此外还有html(),用于操作innerHTML,而click(fn)/click(),change(fn)/change()……系统函数则为事件的设置处理函数与触发事件。

============================

比如:<a href="http://www.baidu.com"><li>jQuery(expression,context)</li></a>标签

val():取不出值，因为a标签没有value属性

text():取出的是：jQuery(expression,context)。忽略标签。

html():取出的是：<li>jQuery(expression,context)</li>。

============================

如果想拿到http://www.baidu.com。可以使用$('a').attr('href')

取出：http://www.baidu.com

三、document.getElementByIdx_x_x的一些细节问题

① document.getElementByIdx_x_x 有时会抓name放过了id ，据说是IE的一个BUG；
http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443

页面中有
<input type="hidden" id="hello8" name="category_id" value="2" />
<select id="category_id" onchange="al();">

一个是name="category_id" 一个是id="category_id"
用document.getElementByIdx_x_x取第二个，可是，取到的却是第一个name=category_id
在IE中getElementById竟然不是先抓id而是先找name相同的物件...

兩個form,每個form有兩個textbox,兩個form中的textbox是相同的name,但id都不同...
這樣在Firefox是沒問題的...但在IE卻只抓得到第一個出現的name資料

下面这段代码可以验证这个结果

<HTML>
<HEAD>
<TITLE> getElementById </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name="frm1">
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid1">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd1">
</FORM>
<FORM METHOD=POST ACTION="" name="frm2">
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd">
<INPUT TYPE="button" value="檢查" name="btnchk" onclick="chkacc();">
</FORM>
</BODY>
</HTML>
② javascript中的getElementbyId使用
网页中的元素必须有id属性，才能通过这个方法得到，比如
<input type=text name="content" id="content">

③获取html标记主要有两种方法，一种是通过ID值，一种是通过name属性
name属性主要用于form表单内的input标记

四、getElementByIdx_x

最近看JS代码，发现不少人问getElementByIdx_x是什么函数，其实就是个getElementById自定义函数

详细出处参考：http://www.jb51.net/article/29540.htm
<div id='box'>9</div>
<script>
document.getElementByIdx_x=function(id){
if(typeof id =='string')
return document.getElementById(id);
else
throw new error('please pass a string as a id!')
}
var timer = window.setInterval(function(){
document.getElementByIdx_x('box').innerHTML = parseInt(document.getElementByIdx_x('box').innerHTML) - 1;
if(parseInt(document.getElementByIdx_x('box').innerHTML) < 0)
{
window.clearInterval(timer);
window.location = 'http://www.jb51.net';
}
}, 1000);
</script>

五、this和$(this)的区别

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性，方法
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

参考：http://www.cnblogs.com/iceWolf/archive/2009/08/27/1555138.html