jQuery_03 dom对象和jQuery对象的互相转换

dom对象和jQuery对象

dom对象    jQuery对象  在一个文件中同时存在两种对象

dom对象: 通过js中的document对象获取的对象 或者创建的对象

jQuery对象: 通过jQuery中的函数获取的对象。

为什么使用dom或jQuery对象呢?

目的是 要使用dom对象的函数或者属性 以及呢 要使用jQuery中提供的函数或者属性。要使用dom中的内容 就需要使用dom对象 要使用jQuery中的函数 就需要使用jQuery对象

dom对象 和 jQuery对象 可以相互转换

dom对象转换为jQuery对象

$(dom对象) 得到一个jQuery对象 可以调用jQuery中提供的函数

<body><input type="button" id="btn" value="我是按钮" onclick="btnClick()" />
</body><script type="text/javascript">// dom对象    jQuery对象  在一个文件中同时存在两种对象// dom对象: 通过js中的document对象获取的对象 或者创建的对象// jQuery对象: 通过jQuery中的函数获取的对象。//为什么要使用 dom对象 或者说 jQuery对象呢?//目的是 要使用dom对象的函数或者属性 以及呢 要使用jQuery中提供的函数或者属性。// 要使用dom中的内容 就需要使用dom对象 要使用jQuery中的函数 就需要使用jQuery对象// dom对象 和 jQuery对象 可以相互转换/* 1.dom对象转换为jquery对象$(dom对象) 得到一个jQuery对象 可以调用jQuery中提供的函数*/// var dom = document.getElementById("t1");// //把dom 转换为jQuery// var jqueryobj = $(dom);// //调用jQuery中的函数 .......// jqueryobj.val() //获取dom对象的值// 提示: 为了区分dom对象和jQuery对象 一般情况下 jQuery对象的变量名前面都会加上$符号 例如$objfunction btnClick() {var obj = document.getElementById("btn");//转成jQuery对象var $jobj = $(obj); //$jobj就是jQuery对象alert($jobj.val()); // 获取按钮的值}</script>

jQuery对象转换为dom对象

 语法:jQuery对象是一个数组 数组成员是dom对象  使用[下标] 或者 get(下标) 获取dom对象

  <body><!-- <input type="text" id="t1" /> --><!-- <input type="text" id="txt1" /> --><input type="button" id="btn" value="计算平方" onclick="btnClick()" /><br /><input type="text" id="txt1" value="请输入整数" /></body>
 <script type="text/javascript">/* 语法:jQuery对象是一个数组 数组成员是dom对象  使用[下标] 或者 get(下标) 获取dom对象*///  $("#txt1"):获取id为txt1的对象/*     var obj = $("#txt1"); // obj是一个jQuery对象 是一个包含了一个成员的dom数组。 obj[0] 就是dom对象var dom = obj[0]; //dom对象  或者 obj.get(0) 也是dom对象// 使用dom对象的函数 或者 属性alert(dom.value); */function btnClick() {// var obj = $("#txt1"); //obj 是jquery对象var dom = obj.get(0);// var dom = obj[0];var num = dom.value;dom.value = num * num;alert(dom.value);}</script>

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

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

相关文章

MindStudio学习一 整体介绍

一场景介绍 二 安装介绍 1.LINUX 采用无昇腾硬件采用linux 分部署 2.WINDOWS 3.linux下安装整体步骤 3.1安装依赖 3.2 安装步骤 1.gcc cmake 等依赖 2.python3.7.5 3.pip 安装依赖 4.安装JDK 5.安装 Ascend-cann-toolkit 6.解压安装Mindstudio 7.进入bin路径 ./…

redis之cluster集群

1、redis-cluster集群&#xff1a;redis3.0引入的分布式存储方案 2、集群&#xff1a;由多个node节点组成&#xff0c;redis数据分布在这些节点之中 &#xff08;1&#xff09;在集群之中也分主节点和从节点 &#xff08;2&#xff09;自带哨兵模式 3、redis-cluster集群的…

【Tiny_CD】Tiny_CD变化检测网络详解(含python代码)

题目:TinyCD: A (Not So) Deep Learning Model For Change Detection 论文:paper 代码:code 目录 🍟 🍟1.摘要 🍗🍗 2.贡献 🍖🍖 3.网络结构

【文末送书】机器学习高级实践

2023年初是人工智能爆发的里程碑式的重要阶段&#xff0c;以OpenAI研发的GPT为代表的大模型大行其道&#xff0c;NLP领域的ChatGPT模型火爆一时&#xff0c;引发了全民热议。而最新更新的GPT-4更是实现了大型多模态模型的飞跃式提升&#xff0c;它能够同时接受图像和文本的输入…

探究Kafka原理-3.生产者消费者API原理解析

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44…

【模拟开关CH440R】2022-1-20

资料模拟开关CH440芯片手册 - 百度文库 ch440R回来了&#xff0c;导通usb设备没问题&#xff0c;降压不影响。但是我发现个严重的问题&#xff0c;我的电路是直接通过4067控制ch440r接地&#xff0c;低电平&#xff0c;使能三个线路连一起的&#xff0c;邮箱的图您看看&#xf…

Linux:Ubuntu实现远程登陆

1、查看sshd服务是否存在 Ubuntu默认是没有安装sshd服务的&#xff0c;所以&#xff0c;无法远程登陆。 检查22端口是否存在 netstat -anp 该命令执行后&#xff0c;查看不到22端口的进程。 如果netstat无法使用&#xff0c;我们需要安装一下netstat服务 sudo apt-get install…

拦截器详解

一、概述 什么是拦截器&#xff1f; 是一种动态拦截方法调用的机制&#xff0c;类似于过滤器。Spring框架中提供的&#xff0c;用来动态拦截控制方法的执行。 到底是干啥用的&#xff1f; 拦截请求用的&#xff0c;在指定的方法调用前后&#xff0c;执行在拦截器中编写的程序 …

手机APP-MCP走蓝牙无线遥控智能安全帽~执法记录仪~拍照录像,并可做基础的配置,例如修改服务器IP以及配置WiFi等

手机APP-MCP走蓝牙无线遥控智能安全帽~执法记录仪~拍照录像,并可做基础的配置,例如修改服务器IP以及配置WiFi等 手机APP-MCP走蓝牙无线遥控智能安全帽~执法记录仪~拍照录像,并可做基础的配置,例如修改服务器IP以及配置WiFi等&#xff0c; AIoT万物智联&#xff0c;智能安全帽…

甲烷产生及氧化

温室气体排放被认为是加速气候变化的重要因素&#xff0c;甲烷(CH4)是仅次于二氧化碳(CO2)的重要温室气体&#xff0c;其百年温室效应潜势是CO2的28倍[1-2]。湿地中的CH4由产甲烷古菌在水体底部或沉积层严格厌氧环境下产生并释放进入水体&#xff0c;产生的CH4向上覆水运输过程…

【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏1(附项目源码)

文章目录 先看看最终效果前言随机游走算法使用随机游走算法添加地板瓦片1. 新增TilemapVisualizer&#xff0c;用于可视化地图2. 瓦片素材 不运行执行程序化生成地牢方法1. 先简单重构代码2. 新增Editor脚本RandomDungeonGeneratorEditor 将参数保存到可编辑脚本对象&#xff0…

1、postman的安装及使用

一、安装、登录 1.安装 下载地址 2.注册登录&#xff08;保存云服务进度&#xff09; 二、界面介绍 三、执行接口测试页面 请求页签&#xff1a; 1、params&#xff1a;当是get请求时&#xff0c;通过params传参 2、authorization&#xff1a;鉴权 3、headers&#xff1…