jQuery的基本使用
在学习jQuery之前 现回顾一下原生js是如何获取dom元素的：
1.通过 ID 获取
使用 `document.getElementById()` 方法可以通过元素的 ID 获取单个元素。
```
const elementById = document.getElementById('myElementId');
```
2.通过标签名获取
使用 `document.getElementsByTagName()` 方法可以获取一个包含指定标签名的 HTML 集合（类似于数组的对象）
```
const elementsByTagName = document.getElementsByTagName('div');
// 可以通过索引访问特定的元素，例如 elementsByTagName 表示第一个 `<div>` 元素。
```
3.通过类名获取
1. `document.getElementsByClassName()`：
* 此方法返回一个包含具有指定类名的元素的 HTML 集合。
```
const elementsByClassName = document.getElementsByClassName('myClassName');
```
2. 在现代浏览器中，还可以使用 `querySelectorAll()` 方法结合类选择器来获取具有特定类名的元素集合。
```
const elementsByQuerySelector = document.querySelectorAll('.myClassName');
```
四、通过 CSS 选择器获取
1. `document.querySelector()`：
* 此方法返回匹配指定 CSS 选择器的第一个元素。
```
const firstElementBySelector = document.querySelector('#myId.myClassName div');
// 这个选择器将查找具有 ID 为“myId”的元素下的具有类名“myClassName”的 `<div>` 元素中的第一个。
```
2. `document.querySelectorAll()`：
* 与 `querySelector()` 类似，但它返回所有匹配指定 CSS 选择器的元素集合。
```
const allElementsBySelector = document.querySelectorAll('p.myParagraphClass');
// 这个选择器将查找所有具有类名“myParagraphClass”的 `<p>` 元素。
```
相对比与原生js操作dom元素 jQuery提供了一套非常快速、简洁的 方法，极大地简化了 JavaScript 编程。以下是 jQuery 的基本使用方法：
一、引入 jQuery
在 HTML 文件中，可以通过以下方式引入 jQuery：
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
二、jQuery 选择元素
1. 使用 CSS 选择器：
* jQuery 可以使用类似于 CSS 的选择器来选取 HTML 元素。例如，选取所有的 `<p>` 元素：
```
$('p');
```
* 选取具有特定类名的元素，如 `.my-class`：
```
$('.my-class');
```
* 选取具有特定 ID 的元素，如 `#my-id`：
```
$('#my-id');
```
2. 层级选择：
* 选取某个元素下的所有子元素：
```
$('#parent').children();
```
* 选取某个元素的直接子元素，比如 `<ul>` 下的直接 `<li>` 元素：
```
$('ul > li');
```
三、操作元素内容和属性
1. 获取和设置元素内容：
* 获取元素的文本内容：
```
var text = $('p').text();
```
* 设置元素的文本内容：
```
$('p').text('新的文本内容');
```
* 获取和设置 HTML 内容：
```
var htmlContent = $('#my-div').html();
$('#my-div').html('<p>新的 HTML 内容</p>');
```
2. 获取和设置元素属性：
* 获取元素的属性值，如获取 `<img>` 元素的 `src` 属性：
```
var srcValue = $('img').attr('src');
```
* 设置元素的属性值：
```
$('img').attr('src', 'new-image.jpg');
```
四、事件处理
1. 绑定事件：
* 为元素绑定点击事件：
```
$('button').click(function() {
alert('按钮被点击了！');
});
```
* 为元素绑定鼠标悬停事件：
```
$('div').hover(function() {
$(this).css('background-color', 'yellow');
}, function() {
$(this).css('background-color', '');
});
```
2. 解绑事件：
* 解绑点击事件：
```
$('button').off('click');
```
五、DOM 操作
1. 创建和添加元素：
* 创建一个新的 `<p>` 元素并添加到页面中：
```
var newParagraph = $('<p>这是一个新的段落。</p>');
$('body').append(newParagraph);
```
2. 删除和移除元素：
* 删除一个元素：
```
$('p').remove();
```
* 清空一个元素的内容：
```
$('#my-div').empty();
```
六、动画效果
1. 显示和隐藏元素：
* 淡入显示元素：
```
$('div').fadeIn();
```
* 淡出隐藏元素：
```
$('div').fadeOut();
```
2. 滑动效果：
* 向上滑动显示元素：
```
$('div').slideDown();
```
* 向下滑动隐藏元素：
```
$('div').slideUp();
```
页:
[1]