jQuery

[引入 jQuery](#引入 jQuery)
- [方式一：CDN 引入](#方式一：CDN 引入)
- 方式二：本地引入（推荐，避免外部地址不可访问的风险）
[jQuery 基础语法](#jQuery 基础语法)
[jQuery 选择器](#jQuery 选择器)
[jQuery 事件](#jQuery 事件)
操作元素
- 获取/设置元素内容
- 获取/设置元素属性
- [获取/设置 CSS 属性](#获取/设置 CSS 属性)
- 添加元素
- 删除元素

jQuery 封装了 JavaScript 常用功能代码，提供简洁而强大的选择器和 DOM 操作方法。

引入 jQuery

方式一：CDN 引入

html 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

方式二：本地引入（推荐，避免外部地址不可访问的风险）

从 jQuery 官网下载到本地项目中：

html 复制代码

<script src="js/jquery-3.7.1.min.js"></script>

四种版本类型：

版本类型	说明
uncompressed	非压缩版，易读但文件大
minified	压缩版，推荐开发使用
slim	精简版，不含 Ajax 和特效
slim minified	精简压缩版

jQuery 基础语法

javascript 复制代码

$(selector).action();

$：jQuery 提供的全局函数
selector：选择器，用来查找 HTML 元素
action：对元素执行的操作

代码通常写在 document ready 函数中，确保文档完全加载后再执行：

javascript 复制代码

// 完整写法
$(document).ready(function(){
    // jQuery 代码
});

// 简洁写法
$(function(){
    // jQuery 代码
});

示例：点击按钮隐藏元素

html 复制代码

<button type="button">点我消失</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            $(this).hide();
        });
    });
</script>

jQuery 选择器

jQuery 选择器基于 CSS 选择器，以 $() 开头：

语法	描述
`$("*")`	选取所有元素
`$(this)`	选取当前 HTML 元素
`$("p")`	所有 `<p>` 元素
`$("p:first")`	第一个 `<p>` 元素
`$("p:last")`	最后一个 `<p>` 元素
`$(".box")`	所有 class="box" 的元素
`$("#id")`	特定 id 的元素

jQuery 事件

事件由三部分组成：事件源、事件类型、事件处理程序。

常见事件：

代码	事件
$(document).ready(function)	文档就绪事件(完成加载)
$(selector).click(function)	点击事件
$(selector).dblclick(function)	双击事件
$(selector).change(function)	元素的值发生改变
$(selector).mouseover(function)	鼠标悬停事件

示例：

javascript 复制代码

$("p").click(function(){
    // 点击后执行的代码
});

操作元素

获取/设置元素内容

方法	说明
`text()`	设置或返回文本内容
`html()`	设置或返回内容（包含 HTML 标签）
`val()`	设置或返回表单字段的值

javascript 复制代码

// 获取内容
var html = $("#test").html();
var text = $("#test").text();
var inputVal = $("input").val();

// 设置内容
$("#test").html('<h1>设置html</h1>');
$("#test2").text('设置text');
$("input").val("设置内容");

获取/设置元素属性

javascript 复制代码

<a href="http://www.baidu.com">百度</a>

// 获取属性
var href = $("a").attr("href");

// 设置属性
$("a").attr("href", "http://www.youdao.com");

获取/设置 CSS 属性

javascript 复制代码

<div style="font-size: 40px;">一个div测试</div>

// 获取 CSS
var fontSize = $("div").css("font-size");

// 设置 CSS
$("div").css("font-size", "24px");

添加元素

方法	说明
`append()`	在被选元素结尾插入内容
`prepend()`	在被选元素开头插入内容
`after()`	在被选元素之后插入内容
`before()`	在被选元素之前插入内容

javascript 复制代码

<ol>
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
	<li>第四个</li>
</ol>
<img src="pic/rose.jpg">

$("ol").append("<li>追加到结尾</li>");
$("ol").prepend("<li>追加到开头</li>");
$("img").before("图片前插入");
$("img").after("图片后插入");

删除元素

javascript 复制代码

<div style="font-size: 40px;">一个div测试</div>
// 删除被选元素及其子元素
$('div').remove();

// 删除被选元素的子元素，保留标签
$('div').empty();