1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>例子</h3>
<p title="你最喜欢吃的水果">你最喜欢吃的水果?</p>
<ul>
<li class="attive">梨子</li>
<li>苹果</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
</body>
</html>

运行结果和DOM结构如下:

                   

在这棵DOM树中,h3,p,ul 以及ul下的4个li 子节点,都是DOM的元素节点,可以通过js中的getElementsByTagName或者getElementById来获取元素节点,像这样得到的DOm元素就是DOM对象;dom对象js获取实例:

var domObj = document.getElementById('Id');                                // 获取DOM对象

var ObjHTML = domObj.innerHTML;                                               // 使用JS中的属性----innerHTML;

2. jquery 对象

jquery 对象就是通过jQuery 包装DOM对象后产生的对象。

jquery对象是jQuery 独有。如果一个对象是jquery对象,就可以使用jquery里的方法;例如:

$("#name1").html();            // 获取ID为name 的元素里的 html代码;

等同于js里的:document.getElementById("name").innerHTML;

备注:jquery 对象不能使用DOM对象的任何方法;DOM对象也不能使用jquery里的方法。

3. jquery对象与DOM对象的转换:

3.1 jquery 对象转换为DOM对象:通过[index]和get(index);

3.1.1 jquery 代码:

var $cr = $("#cr");                   // 获取jquery对象 $cr

var  cr  = $cr[0] ;                     // 转化为DOM对象 cr

alert( cr.checked );                // 弹出cr对象的checked 属性值

3.1.2 jquery 代码:

var $cr = $("#cr");                   // 获取jquery对象 $cr

var  cr  = $cr.get(0) ;                     // 转化为DOM对象 cr

alert( cr.checked );                // 弹出cr对象的checked 属性值

3.2  DOM对象转化为jquery对象:用 $() 把DOM对象包裹起来,就可以了

3.1.2 jquery 代码:

var cr = document.getElementById("id_name") ;                   // 获取Id名字为id_name的DOM对象;

var  $cr  = $( cr ) ;                     // 将DOM对象转化为jquery 对象

alert( $cr.attr("checked") );                // 弹出jquery对象$cr的checked 属性值

jquery接触初级----jquery 对象和Dom对象的更多相关文章

  1. jquery接触初级----jquery 选择器

    css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...

  2. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  3. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  4. [转] jQuery对象与DOM对象之间的转换

    http://wozailongyou.iteye.com/blog/299311 http://blog.allenm.me/2009/07/jquery%E4%B8%ADid%E5%92%8Cdo ...

  5. jQuery对象与DOM对象之间的转换

    刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  6. jQuery对象与dom对象相互转换jQuery对象与dom对象相互转换

    转至:http://www.chinaz.com/design/2010/0309/108144.shtml 刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于D ...

  7. jQuery对象和Dom对象的区分以及之间转换

    刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 一,什么是jQuer ...

  8. 【转】jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  9. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

随机推荐

  1. Scrapy实战篇(八)之Scrapy对接selenium爬取京东商城商品数据

    本篇目标:我们以爬取京东商城商品数据为例,展示Scrapy框架对接selenium爬取京东商城商品数据. 背景: 京东商城页面为js动态加载页面,直接使用request请求,无法得到我们想要的商品数据 ...

  2. PHP中常用的数组函数总结

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数,数组的分段和填充,数组与栈,数组与列队,回调函数,排序,计算,其他的数组函数等. 一,数组操作的基本函数 数组的键名和值 array_va ...

  3. maven工程强制更新 ,下载源码操作

    看图,在window->preferences->maven , 勾选图中的选项就可以下载源码包了,

  4. [UE4]碰撞的随机性

    物理引擎(包括碰撞)的计算具有随机性 原因: 一.每一帧的时间并不是严格相等 二.浮点数计算不是完全准确(两个浮点数运算,结果不可重复) 影响 在左边窗口(服务器端)打几发子弹把其中3个立方体的位置打 ...

  5. CRM 2016 升级CRM365之注意事项

    https://docs.microsoft.com/zh-cn/previous-versions/dynamicscrm-2016/deployment-administrators-guide/ ...

  6. String,StringBuilder和StringBuffer区别

    String字符串常量 StringBuilder 字符串变量(非线程安全) StringBuffer  字符串变量(线程安全) 1.String String是字符串常量,为不可改变对象 Strin ...

  7. hook mono实现Assembly.Load从指定路径读取文件

    mono-unity github: https://github.com/Unity-Technologies/mono/blob/unity-staging/mono/metadata/assem ...

  8. 命令提示符没办法登录MySQL

    前几天在CMD命令下输入  MYSQL -UROOT -P 一直显示命令无效. 后来想知道原来是要在MYSQL的BIN(安装)目录下才能访问该命令,如果要在其他路径下使用sql命令,那么要配置MYSQ ...

  9. Redis Server installation FAQs

    OS: CentOS 7 Minimal (0) open files Q: Increased maximum number of open files to 10032 (it was origi ...

  10. Solr查询参数sort(排序)

    摘要: Solr查询每一次返回的数据都有一定的顺序,特定顺序的结果对于业务来说可能非常重要. 不指定排序 一般我们不指定排序规则,这样的结果能满足大部分需求,默认是用文档的得分作为排序标准.相当于加上 ...