jquery添加css样式;jq设置css样式 收藏 0

jQuery 获取和设置HTML元素

jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。

text() 方法可以用于设置或获取所选元素的文本内容。

例如我们获取下列 <p> 标签中的文本内容：

在浏览器中演示效果：

除了获取文本内容，text() 还可以用于设置文本内容，我们可以来看一下。

例如通过 text() 将 .content 的文本内容设置为 hello, xkd!：

在浏览器中演示效果：

html() 方法用于设置或返回所选元素的内容（包括HTML标记）。

通过 html() 方法获取 p 元素的内容：

在浏览器中演示效果：

除此之外，我们还可以使用 html() 方法来设置指定元素的内容：

在浏览器中演示效果：

val() 用于设置或返回表单字段的值。该方法大多时候用于 input 元素。

例如获取输入框 input 中的值：

在浏览器中演示效果：

如果要使用 val() 方法设置 value 的值，我们可以像下面这样做：

在浏览器中演示效果：

attr() 方法用于设置或返回被选元素的属性值。

例如下面这个例子：

在浏览器中演示效果：

attr() 方法除了获取元素的属性值，还可以设置元素的属性值，我们来看一下。

将下面 <div> 标签中的 class 属性的值设置为 summer：

在浏览器中演示效果：

链接：https://www.9xkd.com/

jQuery文件下载方法及引入HTML语法

jQuery文件下载方法及引入HTML语法

去jQuery网站下载文件包，点击主页的“Download”之后，进入下载页面，可以选择production版本的进行下载，但是点击进去之后，浏览器并不会直接下载相关的文件，而是跳转到一个“密密麻麻”都是jQuery代码的页面，仔细查看浏览器地址栏中的url便可知，该页面其实就是jQuery的min版的文件，可以使用下面这种方法，下载jQuery文件：

右键点击该页面，在弹出的菜单中选择另存为，在另存为的菜单中默认保存的后缀名为\”.js\”，如果不是，可以在下拉菜单中选择该类型的选项，然后保存即可下载jQuery文件了。鄙人下载的是最新版本的jquery-3.7.1.min.js

提示：jQuery的文件的扩展名是\”.js\”，下载完之后，无需安装，使用直接引入即可使用jQuery。

jQuery是js文件，引入HTML的方法与引入JavaScript文件的方法一样，在HTML的head标签内使用script标签引入，比如：

如果不想下载jQuery，也可以通过CDN的方式，将jQuery引入HTML，比如：

下面实例将通过一个点击按钮添加文本的实例来展示jQuery的用法，如下：

来源：

原文：

免责声明：内容仅供参考，不保证正确性！

jQuery知识一览

jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。jQuery的主旨是write less, do more。

• html元素的选取
• 操作html元素
• css操作
• html事件处理
• 实现js动画效果
• 能够链式调用
• 容易扩展插件
• 封装了ajax

引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。

在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。

在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

• 1.x 版本兼容老版本的IE，文件比较大
• 2.x 版本文件比较小，支持IE8+
• 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+

开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。

从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：

从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。

继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。

查看makeArray函数：

所以这个返回实例对象，是一个伪数组。

从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。

所以在引入jQuery的项目中：

通常形式为：$(param)

• param为函数：dom加载完成后，执行该回调函数
• param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象
• param为dom对象：将该dom对象封装成jQuery对象
• param为标签字符串：创建标签对象并封装成jQuery对象

• jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。

通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。

直接修改css属性（如果其dom标签存在这个css属性）

清空某标签下的所有dom：

给某标签下添加dom标签：

移除、添加class：

获取dom标签上的属性：

设置标签的属性：

点击：

hover：

监听事件：

post请求：

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