当前位置: 首页 > news >正文

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>

相关文章:

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

dom对象和jQuery对象 dom对象 jQuery对象 在一个文件中同时存在两种对象 dom对象: 通过js中的document对象获取的对象 或者创建的对象 jQuery对象: 通过jQuery中的函数获取的对象。 为什么使用dom或jQuery对象呢&#xff1f; 目的是 要使用dom对象的函数或者属性 以及呢 要…...

Mysql 中如何导入数据?

文章目录 前言使用 LOAD DATA 导入数据使用 mysqlimport 导入数据mysqlimport的常用选项介绍后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正…...

深入了解前馈网络、CNN、RNN 和 Hugging Face 的 Transformer 技术!

一、说明 本篇在此对自然语言模型做一个简短总结&#xff0c;从CNN\RNN\变形金刚&#xff0c;和抱脸的变形金刚库说起。 二、基本前馈神经网络&#xff1a; 让我们分解一个基本的前馈神经网络&#xff0c;也称为多层感知器&#xff08;MLP&#xff09;。此代码示例将&#xff1…...

Flink Table API 读写MySQL

Flink Table API 读写 MySQL import org.apache.flink.connector.jdbc.table.JdbcConnectorOptions; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.DataTypes; import org.apache.flink.table.api.Envi…...

Nginx 开源版安装

下载 tar.gz安装包&#xff0c;上传。 解压 [rootlocalhost ~]# tar zxvf nginx-1.21.6.tar.gz nginx-1.21.6/ nginx-1.21.6/auto/ nginx-1.21.6/conf/ nginx-1.21.6/contrib/ nginx-1.21.6/src/ ... ...安装gcc [rootlocalhost nginx-1.21.6]# yum install -y gcc 已加载插件…...

『亚马逊云科技产品测评』活动征文|低成本搭建物联网服务器thingsboard

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 0. 环境 - ubuntu22&#xff08;注意4G内存勉强够&#xff0c;部署完…...

【Pytorch】Visualization of Feature Maps(3)

学习参考来自&#xff1a; Image Style Transform–关于图像风格迁移的介绍github&#xff1a;https://github.com/wmn7/ML_Practice/tree/master/2019_06_03 文章目录 风格迁移 风格迁移 风格迁移出处&#xff1a; 《A Neural Algorithm of Artistic Style》&#xff08;ar…...

人工智能对我们的生活影响

目录 前言 一、人工智能的领域 二、人工智能的应用 三、对人工智能的看法 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4…...

Mysql存储引擎分类

Mysql存储引擎分类&#xff1a; 在选择存储引擎时&#xff0c;应该根据应用系统的特点选择合适的存储引擎。对于复杂的应用系统&#xff0c;还可以根据实际情况选择多种存储引擎进行组合。 InnoDB: 是Mysql的默认存储引擎&#xff0c;支持事务、外键。如果应用对事务的完整性有…...

基于Python+TensorFlow+Django的交通标志识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 随着交通网络的不断扩展和智能交通系统的发展&#xff0c;交通标志的自动识别变得愈发重要。本项目旨在利用Python编…...

【Java 进阶篇】Jedis:让Java与Redis轻松对话的利器

在现代软件开发中&#xff0c;缓存系统是提高系统性能的常见手段之一&#xff0c;而Redis作为一个高性能的缓存数据库&#xff0c;被广泛应用于各类系统。如果你是Java开发者&#xff0c;那么使用Jedis库可以让你轻松地与Redis进行交互。本文将带你深入了解Jedis的快速入门&…...

【数据分享】我国12.5米分辨率的DEM地形数据(免费获取/地理坐标系)

DEM地形数据是我们在各种研究和设计中经常使用的数据&#xff01;之前我们分享过500米分辨率的DEM地形数据、90米分辨率的DEM地形数据、30米分辨率的DEM地形数据&#xff08;均可查看之前的文章获悉详情&#xff09;。 本次我们为大家带来的是分辨率为12.5m的DEM地形数据&#…...

C++设计模式之策略模式

策略模式 介绍示例示例测试运行结果应用场景优点总结 介绍 策略模式是一种行为设计模式。在策略模式中&#xff0c;可以创建一些独立的类来封装不同的算法&#xff0c;每一个类封装一个具体的算法&#xff0c;每一个封装算法的类叫做策略(Strategy)&#xff0c;为了保证这些策…...

spring-webflux的一些概念的理解

Spring5的webflux可以支持高吞吐量&#xff0c;使用相同的资源可以处理更加多的请求&#xff0c;它将会成为未来技术的趋势&#xff0c;但是相对于学习其他的框架相比&#xff0c;它的学习曲线很高&#xff0c;综合了很多现有的技术&#xff0c;即使按照教程学习能编写代码&…...

OpenCV快速入门:特征点检测与匹配

文章目录 前言一、角点检测1.1 角点特征1.1.1 角点特征概念1.1.2 角点的特点1.1.3 关键点绘制代码实现1.1.4 函数解析 1.2 Harris角点检测1.2.1 Harris角点检测原理1.2.2 Harris角点检测公式1.2.3 代码实现1.2.4 函数解析 1.3 Shi-Tomasi角点检测1.3.1 Shi-Tomasi角点检测原理1…...

旋转的数组

分享今天看到的一个题目&#xff0c;不同思路解法 题目 思路1&#xff1a;时间复杂度0(N*k&#xff09; void rotate(int *a,int N,int k)//N为数组元素个数 { while(k--) { int tema[N-1]; for(int rightN-2;right>0;right--) { a[right1]a[right]; } a[0]tem; …...

Hive VS Spark

spark是一个计算引擎&#xff0c;hive是一个存储框架。他们之间的关系就像发动机组与加油站之间的关系。 类似于spark的计算引擎还有很多&#xff0c;像mapreduce&#xff0c;flink等等。 类似于hive的存储框架也是数不胜数&#xff0c;比如pig。 最底层的存储往往都是使用h…...

SAST静态分析工具所支持的规则

综合国内外SAST工具支持的规则&#xff0c;这些规则包括了国际标准、国内标准、行业标准等&#xff0c;这里我罗列了一下&#xff0c;这些规则对应的标准集合。 评估一款SAST工具时&#xff0c;支持规则集的多少&#xff0c;且每个规则集是否为全集&#xff0c;或者接近全集&am…...

torch 的数据加载 Datasets DataLoaders

点赞收藏关注&#xff01; 如需要转载&#xff0c;请注明出处&#xff01; torch的模型加载有两种方式&#xff1a; Datasets & DataLoaders torch本身可以提供两数据加载函数&#xff1a; torch.utils.data.DataLoader&#xff08;&#xff09;和torch.utils.data.Datase…...

【Promise】某个异步方法执行结束后 在执行下面方法

使用Promise &#xff0c;当 layer.msg(查询成功) 这个方法执行结束后 &#xff0c;下面代码才会执行 let thas this async function showMessage() {await new Promise(resolve > layer.msg(查询成功, resolve));// 这里的代码将在 layer.msg 执行结束后执行thas.isGuaran…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...