2024年了，为何有些资深开发者仍钟爱JQuery？

转载说明：原创不易，未经授权，谢绝任何形式的转载

大家好，我最近阅读了一篇国外大佬关于继续使用JQuery的文章，感觉收获颇丰。在这个追求新技术的时代，了解为何JQuery仍受青睐，对我们来说非常有价值。下面，我将基于这位大佬的观点，为大家深入解析JQuery的独特魅力。

首先，我们要明白，JQuery仍然是基于JavaScript的一个库。它的出现，本质是为了简化JavaScript的开发过程。随着时间的推移，JQuery经历了多次迭代，不仅增强了原有的JS功能，还添加了许多现代化的特性。更重要的是，作为一个开源工具，JQuery可以免费使用，这大大降低了开发成本。

值得一提的是，JQuery最新版本3.7.1已于2023年8月28日发布。这一重要更新不仅证明了JQuery作为一个项目的活跃和持续维护，同时也显示了它在技术市场中仍然占有一席之地。这一版本解决了之前版本中的一些问题，例如在Chrome和Safari浏览器中对<tr />元素尺寸计算的修正，以及重新暴露了在移除Sizzle过程中不小心删除的jQuery.find.tokenize方法。这些改进和修复展示了JQuery团队对于提供稳定、可靠工具的承诺，以及对于社区反馈的积极响应。

  • 简化开发：JQuery使得事件处理、HTML文档遍历、Ajax交互等变得简单快捷，有效减少了开发时间。
  • 易于上手：相较于ReactJS等现代框架，JQuery的学习曲线更平缓，更适合初学者或是非专业的前端开发者。
  • 社区支持：JQuery有着庞大的社区支持，不断有新功能和改进加入。

然而，任何技术都有其局限性。JQuery在某些地区可能已不再流行，且在功能上不如原生JS强大。此外，使用JQuery可能会带来一定的性能开销。

  • 在无JS环境下的表现：JQuery能够在浏览器禁用JS的情况下仍正常渲染内容，这对于兼容性和可访问性至关重要。
  • 简洁性的推广：对于开发者来说，JQuery的简单和直观是其吸引力所在。它简化了代码，使得开发和部署更加迅速。
  • 与Visual Studio的整合：对于.NET开发者而言，JQuery能够与Visual Studio无缝集成，这是其另一个重要优势。

综合这位大佬的观点，我认为JQuery在某些情况下依然是一个不错的选择。尤其是对于那些追求快速开发、有限的预算或是需要维护旧有项目的开发者来说，JQuery提供了一个便捷、成熟且稳定的解决方案。虽然它可能不如一些现代框架那样强大或流行，但它在简化开发、提高生产力方面仍然有其独特的价值。

当然，每个项目的需求都不尽相同，选择哪种技术最终还是要基于项目的具体需求来定。但不可否认的是，即使在2024年，JQuery仍然有其存在的意义。

希望通过我的整理，大家能更深入地理解JQuery的价值所在。欢迎大家在评论区留言讨论，分享你们对JQuery的看法和经验。期待下次的技术分享，祝大家编程愉快！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

Selenium元素定位不到？JS注入轻松搞定

在使用Selenium做web自动化测试过程中，经常会遇到一些组件无法通过Selenium直接识别和处理，比如<input>标签组合的下拉框，比如日期控件。面对这些元素，我们可以引入JS注入技术来解决问题。

Javascript

JavaScript是一种被广泛用于Web前端开发的脚本语言 ,常用来为网页添加动态功能（弹窗，点击事件….）通过HTML DOM，JavaScript提供了页面对象获取和操作功能。

DOM模型把HTML文档解析成一棵树，根节点是<html>，从根节点往下根据节点之间的关系（顺序或包含）把节点解析为兄弟节点和孩子节点。<HTML> 节点有不同的类型：

  • 元素
  • 属性
  • 文本

Javascript可以根据DOM结构获取任意的HTML元素，变更这些元素的属性，样式，并对元素的鼠标键盘事件做出响应：

  • Javascript提供了通过id查找元素的方式：document.getElementById(id)；除了id, javascript还支持通过类名和标签名查找元素
  • Javascript提供通过innerHTML改变元素内容的方式：document.getElementById(id).innerHTML=new HTML，通过变更节点内部的HTML可以改变元素的文本和行为
  • Javascript提供通过attribute改变元素属性的方式：document.getElementById(id).attribute=new value

Selenium支持Javascript

Selenium WebDriver可以被转换为JavaScriptExecutor，通过JavaScriptExecutor执行Javascript脚本，通过这种方式可以实现Selenium的Javascript注入，从而实现对复杂页面元素的操作。

WebDriver driver=new ChromeDriver(); JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript(\”js语句\”);

Jquery

Jquery是一个增强的JavaScript框架，它封装了JavaScript常用的功能代码，简化了HTML文档操作、事件处理、动画设计和Ajax交互。

对于复杂的网页元素查找，通过Javascript较为低效，此时可以引入Jquery简化元素查找。

Jquery常见选择器如下，详细语法课参见官网https://jquery.com/

Selenium支持Jquery

Selenium可以通过判定当前待测的网站是否引入Jquery，如果没有则加载Jquery，加载完毕以后即可用Jquery代码来实现前端页面元素的操作。

public class JqueryTest {

static JavascriptExecutor js; static WebDriver driver; public static void main(String[] args) { driver=new ChromeDriver(); js=(JavascriptExecutor)driver; driver.get(\”http://www.baidu.com/\”); //判断Jquery是否存在,若不存在则注入 if(!jqueryLoaded()){ injectJquery(); } //通过jquery查找出页面百度链接元素个数（.mnav） List<WebElement> elements = (List<WebElement>) js .executeScript(\”return jQuery.find(\’.mnav\’)\”); driver.quit(); } public static boolean jqueryLoaded() { boolean loaded=false; try { loaded = (Boolean) js.executeScript(\”return\” + \” jQuery()!=null\”); }catch (Exception e){ System.out.println(\”查找jQuery对象出现异常\”); } System.out.println(\”页面已存在Jquery对象，无需注入：\” + loaded); return loaded; } public static void injectJquery() { js.executeScript(\” var headID = \” + \”document.getElementsByTagName(\\\”head\\\”)[0];\” + \”var newScript = document.createElement(\’script\’);\” + \”newScript.type = \’text/javascript\’;\” + \”newScript.src = \” + \”\’http://code.jquery.com/jquery-latest.js\’;\” + \”headID.appendChild(newScript);\”); } }

jQuery 常用API

1.1 jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

1.2 jQuery 层级选择器

知识铺垫

jQuery 设置样式

1.3 隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

1.4 jQuery 筛选选择器

1.5 jQuery 筛选方法

重点记住： parent() children() find() siblings() eq()

1.6 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

案例：淘宝服饰精品案例

  • 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
  • 需要得到当前小li 的索引号，就可以显示对应索引号的图片
  • jQuery 得到当前元素索引号 $(this).index()
  • 中间对应的图片，可以通过 eq(index) 方法去选择
  • 显示元素 show() 隐藏元素 hide()

链式编程

链式编程是为了节省代码量，看起来更优雅。

使用链式编程一定注意是哪个对象执行样式。

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

1. 添加类

2. 移除类

3. 切换类

案例：tab 栏切换

点击上部的li，当前li 添加current类，其余兄弟移除类。

点击的同时，得到当前li 的索引号

让下部里面相应索引号的item显示，其余的item隐藏

2.3 类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery 给我们封装了很多动画效果，最为常见的如下：

3.1 显示隐藏效果

1. 显示语法规范

2. 显示参数

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 隐藏语法规范

2. 隐藏参数

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 切换语法规范

2. 切换参数

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。 建议：平时一般不带参数，直接显示隐藏即可。

1. 下滑效果语法规范

2. 下滑效果参数

（1）参数都可以省略。

（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 上滑效果语法规范

2. 上滑效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 滑动切换效果语法规范

2. 滑动切换效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.3 事件切换

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）如果只写一个函数，则鼠标经过和离开都会触发它

3.4 动画队列及其停止排队方法

1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2. 停止排队

(1）stop() 方法用于停止动画或效果。

(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

3.5 淡入淡出效果

1. 淡入效果语法规范

2. 淡入效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 淡出效果语法规范

2. 淡出效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 淡入淡出切换效果语法规范

2. 淡入淡出切换效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 渐进方式调整到指定的不透明度

2. 效果参数

（1）opacity 透明度必须写，取值 0~1 之间。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 语法

2. 参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

案例：王者荣耀手风琴效果

鼠标经过某个小li 有两步操作：

当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入

其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出​

4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

1. 获取属性语法

2. 设置属性语法

4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

1. 获取属性语法

2. 设置属性语法

改方法也可以获取 H5 自定义属性

4.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法

2. 获取数据语法

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

主要针对元素的内容还有表单的值操作。

主要是遍历、创建、添加、删除元素操作。

6.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：

1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个

2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象

3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

语法2：

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

6.2 创建元素

语法：

动态的创建了一个 <li>

6.3 添加元素

1. 内部添加

把内容放入匹配元素内部最后面，类似原生 appendChild。

把内容放入匹配元素内部最前面。

2. 外部添加

内部添加元素，生成之后，它们是父子关系。

外部添加元素，生成之后，他们是兄弟关系。

6.4 删除元素

remove 删除元素本身。

empt() 和 html(\’\’\’\’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

7.1 jQuery 尺寸

  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位。

7.2 jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

  • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
  • 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
  • 可以设置元素的偏移：offset({ top: 10, left: 30 });

2. position() 获取元素偏移

  • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
  • 该方法只能获取。

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

  • scrollTop() 方法设置或返回被选元素被卷去的头部。
  • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。​

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科