原生js和jQuery的区别

1. 原生JavaScript是一种基于ECMAScript规范的编程语言,而jQuery是基于JavaScript的一个库,它提供了一种更简洁、易用的语法来操作HTML文档、处理事件、执行动画等。

2. 原生JavaScript没有依赖任何外部库,而jQuery依赖于jQuery库。这意味着使用jQuery需要先引入jQuery库。

3. 原生JavaScript的代码通常比jQuery代码更冗长,因为它需要手动编写DOM操作、事件处理等功能。而jQuery代码则可以简化这些操作,使代码更简洁、易读。

4. 原生JavaScript的事件处理方式较为繁琐,需要为每个元素分别绑定事件处理函数。而jQuery提供了一种更简洁的方式来绑定事件处理函数,例如使用`.on()`方法。

5. jQuery提供了许多内置的动画效果,如淡入淡出、滑动等,而原生JavaScript则需要自己实现这些效果。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02-jQuery的核心函数和核心对象.html</title><!-- 1.jQuery核心函数简称:jQuery函数($/jQuery)引入jQuery库以后,直接使用$/jQuery即可当函数用:$(params)当对象用的时候:$.each()2.jQuery核心对象简称:jQuery对象 $()得到jQuery对象:执行jQuery函数返回的就是jQuery对象使用jQuery对象:$obj.xxx()--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="../../jquery-3.5.1/jquery-3.5.1.js"></script><script>$(function () {// jQuery核心函数console.log($, typeof $);// jQuery核心对象console.log($(), $() instanceof Object);})</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03-比较原生js和jQuery.html</title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;border: 1px solid black;}</style><!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 --><!-- 导入cdn --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="../../jquery-3.5.1/jquery-3.5.1.js"></script><script>// JS原生DOMwindow.onload = function () {// 1.利用原生JS来查找DOM元素var div1 = document.getElementsByTagName('div')[0]var div2 = document.getElementsByClassName('box1')[0]var div3 = document.getElementById('box2')// console.log(div1);// console.log(div2);// console.log(div3);// 2.利用原生JS修改背景颜色// div1.style.backgroundColor = 'red'// div2.style.backgroundColor = 'yellow'// div3.style.backgroundColor = 'blue'}// jQuery$(document).ready(function () {// 1.通过jQuery来查找元素var $div1 = $('div:first')var $div2 = $('.box1')var $div3 = $('#box2')// console.log($div1);// console.log($div2);// console.log($div3);// 2.利用jQuery来修改背景颜色$div1.css({backgroundColor: 'red'})$div2.css({backgroundColor: 'yellow',width: '200px',height: '200px'})$div3.css({backgroundColor: 'blue'})})</script>
</head>
<body><div></div><div class="box1"></div><div id="box2"></div>
</body>
</html>

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

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

相关文章

【RTP】4: 实例解析:一个SRTP的wireshark抓包:带padding、带扩展

抓取的是视频包。固定的pt是127从头部找到序号,快速找到这个包包大小因为是包括了SRTP的,所以318 个字节,实际RTP包是286个字节。SRTP 包 UDP总共 294个字节,payload部分286 RTP协议 RTP部分: B0 代表有padding、有扩展 从B0开始

Kylin操作系统安装mysql8,Neginx相关问题记录

文章目录 一、Linux常见命令记录1. 为普通用户赋sudo权限2. Kylin系统yum配置以及使用2.1 Kylin操作系统yum源配置(本地yum源)2.1.1 .repo类型文件存在2.1.2 .repo类型文件不存在2.1.3 挂载OS镜像文件2.1.4 编辑local.repo文件&#xff0c;创建yum源地址2.1.5使yum源生效 2.2 y…

Android 如何让路由器或者其他AP设备获取到主机名

问题原因: 连接到AP设备后,发现主机名在路由器或者其他AP设备都无法正常显示 抓取tcpdump log发现DHCP request option中没有携带host name(Option 12)字段 如下图所示 修改方法: 将config_dhcp_client_hostname配置true后,可以看到host name了 具体代码逻辑如下 pack…

Linux网络——数据链路层

目录 一.认识以太网 二.以太网帧格式 三.认识MAC地址 四.认识MTU 五.以太局域网的通信原理 六.其他重要协议 1.DNS协议 2.域名简介 3.ICMP协议 4.NAT技术 5.NAT技术的缺陷 6.NAT和代理服务器 一.认识以太网 "以太网" 不是一种具体的网络, 而是一种技术标…

浅谈基于EIoT能源物联网的工厂智能照明系统应用改造

【摘要】&#xff1a;随着物联网技术的发展&#xff0c;许多场所针对照明合理应用物联网照明系统&#xff0c;照明作为工厂的重要能耗之一&#xff0c;工厂的照明智能化控制&#xff0c;如何优化控制、提高能源的利用率&#xff0c;达到节约能源的目的。将互联网的技术应用到工…

【C语言】Debian10使用zlib库crc32()函数

crc32函数原型 uint32_t crc32(uint32_t crc, const Bytef *buf, uInt len); 参数说明 crc&#xff1a;初始的CRC值或者之前计算得到的CRC值。在初次调用时&#xff0c;通常使用0xFFFFFFFF作为初始值。buf&#xff1a;指向数据缓冲区的指针&#xff0c;包含需要计算CRC的数据…

Python字典合并

合并两个有部分key相同的字典&#xff0c;相同key保留两个字典中对应key的较大值。 (笔记模板由python脚本于2023年11月27日 18:12:15创建&#xff0c;本篇笔记适合熟悉Python字典的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Fr…

笔记十九*、选中高亮和嵌套路由使用

19.1 选中高亮 NavLink App.jsx import React from "react"; import {NavLink, useRoutes} from "react-router-dom"; import routes from "./routes/index.jsx"; import "./app.css"const App () > {const element useRoutes(…

Kotlin(十二) 定义静态方法

静态方法在某些编程语言里面又叫作类方法&#xff0c;指的就是那种不需要创建实例就能调用的方法&#xff0c;所有主流的编程语言都会支持静态方法这个特性。 在Java中定义一个静态方法非常简单&#xff0c;只需要在方法上声明一个static关键字就可以了&#xff0c;如下所示&a…

SQL注入-HTTP头注入

目录 HTTP Header概述 HTTP Header注入 HTTP Header注入概述 HTTP Header注入实例 HTTP Header概述 HTTP工作原理 HTTP请求方法 HTTP报文类型 请求报文&#xff08;HTTP Request&#xff09;&#xff1a;由客户端发给服务器的消息&#xff0c;其组成包括请求行&#xff08;R…

系统与软件安全研究(九)

A Taxonomy of C Decompiler Fidelity Issues Usenix security 2024 Carnegie Mellon University Intro 反编译是分析编译程序并恢复表现相同行为的源代码程序的过程,是计算机安全领域中的关键工具。它使安全从业者能够更快速地深入了解编译程序的行为,尤其在分析恶意软件和…

我用C语言实现的文字跑马灯,简直是程序员的表白神器!

系列文章 Python百宝箱 C语言百宝箱 目录 系列文章 写在前面 C语言简介 EasyX简介 EasyX下载安装 文字跑马灯 写在后面 写在前面 教你用C语言实现文字跑马灯效果&#xff0c;简直是C语言表白神器&#xff01; 环境&#xff1a;C语言/C 软件&#xff1a;Visual Studi…

中科大蒋彬课题组开发 FIREANN,分析原子对外界场的响应

内容一览&#xff1a; 使用传统方法分析化学系统与外场的相互作用&#xff0c;具有效率低、成本高等劣势。中国科学技术大学的蒋彬课题组&#xff0c;在原子环境的描述中引入了场相关特征&#xff0c;开发了 FIREANN&#xff0c;借助机器学习对系统的场相关性进行了很好的描述。…

js执行异常处理 箭头函数 正则表达式

JS代码执行过程中&#xff0c;可能会出现异常 try-catch-finally try块包含可能抛出异常的代码&#xff0c;catch块包含处理异常的代码。finally 块始终执行&#xff0c;无论是否抛出异常。 try代码块出现异常 执行catch代码块 finally不管try代码有无异常 都会执行fina…

NX二次开发UF_CURVE_convert_conic_to_gen 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_convert_conic_to_gen Defined in: uf_curve.h int UF_CURVE_convert_conic_to_gen(UF_CURVE_conic_p_t conic_data, UF_CURVE_genconic_t * gen_conic_data ) overview 概…

给定序列a,选k个数排成一排,从左往右扫,如果当前数小于上一个数,那么当前数变成上一个数,然后形成最后的序列,问形成的序列有多少种

题目 #include<bits/stdc.h> using namespace std; #define int long long const int maxn 3005, mod 1e9 7; int a[maxn], b[maxn], cnt_low[maxn];//cnt_low[i]表示小于i的数字个数 int sum[maxn][maxn];//前缀和 int f[maxn][maxn];//f[i][j]表示选了i个数&#x…

第二十章——多线程

Windows操作系统是多任务操作系统&#xff0c;它以进程为单位。一个进程是一个包含有自身地址的程序&#xff0c;每个独立执行的程序都称为进程。也就是说每个正在执行的程序都是一个进程。系统可以分配给每一个进程有一段有限的使用CPU的时间&#xff08;也可以称为CPU时间片&…

中非市场开发攻略,走进非洲唯一废除死刑的国家

中非共和国是位于非洲中部的一个国家&#xff0c;是世界最不发达国家之一&#xff0c;经济以农业为主&#xff0c;工业基础薄弱&#xff0c;80%以上的工业品靠进口&#xff0c;中国是其重要的贸易伙伴之一。今天就来跟大家聊聊中非市场的开发攻略。文章略长&#xff0c;大家点赞…

2311d,d运行时勾挂

原文 上周,我开始转换_d_arrayliteralTX为模板.勾挂有点类似_d_newarrayT,因为用它来分配数组字面,如[1,2,3]. 注意,与也会初化新创建数组的_d_newarrayT不同,_d_arrayliteralTX只是为它分配内存.来限制传递给勾挂的参数数. 如果它也要初化数组,它必须按额外变参接收内容.我坚持…

E云管家微信群聊机器人开发

请求URL&#xff1a; http://域名地址/modifyGroupRemark 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识chatRo…