在前端的舞台上，JQuery犹如一位魔法师，为我们展现了操纵HTML元素的奇妙技巧。而在这个技巧的精妙组成中，通用属性操作是一门绝妙的魔法。在本篇博客中，我们将深入研究JQuery DOM操作中的通用属性操作，揭示这段魔法的神奇之处。

JQuery的独特光芒

JQuery以其简洁、高效的语法而脱颖而出，成为前端开发中的瑞士军刀。作为一款JavaScript库，JQuery不仅使得代码书写更为优雅，还提供了一系列便捷的方法，让我们轻松地操纵HTML元素。

万能的通用属性操作

通用属性操作是JQuery的一项强大技能，通过它，我们可以对元素的任意属性进行操作。不论是修改样式、获取数据，还是处理用户输入，通用属性操作为我们提供了无限可能。

获取和设置属性值

在JQuery中，我们可以使用attr()方法来获取或设置元素的属性值。这个方法接受两个参数，第一个是要操作的属性名，第二个是可选的属性值。

获取属性值

// 获取元素的href属性值
var linkHref = $("#myLink").attr("href");

// 获取图片的src属性值
var imgSrc = $("#myImage").attr("src");

通过这样的方式，我们可以轻松地获取元素的属性值，为后续操作提供基础数据。

设置属性值

// 设置元素的href属性值
$("#myLink").attr("href", "https://www.example.com");

// 设置图片的src属性值
$("#myImage").attr("src", "images/newImage.jpg");

这样，我们就可以通过JQuery轻松地设置元素的属性值，实现页面内容的动态更新。

操作元素的样式

通用属性操作在操作元素样式时发挥了巨大的作用。通过class属性，我们能够方便地添加、删除、切换元素的样式类。

添加类

// 添加highlight类
$("#myElement").addClass("highlight");

这样，我们就为#myElement元素添加了一个名为highlight的类，从而改变了其样式。

移除类

// 移除oldClass类
$("#myElement").removeClass("oldClass");

通过removeClass()方法，我们可以移除元素的指定类，改变其样式。

切换类

// 切换active类
$("#myElement").toggleClass("active");

toggleClass()方法允许我们在元素上切换一个类，如果元素原先有该类，则移除，否则添加。

控制元素的显示与隐藏

通用属性操作也为我们提供了方便的方法来控制元素的可见性。通过display属性的控制，我们可以轻松实现元素的显示和隐藏。

显示元素

// 显示元素
$("#myElement").show();

show()方法将元素的display属性设置为原先的值，使得元素重新显示在页面上。

隐藏元素

// 隐藏元素
$("#myElement").hide();

hide()方法将元素的display属性设置为none，使得元素在页面上不可见。

处理表单元素的值

在处理表单交互时，通用属性操作也能派上用场。我们可以轻松获取或设置表单元素的值，实现对用户输入的掌控。

获取输入框的值

// 获取输入框的值
var inputValue = $("#usernameInput").val();

通过val()方法，我们能够获取输入框的值，从而进行后续的处理。

设置输入框的值

// 设置输入框的值
$("#usernameInput").val("新的值");

通过val()方法，我们也能够设置输入框的值，实现对表单的动态更新。

小结

通过本篇博客，我们深入了解了JQuery DOM操作中的通用属性操作。这项技能使得我们能够轻松地操纵HTML元素，无论是修改属性值、处理样式，还是控制元素的可见性。JQuery以其简洁而强大的语法，为通用属性操作提供了极大的便利，让前端开发者能够更加轻松地驾驭HTML元素。

在前端的奇妙世界里，通用属性操作为我们打开了更多的可能性。通过这段魔法，我们能够创造出更丰富、更具交互性的网页。让我们一起深入研究，不断探索前端开发的绚丽世界，释放通用属性操作的绝妙魔法！

作者信息 作者 ： 繁依Fanyi CSDN： https://techfanyi.blog.csdn.net 掘金：https://juejin.cn/user/4154386571867191