jQuery简单介绍与用法
一、jQuery简介
1. 简化 DOM 操作：jQuery 提供了简单而强大的选择器，可以轻松地选取 HTML 元素，并对其进行操作。通过使用 jQuery 的方法，可以轻松地操纵元素的属性、样式、内容等。 2. 事件处理：jQuery 简化了事件处理的过程。可以使用 jQuery 的事件绑定方法来附加事件处理程序，例如点击、鼠标移入移出、表单提交等。这使得处理用户交互变得更加简单和可靠。 3. 动画效果：jQuery 提供了丰富的动画效果和过渡效果，可以轻松地实现元素的淡入淡出、滑动、展开折叠等效果。这些动画效果可以增强用户体验，并使网页更加生动和吸引人。 4. AJAX 请求：jQuery 提供了简化的 AJAX 方法，使得发送异步 HTTP 请求变得更加简单。可以使用 jQuery 的 AJAX 方法从服务器获取数据，而无需手动处理 XMLHttpRequest 对象和回调函数。 5. 跨浏览器兼容性：jQuery 解决了不同浏览器之间的兼容性问题。它提供了一致的 API，可以在各种浏览器上以相同的方式运行，从而简化了开发过程。 6. 插件生态系统：jQuery 拥有一个庞大的插件生态系统，提供了各种各样的插件和扩展，用于解决特定的问题或添加特定的功能。这些插件可以快速扩展 jQuery 的功能，并为开发人员提供更多选择和灵活性。二、jQuery安装方式
有三种方式可以安装 jQuery：
1. 下载并引入：可以从 jQuery 的官方网站（[https://jquery.com/）下载](https://jquery.com/%EF%BC%89%E4%B8%8B%E8%BD%BD) jQuery 的压缩版本（通常是 .min.js 文件），然后将其引入到 HTML 文件中。
```html <script src="jquery.min.js"></script> ```
2. 使用 CDN：可以使用托管在 CDN（内容分发网络）上的 jQuery 文件。这样可以通过在 HTML 文件中引入 CDN 上的 jQuery 文件来加载 jQuery。
```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ```
3. 包管理工具：如果正在使用包管理工具（如 npm、Yarn），可以使用该工具来安装 jQuery。然后，可以将 jQuery 作为模块导入到项目中。
```bash npm install jquery ``` jQuery引入方式
一般来说，将 jQuery 引入的位置放在页面的 `<head>` 标签中靠前的位置是比较常见的做法。这样可以确保在其他 JavaScript 代码中使用 jQuery 之前，jQuery 已经被加载和解析。
三、jQuery选择器
以下是一些常用的 jQuery 选择器及其对应的代码示例：
1. 元素选择器：通过元素名称选择元素。
```javascript $('div') // 选择所有的 <div> 元素 ```2. ID 选择器：通过元素的 ID 属性选择元素。
```javascript $('#myElement') // 选择 ID 为 "myElement" 的元素 ```3. 类选择器：通过元素的类名选择元素。
```javascript $('.myClass') // 选择类名为 "myClass" 的元素 ```4. 属性选择器：通过元素的属性选择元素。
```javascript $('[name="email"]') // 选择具有 name 属性且值为 "email" 的元素 ```5. 后代选择器：选择元素的后代元素。
```javascript $('ul li') // 选择所有 <ul> 元素中的 <li> 元素 ```6. 子元素选择器：选择元素的直接子元素。
```javascript $('ul > li') // 选择所有 <ul> 元素的直接子元素 <li> ```7. 同级选择器：选择元素的同级元素。
```javascript $('li + li') // 选择所有紧接在 <li> 元素后面的同级 <li> 元素 ```8. 过滤选择器：根据特定条件过滤元素。
```javascript $('li:first') // 选择第一个 <li> 元素 $('li:last') // 选择最后一个 <li> 元素 $('li:even') // 选择索引为偶数的 <li> 元素 $('li:odd') // 选择索引为奇数的 <li> 元素 $('li:eq(2)') // 选择索引为 2 的 <li> 元素 ```这些是一些常见的 jQuery 选择器，可以根据需要选择特定的元素或元素集合。通过结合使用选择器和其他 jQuery 方法，可以对选中的元素进行操作、绑定事件等。请根据实际需求选择适当的选择器，并在 jQuery 代码中使用它们。
四、jQuery CSS设置
使用 `css()` 方法来修改元素的 CSS 样式。该方法接受一个对象作为参数，其中键是要修改的 CSS 属性，值是要设置的样式值。
以下是一些常见的使用 `css()` 方法的示例：
1. 修改单个样式属性：
```javascript $('p').css('color', 'red'); // 将所有 <p> 元素的文本颜色设置为红色 ```2. 修改多个样式属性：
```javascript $('div').css({ 'color': 'blue', 'font-size': '18px', 'background-color': 'yellow' }); // 将所有 <div> 元素的文本颜色设置为蓝色，字体大小为18像素，背景颜色为黄色 ```3. 获取样式属性的值：
```javascript var fontSize = $('p').css('font-size'); // 获取第一个 <p> 元素的字体大小 ```注意事项：
* 使用 `css()` 方法时，可以通过传递一个对象来设置多个样式属性，或者通过传递两个参数来设置单个样式属性。 * 如果要获取样式属性的值，可以调用 `css()` 方法并传递属性名称作为参数。 * `css()` 方法也可以用于获取和设置其他计算样式属性，例如宽度、高度、位置等。
五、文档处理
1. `append()`：将指定的内容追加到目标元素的末尾。
```javascript // 在 <ul> 元素的末尾追加一个新的 <li> 元素 $('<li>New item</li>').appendTo('ul'); ```
2. `prepend()`：将指定的内容插入到目标元素的开头。
```javascript // 在 <ul> 元素的开头插入一个新的 <li> 元素 $('<li>New item</li>').prependTo('ul'); ```
3. `after()`：在目标元素之后插入指定的内容。
```javascript // 在 <div> 元素之后插入一个新的 <p> 元素 $('<p>New paragraph</p>').insertAfter('div'); ```
4. `before()`：在目标元素之前插入指定的内容。
```javascript // 在 <div> 元素之前插入一个新的 <p> 元素 $('<p>New paragraph</p>').insertBefore('div'); ```
5. `prependTo()`：将当前元素插入到目标元素的开头。
```javascript // 将当前选中的元素插入到 <ul> 元素的开头 $('.item').prependTo('ul'); ```
6. `appendTo()`：将当前元素追加到目标元素的末尾。
```javascript // 将当前选中的元素追加到 <ul> 元素的末尾 $('.item').appendTo('ul'); ```
六、创建新节点
1. `$(html, attributes)`：通过传递 HTML 字符串和属性对象创建一个新的 jQuery 对象，并可以为新节点添加类名。
```javascript // 创建一个带有类名的 <div> 元素 const $div = $('<div>', { class: 'myClass' });
// 创建一个带有多个类名的 <p> 元素 const $paragraph = $('<p>', { class: 'myClass1 myClass2' });
// 创建一个带有类名和其他属性的 <a> 元素 const $link = $('<a>', { class: 'myLink', href: 'https://example.com', target: '_blank' }); ```
七、 事件
jQuery 中，可以使用 `$(document).ready()` 方法来在文档加载完毕后执行代码。`$(document).ready()` 是一个事件处理方法，它会在文档的 DOM 结构完全加载并解析之后触发。
以下是使用 `$(document).ready()` 的示例代码：
```javascript $(document).ready(function() { // 在文档加载完毕后执行的代码 // 可以在这里执行各种操作，例如选择元素、绑定事件等 // 例如： $('button').click(function() { alert('按钮被点击了！'); }); }); ```
在上面的示例中，`$(document).ready()` 方法包含一个匿名函数作为参数，该函数中包含了需要在文档加载完毕后执行的代码。在这个例子中，当文档加载完毕后，会选择所有的按钮元素，并为其绑定一个点击事件处理程序，当按钮被点击时会弹出一个提示框。
另外，为了简化代码，可以使用 `$()` 缩写代替 `$(document).ready()`。以下是等效的示例代码：
```javascript $(function() { // 在文档加载完毕后执行的代码 // 可以在这里执行各种操作，例如选择元素、绑定事件等 }); ```
无论是使用 `$()` 还是 `$(document).ready()`，它们都实现了相同的功能，即在文档加载完毕后执行指定的代码。这样可以确保代码在访问和操作 DOM 元素之前，这些元素已经完全加载和解析。
八、注意：`$(document).ready()` 和 `window.onload` 都用于在页面加载完成后执行代码，但它们有一些差异。
>> 1. 执行时机：
> > * `$(document).ready()`：当文档的 DOM 结构加载完成并解析后，就会触发。 > * `window.onload`：当整个页面，包括图片和其他资源都加载完成后，才会触发。> 2. 多次调用：
> > * `$(document).ready()`：可以在页面上多次调用，每次调用都会添加一个新的处理函数。这样，多个处理函数将按照添加的顺序依次执行。 > * `window.onload`：只能在页面上调用一次。如果多次调用 `window.onload`，只有最后一个调用会生效。> 3. 执行顺序：
> > * `$(document).ready()`：按照添加处理函数的顺序依次执行。 > * `window.onload`：只有当整个页面加载完成后，才会执行。> 4. 包含的内容：
> > * `$(document).ready()`：只等待文档的 DOM 结构加载完成，不包括其他资源，如图片等。 > * `window.onload`：等待整个页面及其所有资源加载完成，包括图片等。 > > 因此，如果只需要在文档的 DOM 结构加载完成后执行代码，可以使用 `$(document).ready()`，它比 `window.onload` 更早触发，且可以多次调用。如果需要确保整个页面及其所有资源都加载完成后再执行代码，可以使用 `window.onload`。九、on() 方法
可以使用 `.on()` 方法来为元素绑定事件处理程序。以下是一些常见的事件操作示例：1. 单击事件 (click event)：
```javascript // 为按钮绑定单击事件处理程序 $('button').on('click', function() { // 在单击按钮时执行的代码 }); ```
2. 双击事件 (double click event)：
```javascript // 为元素绑定双击事件处理程序 $('div').on('dblclick', function() { // 在双击元素时执行的代码 }); ```
3. 鼠标移入事件 (mouse enter event)：
```javascript // 为元素绑定鼠标移入事件处理程序 $('img').on('mouseenter', function() { // 当鼠标移入元素时执行的代码 }); ```
4. 鼠标移出事件 (mouse leave event)：
```javascript // 为元素绑定鼠标移出事件处理程序 $('img').on('mouseleave', function() { // 当鼠标移出元素时执行的代码 }); ```
5. 输入框值改变事件 (input change event)：
```javascript // 为输入框绑定值改变事件处理程序 $('input').on('change', function() { // 当输入框的值发生改变时执行的代码 }); ```
在这些示例中，我们使用了 `.on()` 方法来为选定的元素绑定不同类型的事件。回调函数中的代码将在事件发生时执行。
你还可以使用其他的事件类型，如 `keydown`、`keyup`、`submit` 等，具体取决于你的需求。可以根据需要将事件绑定到任何选择器选中的元素上。
off() 方法
另外，你还可以使用 `.off()` 方法来解除绑定的事件处理程序，例如：```javascript
// 解除按钮的单击事件处理程序
$('button').off('click'); ```这将移除按钮的单击事件处理程序，使其不再触发。
* `.mouseenter()`：绑定鼠标进入事件的处理程序。
```javascript $("button").mouseenter(function() { // 处理鼠标进入事件的逻辑 }); ```
* `.mouseleave()`：绑定鼠标离开事件的处理程序。
```javascript $("button").mouseleave(function() { // 处理鼠标离开事件的逻辑 }); ```
* `.keydown()`：绑定按键按下事件的处理程序。
```javascript $("input").keydown(function(event) { // 处理按键按下事件的逻辑 // 可以通过 event 对象获取按下的键值、按键的修饰键等信息 }); ```
* `.submit()`：绑定表单提交事件的处理程序。
```javascript $("form").submit(function(event) { // 处理表单提交事件的逻辑 // 可以通过 event 对象阻止默认的表单提交行为 }); ```
这只是一小部分 jQuery 提供的事件绑定方法，还有更多方法可用于处理不同类型的事件。可以根据具体需求选择合适的方法来绑定事件处理程序。
十、 效果
* `.show()`：显示被选元素。
```javascript $("div").show(); ```
* `.hide()`：隐藏被选元素。
```javascript $("div").hide(); ```
* `.toggle()`：在显示和隐藏状态之间切换被选元素。
```javascript $("div").toggle(); ```
* `.slideDown()`：通过垂直滑动方式显示被选元素。
```javascript $("div").slideDown(); ```
* `.slideUp()`：通过垂直滑动方式隐藏被选元素。
```javascript $("div").slideUp(); ```
* `.slideToggle()`：在显示和隐藏状态之间通过垂直滑动方式切换被选元素。
```javascript $("div").slideToggle(); ```
* `.fadeIn()`：通过淡入效果显示被选元素。
```javascript $("div").fadeIn(); ```
* `.fadeOut()`：通过淡出效果隐藏被选元素。
```javascript $("div").fadeOut(); ```
* `.fadeToggle()`：在显示和隐藏状态之间通过淡入淡出效果切换被选元素。
```javascript $("div").fadeToggle(); ```
这些方法都可以接受参数来指定动画的速度、回调函数等。例如：
```javascript $("div").slideDown(500, function() { // 动画完成后的回调函数 }); ```
十一、 属性
* `.attr(attributeName)`：获取被选元素的指定属性值。
```javascript var href = $("a").attr("href"); ```
* `.attr(attributeName, value)`：设置被选元素的指定属性值。
```javascript $("img").attr("src", "image.jpg"); ```
* `.removeAttr(attributeName)`：移除被选元素的指定属性。
```javascript $("a").removeAttr("target"); ```
* `.addClass(className)`：向被选元素添加一个或多个类。
```javascript $("div").addClass("highlight"); ```
* `.removeClass(className)`：从被选元素移除一个或多个类。
```javascript $("div").removeClass("highlight"); ```
* `.toggleClass(className)`：在被选元素的类之间切换。
```javascript $("div").toggleClass("highlight"); ```
* `.html()`：获取被选元素的HTML内容。
```javascript var htmlContent = $("div").html(); ```
* `.html(htmlString)`：设置被选元素的HTML内容。
```javascript $("div").html("<p>This is a paragraph.</p>"); ```
* `.text()`：获取被选元素的纯文本内容。
```javascript var textContent = $("div").text(); ```
* `.text(textString)`：设置被选元素的纯文本内容。
```javascript $("div").text("This is a paragraph."); ```
* `.val()`：获取表单元素的值。
```javascript var inputValue = $("input").val(); ```
* `.val(value)`：设置表单元素的值。
```javascript $("input").val("John Doe"); ``` 标签：jQuery,javascript,元素,绑定,用法,事件,简单,div From： https://www.cnblogs.com/mengecho/p/17534205.html