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. 廖雪峰Java3异常处理-2断言和日志-1使用断言

    1.断言 断言Assertion是一种程序调试方式 使用assert关键字 断言条件预期为true 如果断言失败,抛出AssertionError,停止程序 可选的断言消息,断言失败,就会抛出 pub ...

  2. Java项目配置redis

    成功配置redis之后,便来学习使用redis.首先了解下redis的数据类型. Redis的数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set( ...

  3. [UE4]纯函数的执行时机

    一.纯函数是在需要的时候被调用 二.纯函数内不应当修改任何数据 三.如果同一个函数需要多个得到多个纯函数的返回值,则多个纯函数的调用顺序不是固定的,并且一个纯函数的调用顺序也不应当影响下一个纯函数的返 ...

  4. go语言功能代码

    一.数据类型转换 package main import ( "fmt" "strconv" ) func main() { //int到string str ...

  5. Pyhton基础知识（一）

    Pyhton基础知识(一)一.cpu 内存 硬盘 操作系统之间的关系1.cpu 中央处理器 运算中心与控制中心 相当于人的大脑.2.内存 暂时存储数据 将应用程序加载到内存 以便于cpu进行数据传输交 ...

  6. HTTP协议的简单解析

    超文本传输协议(HTTP,HyperText Transfer Protocol)是用于从服务器传输超文本到本地浏览器的传输协议,是应用最为广泛的网络协议.B/S网络架构的核心是HTTP,掌握HTTP ...

  7. 牛客网剑指Offer——正则表达式匹配

    1. 题目描述 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整 ...

  8. python hashillb 模块

    hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 import hashlib # ## ...

  9. uWSGI, Gunicorn, 啥玩意儿?

    因为nginx等优秀的开源项目,有不少本来不是做服务器的同学也可以写很多服务器端的程序了.但是在聊天中会发现,大家虽然写了不少代码,但是对wsgi是什么,gunicorn是什么,反向代理又是什么并不了 ...

  10. Linux 安装redis 基本配置 发布订阅,安全配置,持久化 rdb ,aof

    redis redis相关配置1.yum  源码 rpm  yum 快速,间接,高效,解决依赖关系,(自动安装到某个路径,不可控),通过yum安装的软件查询命令 rpm -ql nginx  yum源 ...