DOM (Domcument Object Model. 文档对象模型) , 每一份DOM都可以表示为一棵树
jQuery 对象
jQuery 对象家就是通过jQuery包装DOM 对象后产生的对象
jQuery 对象是jQuery 独有的 如果一个对象是jQuery对象,,那么就可以使用jQuery方法 、、
例如
: $('#foo').html(); // 获取 id 为 foo 的元素内的html 代码, html() 是jQuery里面的方法
这段代码等同于 document.getElementById("foo").innerHTML;
在jQuery 对象中无法使用DOM对象的任何方法 例如$("#ID").innerHTML 和 $("#ID").checked 之类的写法都是
错误的
可以使用$("#ID").html() 和 $("#ID").attr("checked")之类的jQuery方法来代替。。
同样的 DOM对象也不可以使用jQuery里面的方法 例如: document.getElementById("id").html()也会报错 只能使用 document.getElementById("id").innerHTML 语句
jQuery 对象和DOM对象的相互转换
1 jQuery 对象转换DOM 对象
jQuery 提供了两种方法将一个jQuery对象转换成DOM对象 就是[index] 和 get(index)
(1)jQuery对象是一个类似数组的对象 可以通过[index]的方法得到相应的
DOM对象
jQuery代码如下
var $cr = $("#cr") // jQuery 对象
var cr = $cr[0] // DOM 对象
jQ拥有完善的处理机制
(2) 另一种方法是jQuery本身提供的 通过get(index)方法得到相应的DOM 对象alert( cr.checked ) // 检测这个checkbox 是否被调用
jQuery代码如下var $cr = $('#cr'); // jQuery 对象var cr = $cr。get(0); // DOM对象
alert( cr.checked ) // 检测这个checkbox 是否被调用
2 DOM 对象转换 jQuery 对象
(2
)
对于一个DOM对象,,只需要用$() 把DOM对象包装起来 就可以获得一个jQuery 对象了 方式为$(DOM对象)
DOM对象
jQuery代码如下var cr = document.getElementById("cr") // DOM 对象var $cr = $(cr); // jquery对象
alert( cr.checked ) // 检测这个checkbox 是否被调用
使用jQ 选择器 不仅 比出传统的getElementById() 和 getELementByTagName()
二而且还卡么一避免一些错误 看下嘛这个例子
document getElementById('tt').style.color = 'red;
运行上面的代码,,,浏览器就会报错 原因很简单 因为网页之中没有id为 "tt"
的元素
改进后的代码为
if(document.getElementById("tt")){
document.getElementById("tt").style.color = "red";
}
这样就可以避免浏览器报错
但是假如操作的元素很多 就会一直重复这种工作 所以jQ 给我们提供了很大的便利
$('#tt').css("color", "red"); // 这里无需判断("#tt")是否存在
有了这个预防措施 即便是以后因为某种原因删除网页上的某个以前使用过的元素
也不用担心这个网页的JavaScript 代码会报错
需要
注意的是 $('#tt') 获取的永远是对象 即便是网页上面没有这个元素 因此当需要用jQ 检查某个元素在网页上面是否存在 不可以使用如下代码
if ( $("$tt") ) {
// do something
}
需要这样才可以
应该根据获取到的元素的长度来判断
if ( $("#tt").length > 0 ) {
// do something
}
或者是转化成DOM对象来判断 代码如下
if ( $("#tt")[0] ) {
// do something
}
DOM (Domcument Object Model. 文档对象模型) , 每一份DOM都可以表示为一棵树
jQuery 对象
jQuery 对象家就是通过jQuery包装DOM 对象后产生的对象
jQuery 对象是jQuery 独有的 如果一个对象是jQuery对象,,那么就可以使用jQuery方法 、、
例如
: $('#foo').html(); // 获取 id 为 foo 的元素内的html 代码, html() 是jQuery里面的方法
这段代码等同于 document.getElementById("foo").innerHTML;
在jQuery 对象中无法使用DOM对象的任何方法 例如$("#ID").innerHTML 和 $("#ID").checked 之类的写法都是
错误的
可以使用$("#ID").html() 和 $("#ID").attr("checked")之类的jQuery方法来代替。。
同样的 DOM对象也不可以使用jQuery里面的方法 例如: document.getElementById("id").html()也会报错 只能使用 document.getElementById("id").innerHTML 语句
jQuery 对象和DOM对象的相互转换
1 jQuery 对象转换DOM 对象
jQuery 提供了两种方法将一个jQuery对象转换成DOM对象 就是[index] 和 get(index)
(1)jQuery对象是一个类似数组的对象 可以通过[index]的方法得到相应的
DOM对象
jQuery代码如下
var $cr = $("#cr") // jQuery 对象
var cr = $cr[0] // DOM 对象
jQ拥有完善的处理机制
(2) 另一种方法是jQuery本身提供的 通过get(index)方法得到相应的DOM 对象alert( cr.checked ) // 检测这个checkbox 是否被调用
jQuery代码如下var $cr = $('#cr'); // jQuery 对象var cr = $cr。get(0); // DOM对象
alert( cr.checked ) // 检测这个checkbox 是否被调用
2 DOM 对象转换 jQuery 对象
(2
)
对于一个DOM对象,,只需要用$() 把DOM对象包装起来 就可以获得一个jQuery 对象了 方式为$(DOM对象)
DOM对象
jQuery代码如下var cr = document.getElementById("cr") // DOM 对象var $cr = $(cr); // jquery对象
alert( cr.checked ) // 检测这个checkbox 是否被调用
使用jQ 选择器 不仅 比出传统的getElementById() 和 getELementByTagName()
二而且还卡么一避免一些错误 看下嘛这个例子
document getElementById('tt').style.color = 'red;
运行上面的代码,,,浏览器就会报错 原因很简单 因为网页之中没有id为 "tt"
的元素
改进后的代码为
if(document.getElementById("tt")){
document.getElementById("tt").style.color = "red";
}
这样就可以避免浏览器报错
但是假如操作的元素很多 就会一直重复这种工作 所以jQ 给我们提供了很大的便利
$('#tt').css("color", "red"); // 这里无需判断("#tt")是否存在
有了这个预防措施 即便是以后因为某种原因删除网页上的某个以前使用过的元素
也不用担心这个网页的JavaScript 代码会报错
需要
注意的是 $('#tt') 获取的永远是对象 即便是网页上面没有这个元素 因此当需要用jQ 检查某个元素在网页上面是否存在 不可以使用如下代码
if ( $("$tt") ) {
// do something
}
需要这样才可以
应该根据获取到的元素的长度来判断
if ( $("#tt").length > 0 ) {
// do something
}
或者是转化成DOM对象来判断 代码如下
if ( $("#tt")[0] ) {
// do something
}