首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
firefox
css3
checkbox
微信开发
js
vue.js
textview
iframe
icons
requirejs
hover
dom
build
cookies
html5
overflow
正则
hybrid
layout
focus
chart.js
firebug
scheme
jq
vue
charts
jquery
base64
chrome
webkit
scroll
react
postman
node.js
html
v8
label
bootstrap
chart
ajax
npm
dialog
上传
view
svg
yarn
json
listview
javascript
console
css
当前位置:
开发笔记
>
前端
> 正文
jQuery对象与DOM对象之间的转换方法
作者:南航爱心社 | 来源:互联网 | 2022-01-18 02:45
刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。
什么是jQuery对象?
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是
jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。
既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
下面是其它的相关使用方法:
1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。
如:$(document.getElementById("msg"))
返回的就是jQuery对象,可以使用jQuery的方法。
2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]
这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
jquery
html
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
jquery
深入理解Vue.js:从入门到精通
本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ...
[详细]
蜡笔小新 2024-12-22 11:07:54
webkit
一个登陆界面
预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ...
[详细]
蜡笔小新 2024-12-20 09:57:07
jquery
计算指定月份的起始日与结束日
本文提供了多种方法来计算给定年份和月份的起始日和结束日,并进一步探讨了如何根据年、月、周获取特定周的起始日和结束日。 ...
[详细]
蜡笔小新 2024-12-19 20:17:53
jquery
2019年前端技术趋势及职业发展路径
本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ...
[详细]
蜡笔小新 2024-12-19 10:19:35
jquery
交互式左右滑动导航菜单设计
本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ...
[详细]
蜡笔小新 2024-12-18 17:56:15
jquery
JavaScript前端开发中常用的四种继承方法详解
本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ...
[详细]
蜡笔小新 2024-12-18 11:08:28
jquery
ThinkPHP6多数据库部署指南
本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ...
[详细]
蜡笔小新 2024-12-17 18:59:28
jquery
实现元素随滚动条移动的效果
本文介绍了如何使用JavaScript和jQuery实现页面元素随着滚动条的移动而相应变化位置的功能,提供了一段简洁的代码示例。 ...
[详细]
蜡笔小新 2024-12-17 11:28:52
jquery
深入分析十大PHP开发框架
随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ...
[详细]
蜡笔小新 2024-12-17 11:15:55
jquery
Java远程教学系统毕业设计:源代码、MySQL数据库及文档
本文介绍了Java语言开发的远程教学系统,包括源代码、MySQL数据库配置以及相关文档,适用于计算机专业的毕业设计。系统支持远程调试,采用B/S架构,适合现代教育需求。 ...
[详细]
蜡笔小新 2024-12-17 05:12:29
jquery
Web前端性能提升指南:简化JavaScript与消除重复脚本
本文为Web前端性能优化系列的第七篇,重点探讨简化JavaScript代码及清除重复脚本的方法。通过这些技术,可以显著提高网页加载速度和用户体验。了解更多信息,请参阅我们的完整指南:Web前端性能优化。 ...
[详细]
蜡笔小新 2024-12-16 15:54:29
jquery
jQuery Mobile 安全漏洞可能导致XSS攻击
近期,谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击(XSS)的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ...
[详细]
蜡笔小新 2024-12-15 12:43:59
jquery
jQuery中 $(selector).each() 和 $.each() 的区别与应用
在JavaScript开发中,jQuery库提供了两种遍历方法:$(selector).each() 和 $.each()。本文将详细探讨这两种方法的不同之处及其应用场景。 ...
[详细]
蜡笔小新 2024-12-15 10:02:02
chrome
如何清除Chrome浏览器地址栏的特定历史记录
在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ...
[详细]
蜡笔小新 2024-12-22 17:14:01
chrome
2018-2019学年第六周《Java数据结构与算法》学习总结
本文总结了2018-2019学年第六周在《Java数据结构与算法》课程中的学习内容,重点介绍了非线性数据结构——树的相关知识及其应用。 ...
[详细]
蜡笔小新 2024-12-22 16:43:19
南航爱心社
这个家伙很懒,什么也没留下!
Tags | 热门标签
firefox
css3
checkbox
微信开发
js
vue.js
textview
iframe
icons
requirejs
hover
dom
build
cookies
html5
overflow
正则
hybrid
layout
focus
chart.js
firebug
scheme
jq
vue
charts
jquery
base64
chrome
webkit
RankList | 热门文章
1
我的AS学习之路(Intent)
2
我厂篮球打得最好的男同学,昨天回老家做了件小事
3
win10 java更新失败_win10系统配置java环境及遇到问题的一些处理方法
4
《水调歌头》翻译 原文赏析诗人清蒋士铨
5
开发笔记:LInux 下PHP环境配置 Redis 总结
6
Java面向对象之开闭原则
7
php怎么使用艾特
8
codeforces3
9
怎么添加打印机到电脑上?
10
二维码跳转公众号,小程序的流程和方式总结。
11
poj2115--C Looooops--扩展欧几里得
12
CentOs 7.3中搭建RabbitMQ 3.6单机多实例服务的步骤与使用
13
sublineText
14
assistor ps汉化教程
15
python神经网络书籍_九本不容错过的深度学习和神经网络书籍
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有