【Jquery系列】详解Jquery对象和Dom对象
问题描述
本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍:
- Jquery对象和dom对象定义
- Jquery对象与dom对象区别
- Jquery对象及运用举例
- dom对象及运用举例
- Jquery对象与dom对象相互转换
1 内容区
1.1 Jquery对象和dom对象定义
jQuery对象:Jquery对象,通过jq选择器获取的对象;
dom对象:javascript对象,即通过js获取的对象;
1.2 Jquery对象与dom对象区别
jquery对象指通过jquery选择器获取的对象,格式:$(selector);
dom对象指通过原声js获取对象,如document.getElementById();
1.3 Jquery对象及运用举例
var $obj = $("#id"); //jQuery对象
1.4 dom对象及运用举例
var DomObj = document.getElementById("id"); //dom对象
1.5 Jquery对象与dom对象相互转换
由于jq对象只能调用jq封装的方法,dom对象只能调用dom封装的方法,若想要jq对象和dom对象相互调用彼此封装的方法,首先必须将对象转化为要调用方法的对象,再调用,如dom对象想要调用jq方法.html(),则dom对象必须先转化为jq对象,再调用,否则出错(jq调用dom也是一样原理);
1.5.1 jquery对象转化为dom对象
jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。
var JqObj=$("#id"); //jquery对象
var DomObj = JqObj[0]; //dom对象 //也可写成如下
var DomObj=JqObj.get(0);
alert(DomObj.checked); //是否选中checkbox
1.5.2 dom对象转换成jquery对象
对于dom对象,用$()把dom对象包裹起来即可,格式为:$(dom对象);
var DomObj=document.getElementById("ElementID"); //dom对象
var JqObj = $(DomObj); //转换成jquery对象
2 版权区
- 感谢您的阅读,若有不足之处,欢迎指教,共同学习、共同进步。
- 博主网址:http://www.cnblogs.com/wangjiming/。
- 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的,大部分为原创。
- 如您喜欢,麻烦推荐一下;如您有新想法,欢迎提出,邮箱:2016177728@qq.com。
- 可以转载该博客,但必须著名博客来源。
1.5.2 dom对象转换成jquery对象
对于dom对象,用$()把dom对象包裹起来即可,格式为:$(dom对象);
【Jquery系列】详解Jquery对象和Dom对象的更多相关文章
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jquery对象和DOM对象的相互转换详解
jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = ...
- jQuery对象数据缓存Cache原理及jQuery.data详解
网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几 ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- jQuery.validator 详解
jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- $.ajax()方法详解 jquery
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery对象与DOM对象之间的转换(转)
原文:https://www.cnblogs.com/lsy0403/p/5907084.html 什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用 ...
随机推荐
- JSON【介绍、语法、解析JSON】
什么是JSON JSON:JavaScript Object Notation [JavaScript 对象表示法] JSON 是存储和交换文本信息的语法.类似 XML. JSON采用完全独立于任何程 ...
- Oracle中如何插入特殊字符:& 和 ' (多种解决方案)-转载
文章出处:http://blog.sina.com.cn/s/blog_5f39af320101gb3f.html 今天在导入一批数据到Oracle时,碰到了一个问题:Toad提示要给一个自定义变量A ...
- Activiti-01
1, Activiti官网:http://www.activiti.org/ 主页可以看到jar包的下载. 2, 进入http://www.activiti.org/userguide/index. ...
- 02-windows 安装以太坊 ethereum 客户端 (win7-64)-大叔思维
以太坊(Ethereum)是一个运行智能合约的去中心化平台(Platform for Smart Contract),平台上的应用按程序设定运行,不存在停机.审查.欺诈.第三方人为干预的可能.以太坊平 ...
- 关于Class对象、类加载机制、虚拟机运行时的内存布局的全面解析和推测
简介: 本文是对Java的类加载机制,Class对象,反射原理等相关概念的理解.验证和Java虚拟机中内存布局的一些推测.本文重点讲述了如何理解Class对象以及Class对象的作用. 欢迎探讨,如有 ...
- ZOJ 2002 Copying Books 二分 贪心
传送门:Zoj2002 题目大意:从左到右把一排数字k分,得到最小化最大份,如果有多组解,左边的尽量小. 思路:贪心+二分(参考青蛙过河). 方向:从右向左. 注意:有可能最小化时不够k分.如 ...
- Java web AJAX入门
一:AJAX简介 AJAX :Asynchronous JavaScript And XML 指异步 JavaScript 及 XML 一种日渐流行的Web编程方式 Better Faster Use ...
- bootstrap 响应式导航条模板(含下拉菜单,弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WebApi接口返回json,xml,text纯文本等
[Route("api/Message/MessageList/")] [HttpGet] public HttpResponseMessage MessageList() { R ...
- Jquery实现鼠标移到某个对象,弹出显示层。
/** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $(& ...