DOM对象和JQuery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。
1.jQuery对象和DOM对象
第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.
DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;
复制代码 代码如下:

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是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方法。学习jQuery开始就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习 jQuery就会轻松很多的。

2.jQuery对象和DOM对象的互相转换

在上面第一点说了,jquery对象和dom对象是不一样的!比如jquery对象不能使用dom的方法,dom对象不能使用jquery方法,那假如我 jquery没有封装我要的方法,那能怎么办呢?
这时我们可以将jquer对象转换成dom对象

jquery对象转换成 dom对象
jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。可能有人会觉得奇怪,怎么是用下标呢,没错,jquery对象就是一个数组对象.
下面代码将演示一个jquery对象转换成dom对象,再使用dom对象的方法
复制代码 代码如下:

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

dom对象转换成jquery对象
对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);
复制代码 代码如下:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

转换后可以任意使用jquery中的方法了.

通过以上的方法,可以任意的相互转换jquery对象和dom对象.
最后再次强调,dom对象才能使用dom中的方法,jquery对象不可以使用dom中的方法,但 jquery对象提供了一套更加完善的工具用于操作dom,关于jquery的dom操作将在后面的文章进行详细讲解.


ps: 平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是 jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象,则定义如下:
var variable = dom对象

转载于:https://www.cnblogs.com/thybk/p/8306157.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/398859.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Eclipse 构建Maven项目

http://www.iteye.com/topic/1123225转载于:https://www.cnblogs.com/svennee/p/4079102.html

Winform可读取html语言,C# Winform 用WebBrowser实现 Html 编辑功能

介绍一款Winform中使用的html editor (Html编辑控件),不过这不是一款新控件,它就是.Net平台开发人员所熟知的WebBrowser控件—_—.WebBrowser也可以实现Html编辑和预览功能。你只需要使用WebBrowser的设计模式去编辑,用第二个WebBrowser去预览…

Java学习笔记(二):String

String 在Java中String是作为引用对象存在的一种数据类型,用来保存字符串。 实例化和赋值 //直接声明 String s1 "Hello world!"; //通过构造函数创建, 提供了 11 种不同参数创建的方法 char[] c { h, e, l, l, o, .}; String s2 new String(c); Strin…

数据结构杂谈(一)

在你点进来这里的一瞬间,欢迎你找到了宝藏 这是一些关于数据结构和算法里最详细的阐述和学习心得,我十分乐意和你分享这些知识。 如果你已经看完这篇杂谈,可以前往下一篇→数据结构杂谈(二)_尘鱼好美的小屋-CSDN博客 1…

计算器排html页面,htmltest~计算器界面的实现

通过divcss和部分布局的作用,实现了,如下效果的计算器展示页面![C%]R$IGDK4J(%3LJXD3]SY.png,废话不多说,最主要的还是分享代码:html:Title.计算器-口 X编辑(E)查看(V)帮助(H)BackspaceCECMC789/sqrtMR456*…

git 常用方法

1.删除远程tag或者branchgit push origin --delete (tagName)/(brachName).例如:删除远程2.1branch:git push origin --delette 2.12.检出某次commit时的代码(通过commit index检出)git checkout commit的SHA1值例如:g…

win7 git 添加 ssh key

分两步走,借助git bash客户端:第一步:生成秘钥创建SSH key. 在用户主目录下, 看看有没有.ssh目录, 如果有, 再看看这个目录下有没有id_rsa 和 id_rsa.pub 这两个文件, 如果已经有了,…

解决三星手机EditText背景色的问题

问题描述android:background"#ffffff"其他手机手机背景都是白色,三星却是黑色的。怎么办 解决方案1写个主题测试下 解决方案2检查是三星的手机换背景色解决方案3你自己设置下edittext的背景就好了 解决方案4三星手机没这bug,你的固件不是正常的…

操作系统随笔(二)

如果你还没有读过第一篇随笔,请点击这里→操作系统随笔(一) 文章目录[toc]2 进程和线程2.1 进程2.1.1 进程模型2.1.2 进程的创建2.1.3 进程的终止2.1.4 进程的层次结构2.1.5 进程的状态2.1.6 进程的实现2.2 线程2.2.1 进程的使用2.2.2 经典的…

golang实现常用数据结构

2019独角兽企业重金招聘Python工程师标准>>> 1.数组栈的实现 package mainimport ( "fmt")type ItemType inttype Stack struct { node [10]ItemType maxsize int top int}func StackInit(p *Stack) { p.top -1}func StackCheckFull(p *Stack) bo…

html label修改字体颜色,Swift label文字显示不同颜色(字体)

根据 Stack Overflow 上的这篇文章 大概有三种方法:1. 先设置整个 text 为 NSMutableAttributedString, 再使用 Range 设置要改变颜色(字体)的文本var myString:NSString "I AM KIRIT MODI"var myMutableString NSMutableAttributedString()In ViewDidLoadoverride…

【问题解决】无法创建新的堆栈防护页面

【问题发现】 项目中需要几个自定义的控件,菜鸟D定义了一个接口,打算使用多态来统一调用。在完成两个自定义控件后,项目都能正常运行。但是在第三个控件使用的时候就出了问题:将控件拖到界面上以后,不能拖动改变控件的宽度,一拖动…

html里空间顺序,按空间顺序写我的房间作文

导语:人人的房间都是不一样的,因为每个人都有自己独特的性格和思想。下面是由小编整理的关于按空间顺序写我的房间作文。欢迎阅读!篇一:我的房间作文(按空间顺序)我的房间在客厅的东面,床的右侧是一面窗户,…

一分钟了解阿里云产品:RDS概述

下面我们来介绍下阿里云的云数据库(Relational Database Service,简称RDS)这款产品。一起来学习下吧。 那么,RDS是什么呢?简单来说,它是一种稳定可靠、可弹性伸缩的在线数据库服务。 RDS基于飞天分布式系统…

Python速忆笔记(更新中)

你好,如果你是第一次看我的笔记,欢迎您关注我,我喜欢持续分享更多有意思的干货。如果能够帮到您的话,希望你给我点个赞❤️ 文章目录1.1 快速回忆1.1.1 打印和注释1.1.1.1 打印1.1.1.2 注释1.1.2 字符串1.1.2.1 概述1.1.2.2 拼接1…

读书

博客注册有一段时间了,但是一直没开张。冒着虽然写东西也还是会长草的危险,我还是先贴几个字吧,一方面是好歹给自己一个开始,一方面也是有人想看。其实后者更重要,这个跟我们写代码很像,很多时候你关注一些…

java及python调用RabbitMQ

1,python调用MQ发送消息(生产者),话不多说,直接上干货 import pika 如下图 2.java调用MQ发送消息(生产者) 具体代码如下: python 的代码如下 connection pika.BlockingConnection(pika.ConnectionParameters(IP,端口,/))channel connection.channel()msg_props pika.Bas…

android模块化 osgi,蚂蚁金融级移动应用 osgi 模块化架构实践.pdf

蚂蚁金融级移动应用 osgi 模块化架构实践To p 1 0 0 C a s eS t u d i e s O f T h e Ye a r s-AndroidTo p 1 0 0 C a s eS t u d i e s O f T h e Ye a r s1“Application” App“Service”2BundleComponent3MultiDexTo p 1 0 0 C a s eS t u d i e s O f T h e Ye a r s-300…

MySQL速忆笔记(更新中)

本笔记不适合初学者观看,如果想细致了解数据库的初学者可以前往数据库杂谈全集深入了解。 数据库原理指路:数据库杂谈(一) 另外希望能看到这篇笔记的同志能点个赞,在内卷的时代分享知识不容易。 文章目录[toc]1 准备工…

svn上传报Authorization failed错误解决办法

svn上传文件时没有弹出用户登录界面,而是直接报Authorization failed错误。出现该问题基本都是三个配置文件的问题,下面把这个文件列出来 svnserve.conf配置文件中的 [general] anon-access read auth-access write password-db passwd authz-db aut…