jQuery Object 和 HTML Element间的转换

最新推荐文章于 2021-12-03 15:47:24 发布
最新推荐文章于 2021-12-03 15:47:24 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayyy/article/details/113483837
版权

前言

  • jQuery v3.5.1

jQuery Object

jQuery 的选择器的返回结果是 Object ：

$("#form1") /* 返回 Object */

jQuery Object 转 HTML Element

$("#form1")[0] /* 返回 HTML Element */

HTML Element 转 jQuery Object

$($("#form1")[0]) /* 返回 Object */

$(document.querySelector("#form1")) /* 返回 Object */

示例

<html>
<header>
<script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  console.log($("#form1").length); /* 1 表示找到元素 */
  console.log(Object.prototype.toString.call($("#form1")));

  console.log($("#form1")[0]); /* html 表示找到元素 */
  console.log(Object.prototype.toString.call($("#form1")[0]));

  console.log($($("#form1")[0]).length); /* 1 表示找到元素 */
  console.log(Object.prototype.toString.call($($("#form1")[0])));

  console.log(document.querySelector("#form1")); /* html 表示找到元素 */
  console.log(Object.prototype.toString.call(document.querySelector("#form1")));

  console.log($(document.querySelector("#form1")).length); /* 1 表示找到元素 */
  console.log(Object.prototype.toString.call($(document.querySelector("#form1"))));
});
</script>
</header>

<body>
  <form id="form1" action="#">
  	<span>姓名：</span><input type="text" name="name" value="张三" /><br/>
	<span>邮箱：</span><input type="text" name="email" value="1@1.com" /><br/>
	<input type="submit" />
	<input type="button" value="重置" />
  </form>
</body>
</html>

输出：
在这里插入图片描述

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
https://blog.csdn.net/dongdong9223/article/details/52875537

sayyy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将HTML格式的String转化为HTMLElement的实现方法
09-04
本节主要介绍了将HTML格式的String转化为HTMLElement的实现方法,需要的朋友可以参考下
关于网页显示[object HTML标签名Element]的问题
qq_44960253的博客
06-21 3572
关于网页显示[object HTML标签名Element]的问题 今天学习在 JS红宝书上的 10.1.8 节关于 DocumentFragment 类型时，按照实例，大致上敲了一遍代码想要看看效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
HTMLELEMENT对象
iteye_13425的博客
05-23 118
今天遇到一个问题，想模拟鼠标悬浮li上出现链接，划出li隐藏链接： 在使用时，借助this来获得当时悬浮的li，并对li操作属性，但是this是HTMLELEMENT对象，不是jquery对象，要想使用jquery对象的方法，需要使用$(this)转换成jquery对象   $(document).ready(function(){ $("li").hover(           ...
使用jquery时弹出[object HTMLImageElement]问题
weixin_34323858的博客
09-02 1016
本打算写一个轮播图，但是获取到图像后想改变图片地址，却jq方法各种不能实现，开始以为是jq文件弄错了，用百度的cdn试了下还是报错。 于是开始了alert调试。 我是用的jquery获取类 var a=$('.wrap img')[0]; alert(a); //弹出[object HTMLImageElement]，此对象为...
jQuery新建HTML Element
weixin_30709809的博客
12-28 90
举个例： 创建一个<i>HelloWorld.</i> var italicText = $("<i></i>").text("HelloWorld."); 创建一个<b>HelloWorld.</b> var boldText = $("<i></i>").text("HelloW...
关于jQuery object and DOM element
12-12
 想取得span element 里面的文本， 发现$(“#test1 span”)[0]取出来的不是jQuery object, 只能用$($(“#test1 span”)[0]).text()转为jQuery再取了，但是两个$一起总感觉怪怪的，退而求其次便用了取值$(“#test1 ...
jquery和HTML css javascript.rar
05-28
jquery和HTML css javascript.rar
html jQuery异步访问数据、界面元件应用element ui的驾考题目
07-14
有“浏览”模式和“测试”模式。 浏览模式下面，可以通过上一题、下一题按钮查看题目（含题干、答案选项、参考答案、答案解析、章节），也可以 输入题号，按回车直接跳转到该题号。 测试模式下，每道题只显示题干、...
JQuery解析HTML、JSON和XML实例详解
10-26
JQuery具有强大的解析数据的能力，本文详细介绍HTML、JSON和XML格式的文件的数据如何解析
关于js返回[object HTMLInputElement]问题的解决
weixin_42321619的博客
08-18 1万+
看了多篇文章，除去那些自己不小心，没加value啥的。自己总结一下。 <body> 姓名：<input type="text" id="name" /> 年龄：<input type="text" id="age"/> <input type="button" value="提交" id="but" /> <script> var name = document.getElementById('name') var
【JQuery】DOM对象和JQuery对象的互相转换
Need not to know
12-14 223
DOM对象和JQuery对象的互相转换 DOM对象转换为JQuery对象 var domObject = document.getElementById("msg"); / DOM对象 var jqueryObject = $(domObject); / JQuery对象 JQuery对象转换为DOM对象 var jqueryObject = $("#msg"); / JQuery对象 var jqueryObject = jqueryObject[0]; / DOM对象
jQuery Object 和 Html Element之间的互换
只在朝暮间的博客
06-14 2046
代码如下:var elm = document.createElement("div"); var jelm = $(elm);//convert to jQuery Element var htmlElm = jelm[0];//convert to HTML Element
笔记jQuery Object 和 Html Element之间的互换
tedeum
01-15 138
代码一看就懂，如下： var elm = document.createElement("div"); var jelm = $(elm);//convert to jQuery Element var htmlElm = jelm[0];//convert to HTML Element  
javascript foreach中获取数组下标/index
热门推荐
sayyy的专栏
09-10 4万+
前言 360极速浏览器： 12.0.1476.0 (正式版本) （32 位） 修订版本： 47c49e5a5935cfffa348dcfa6c581f4394327ac8 操作系统： Windows 10 OS Version 2004 (Build 19041.450) JavaScript ：V8 7.8.279.23 注：使用命令 chrome://version/ 查看 JavaScript 版本 forEach语法 array.forEach(function(currentValue, in
Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy: Cross origin requests
sayyy的专栏
08-23 3万+
前言 本地调试js时，遇到本错误 Google Chrome 84.0.4147.135 (正式版本) （64 位） (cohort: Stable Installs Only) 修订版本 c42bd09b3f24da1698d71d3b4f57402137163566-refs/branch-heads/4147@{#1102} 操作系统 Windows 10 OS Version 2004 (Build 19041.450) JavaScript V8 8.4.371.23 注：使用命令 chrome
正则表达式：密码中至少包含大写字母、小写字母、数字、特殊字符等字符中的2种或3种
sayyy的专栏
12-03 2万+
目录前言先行断言是否有那么一个开始符号，它后面的字符种包含小写字母（a-z）正向否定查找是否有那么一个开始符号，它后面不全是小写字母（a-z）密码中只包含字母且长度在8-16之间密码中同时含字母和数字且长度在8-16之间密码中同时含大写字母、小写字母、数字和特殊字符且长度在8-16之间密码中允许出现数字、大写字母、小写字母，但至少包含其中2种且长度在8-16之间（三种符号任取其二）密码中允许出现数字、大写字母、小写字母、特殊字符（!#$%^&*），但至少包含其中2种且长度在8-16之间（四种符号任取
【jquery】select下拉框赋值
sayyy的专栏
01-14 1万+
前言 jquery操作select下拉框 select &lt;select id="type" name="type"&gt; &lt;option value=""&gt;请选择&lt;/option&gt; &lt;option value="1"&gt;流行歌曲&lt;/option&gt; &lt;option value
javascript 函数 有任意多个参数/可变参数/动态参数
sayyy的专栏
08-23 8556
前言 360极速浏览器： 12.0.1476.0 (正式版本) （32 位） 修订版本： 47c49e5a5935cfffa348dcfa6c581f4394327ac8 操作系统： Windows 10 OS Version 2004 (Build 19041.450) JavaScript ：V8 7.8.279.23 注：使用命令 chrome://version/ 查看 JavaScript 版本 Arguments 对象 arguments 是一个对应于传递给函数的参数的类数组对象。 参
jQuery 判断元素是否存在
sayyy的专栏
01-31 7994
前言 jQuery v3.5.1 jQuery 查找元素 比如查找某个input元素$("input[name='email']")。 示例： <html> <header> <script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https:
jquery object动态添加属性
最新发布
06-06
可以使用 `.attr()` 方法来动态添加属性，例如： ```javascript // 获取一个 jQuery 对象 var $element = $('#my-element'); // 动态添加属性 $element.attr('data-custom-attribute', 'value'); ``` 这会在元素上添加一个名为 `data-custom-attribute` 的自定义属性，并将其值设置为 `'value'`。注意，在使用自定义属性时需要添加 `data-` 前缀。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值