.append dom()括号中是填写jq对象还是dom对象？？？

来源：蜘蛛抓取(WebSpider) 时间：2016-05-31 13:26 标签： dom appendchild
本文主要向大家介绍了jQuery对象和DOM对象之间互相转换的方法，其实转换过程十分简单，一起来看看吧。
在讨论jQuery对象和DOM对象的相互交换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前加上$，例如：
var $variable = jQuery对象;
如果获取的是DOM对象，则定义如下：
var variable = DOM对象；
1.jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，有以下两种处理方法。jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index).
(1)jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。
jQuery代码如下：
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0] //DOM对象
alert(cr.checked) //检测这个checkbox是否选中了
(2)另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
jQuery代码如下：
var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked)
2.DOM对象转换成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，方式为$(DOM对象)。
jQuery代码如下：
var cr = document.getElementByID("cr"); //DOM对象
var $cr = $(cr);
转换后，可以任意使用jQuery中的方法。
通过以上方法，可以任意地相互转换jQuery对象和DOM对象。
最后强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM。
热门栏目订阅2047人阅读
PHP/Python/前端（20）
& & 在学习和使用javascript过程中经常使用JQuery的选择器，但是在获取到选择结果之后经常“犯迷糊”，需要一个DOM对象时或者一个JQuery对象，这样的尴尬经常遇到。为了让自己不再迷糊通过博文总结经验教训，希望自己在总结过程中缓慢提高。
& & 【相关博文】
& & 【示例页面】——test-ul.html
&!DOCTYPE html&
&meta charset=&utf-8&&
&!-- &script src=&jquery.js&&&/script& --&
&script src=&/jquery/1.10.2/jquery.min.js&&
&li&Raspberry&/li&
&li&Arduino&/li&
&li&Intel Galileo&/li&
1.选择所有的li
& & 【使用jquery】
var $obj = $(&li&);
console.log($obj);
& & 【使用javascript】
var obj = document.getElementsByTagName(&li&);
console.log(obj);
& & &【主要区别】
& & 此时$obj为Jquery对象集合，而obj为DOM对象集合。
2.Jquery对象变为DOM对象——[]方法
var obj = $(&li&)[0];
console.log(obj);
// &li&Raspberry&/li&
console.log(obj.innerHTML);
// Raspberry
& & 【说明】
& & 此处obj为DOM对象，可以使用属性innerHTML。如果使用Jquery的html方法那么浏览器将会发出错误警告。
3.Jquery对象变为DOM对象——get方法
var obj = $(&li&).get(1);
console.log(obj);
// &li&Arduino&/li&
console.log(obj.innerHTML);
// Arduino
& & 【说明】
& & []方式和Jquery的get方法效果相同。
4.使用javascript达到相同效果
var obj = document.getElementsByTagName(&li&)[2];
console.log(obj);
// &li&Intel Galileo&/li&
console.log(obj.innerHTML);
// Intel Galileo
5.选择子元素时仍为Jquery对象——eq方法
var $obj = $(&li&).eq(0);
console.log($obj);
console.log($obj.html());
// Raspberry
& & 【说明】
& & 使用eq方法获得Jquery对象，那么获得此对象的HTML内容需要使用Jquery的html()方法，而不是javascript的innerHTML属性。
6.使用Jquery遍历所有子节点
$(&li&).each(function(index,item){
console.log(item);
// item为DOM对象
console.log(item.innerHTML);
// 依次输出 Raspberry Arduino Intel Galileo
& & 【说明】
& & each遍历的item为DOM对象而不是Jquery对象。
7.遍历时再变为Jquery对象
$(&li&).each(function(index,item){
$item = $(item);
// 再次变为Jquery对象
// console.log($item);
console.log($item.html());
// 依次输出 Raspberry Arduino Intel Galileo
& & 【说明】
& & &$item = $(item)再一次变化出JQuery对象，$(item)此时和$(&li&Raspberry&li&)等价，意为选择一个DOM对象并变为JQuery对象。 &
8.使用Javascript遍历所有子节点
var objs = document.getElementsByTagName(&li&);
for(var i=0; i&objs. i++) {
console.log(objs[i]);
console.log(objs[i].innerHTML);
// 依次输出 Raspberry Arduino Intel Galileo
& & 【1】使用Jquery选择器之后可以使用[]和get获得子DOM，也就是说[]和get具有把Jquery对象转换为DOM对象的功能。
& & 【2】eq方法获得的对象仍为JQuery对象
& & 【3】each方法遍历时的item为DOM对象
& & 【4】JQuery对象使用JQuery方法，DOM对象使用DOM方法。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1619814次
积分：15927
积分：15927
排名：第388名
原创：186篇
评论：1234条
所在地： 江苏无锡
(2)(1)(1)(3)(1)(3)(2)(1)(7)(16)(17)(14)(5)(13)(9)(4)(15)(11)(13)(12)(1)(3)(2)(21)(1)(4)(2)(1)(5)(2)(1)

我要回帖

更多关于 dom appendchild 的文章

 

随机推荐