一、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是否被选中
.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')
三、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" on
一个是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="JavaS
<!--
function chkacc(){
alert(document.getElementByIdx_x_x("tbxuid1").value);
alert(document.getElementByIdx_x_x("tbxpwd1").value);
alert(document.getElementByIdx_x_x("tbxuid").value);
alert(document.getElementByIdx_x_x("tbxpwd").value);
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACT
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid1">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd1">
</FORM>
<FORM METHOD=POST ACT
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd">
<INPUT TYPE="button" value="檢查" name="btnchk" on
</FORM>
</BODY>
</HTML>
② javas
网页中的元素必须有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