JS基础4—jQuery

jQuery常用内容

jQuery 介绍
- jQuery 获取方式
- - 基本选择器 (最常用)
  - 层级选择器 (基于元素间关系)
  - 过滤选择器 (基于特定条件)
- jQuery事件绑定
- jQuery 方法调用
- - jQuery遍历
  - jQuery 获取与设置
  - jQuery 添加与删除
  - jQuery CSS 类
  - jQuery - AJAX
总结

jQuery 介绍

jQuery 是一个轻量级、快速且功能丰富的 JavaScript 库。它的核心目标是让开发者能够更容易地在网站上使用 JavaScript 进行开发。简单来说，jQuery 是 JavaScript 的一个工具包。它提供了一套更简单、更一致的语法和函数，让你用更少的代码完成原本需要写很多行原生 JavaScript 才能实现的任务，尤其是在处理以下方面时特别方便：

操作 HTML 元素 (DOM 操作)：轻松地查找、选择、修改、添加、删除 HTML 元素。
处理事件：更简洁地为元素添加点击、鼠标悬停、键盘按下等事件监听器。
实现动画和特效：内置了淡入淡出、滑动、自定义动画等功能。
简化 AJAX：极大地简化了与服务器进行异步通信（发送和接收数据而不刷新整个页面）的过程。
跨浏览器兼容性：这是 jQuery 早期最重要的价值之一！它封装了大量的代码来处理不同浏览器（尤其是旧版 IE）之间的 JavaScript 实现差异。开发者只需要使用 jQuery 的方法，jQuery 内部会确保这些方法在各种主流浏览器上都能正常工作，省去了开发者自己处理兼容性问题的麻烦。

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery，选择符（selector）“查询"和"查找” HTML 元素，jQuery 的 action() 执行对元素的操作

jQuery 获取方式

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作，jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()，以下是 jQuery 选择器的主要类型和使用方式。

基本选择器 (最常用)

元素选择器 ('tagName')：
- 选择所有指定标签的元素。
- 示例：$('p') - 选择页面中所有 <p> 元素，$('div') - 选择所有 <div> 元素。
ID 选择器 ('#id')：
- 选择具有指定 id 属性的单个元素（页面中 id 应是唯一的）。
- 示例：$('#myHeader') - 选择 id="myHeader" 的元素。
类选择器 ('.className')：
- 选择所有具有指定 class 属性的元素。
- 示例：$('.important') - 选择所有 class="important" 的元素，$('p.highlight') - 选择所有 class="highlight" 的 <p> 元素。
通配符选择器 ('*')：
- 选择页面中的所有元素。
- 示例：$('*') - 选择整个文档中的所有元素（谨慎使用，性能开销大）。
并集选择器 ('selector1, selector2, selectorN')：
- 选择所有匹配任意一个选择器的元素（取并集）。
- 示例：$('h1, h2, h3') - 选择所有 <h1>, <h2>, <h3> 元素，$('div.main, p.intro') - 选择所有 class="main" 的 <div> 和所有 class="intro" 的 <p> 元素。

层级选择器 (基于元素间关系)

后代选择器 ('ancestor descendant')：
- 选择指定祖先元素内部的所有匹配后代元素（无论嵌套多深）。
- 示例：$('div p') - 选择所有在 <div> 元素内部的 <p> 元素（包括嵌套在子元素里的）。
子元素选择器 ('parent > child')：
- 选择指定父元素下的直接子元素（仅第一层）。
- 示例：$('ul > li') - 选择所有作为 <ul> 直接子元素的 <li> 元素（不会选择嵌套在 <li> 里的 <ul><li>）。
相邻兄弟选择器 ('prev + next')：
- 选择紧接在 prev 元素之后的下一个同辈 next 元素。
- 示例：$('h1 + p') - 选择紧跟在 <h1> 后面的第一个 <p> 元素。
一般兄弟选择器 ('prev ~ siblings')：
- 选择 prev 元素之后的所有同辈 siblings 元素（直到遇到下一个 prev）。
- 示例：$('h2 ~ p') - 选择所有在 <h2> 元素后面且与它同级的 <p> 元素（只要在同一个父元素下，且在 h2 之后）。

过滤选择器 (基于特定条件)

通常以 : 开头，附加在基本选择器后面，用于进一步筛选结果集。可以组合使用。

基本过滤：
- :first - 选择匹配元素集合中的第一个元素。$('p:first')
- :last - 选择匹配元素集合中的最后一个元素。$('p:last')
- :even - 选择索引值为偶数的元素（索引从 0 开始）。$('tr:even')
- :odd - 选择索引值为奇数的元素（索引从 0 开始）。$('tr:odd')
- :eq(index) - 选择索引等于 index 的元素。$('li:eq(2)') (选择第三个 <li>)
- :gt(index) - 选择索引大于 index 的元素。$('li:gt(2)')
- :lt(index) - 选择索引小于 index 的元素。$('li:lt(2)')
- :not(selector) - 选择不匹配给定选择器的元素。$('input:not(:checked)') (选择所有未选中的 input)
- :header - 选择所有标题元素（h1-h6）。$(':header')
内容过滤：
- :contains(text) - 选择包含指定文本的元素（文本匹配是大小写敏感的）。$('p:contains("Hello")')
- :empty - 选择没有子元素（包括文本节点）的元素。$('td:empty')
- :has(selector) - 选择至少包含一个匹配给定选择器的后代的元素。$('div:has(p)') (选择包含 <p> 的 <div>)
- :parent - 选择至少拥有一个子元素（文本节点也算）的元素（与 :empty 相反）。$('td:parent')
可见性过滤：
- :visible - 选择所有可见的元素（占据页面空间）。
- :hidden - 选择所有隐藏的元素（display: none, type="hidden" 的 input, 宽高为 0 等）。
属性过滤 ([attribute], [attribute=value] 等)：
- [attr] - 选择拥有指定属性的元素。$('[href]') (选择所有带有 href 属性的元素)
- [attr=value] - 选择属性值等于 value 的元素。$('[type="button"]')
- [attr!=value] - 选择属性值不等于 value 的元素。
- [attr^=value] - 选择属性值以 value 开头的元素。$('[href^="https"]')
- [attr$=value] - 选择属性值以 value 结尾的元素。$('[src$=".png"]')
- [attr*=value] - 选择属性值包含子字符串 value 的元素。$('[title*="flower"]')
- [attr~=value] - 选择属性值包含由空格分隔的单词 value 的元素。
- [attr|=value] - 选择属性值等于 value 或以 value 开头后跟连字符 - 的元素。
子元素过滤 (相对于父元素)：
- :first-child - 选择其父元素的第一个子元素。$('li:first-child')
- :last-child - 选择其父元素的最后一个子元素。$('li:last-child')
- :nth-child(index/even/odd/equation) - 选择其父元素下的第 n 个子元素。$('li:nth-child(2)'), $('tr:nth-child(even)'), $('li:nth-child(3n)')
- :only-child - 选择是其父元素唯一子元素的元素。
表单过滤 (专门用于表单元素)：
- :input - 选择所有 input, textarea, select 和 button 元素。
- :text - 选择所有 type=“text” 的 input 元素。
- :password - 选择所有 type=“password” 的 input 元素。
- :radio - 选择所有 type=“radio” 的 input 元素。
- :checkbox - 选择所有 type=“checkbox” 的 input 元素。
- :submit - 选择所有 type=“submit” 的 input 和 button 元素。
- :reset - 选择所有 type=“reset” 的 input 和 button 元素。
- :button - 选择所有 type=“button” 的 input 和 button 元素。
- :image - 选择所有 type=“image” 的 input 元素。
- :file - 选择所有 type=“file” 的 input 元素。
- :enabled - 选择所有启用的表单元素。
- :disabled - 选择所有禁用的表单元素。
- :selected - 选择所有被选中的 option 元素（仅用于 <select> 内）。
- :checked - 选择所有被选中的 checkbox 或 radio 元素。

jQuery事件绑定

页面对不同访问者的响应叫做事件,事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

$(function(){ ... }) 是 jQuery 的文档就绪事件，用于确保代码在 DOM（文档对象模型）完全加载并解析后执行，

// 完整写法
$(document).ready(function() {// DOM 就绪后执行的代码
});// 简写
$(function() {// DOM 就绪后执行的代码console.log("jQuery: DOM 已就绪！");
});

.click() 方法是当按钮点击事件被触发时会调用一个函数
该函数在用户点击 HTML 元素时执行

在这里插入图片描述

.on() 括号内包括 (绑定事件的类型，事件触发函数)
其中绑定事件的类型为字符串类型，且可以绑定多个事件
注意 .on() 无法绑 “hover”（不是JS原生的是jQuery封装的），即.on()只能绑JS原生的属性

在这里插入图片描述

特殊：给未来元素绑定事件 .on()
括号内包含 (事件类型，未来元素，触发函数)
需要在HTML中找未来元素的父级元素或祖先元素
后来生成的元素，不能直接绑事件，只能通过已有的元素绑事件

在这里插入图片描述

jQuery 方法调用

jQuery遍历

parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
children() 方法返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。
同胞拥有相同的父元素，siblings()、next()、nextAll()、prev()、prevAll() 等。

例：

在这里插入图片描述

打印效果：

在这里插入图片描述

jQuery 获取与设置

获得内容 - text()、html() 以及 val()：
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标签）
val() 设置或返回表单字段的值
获取属性 - attr()：
jQuery attr() 方法用于获取、设置/改变属性值
attr() 方法也允许您同时设置多个属性。

获取:

$("#btn1").click(function(){alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){alert("值为: " + $("#test").val());
});
$("button").click(function(){alert($("#runoob").attr("href"));
});

设置：

$("#btn1").click(function(){$("#test1").text("Hello world!");
});
$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){$("#test3").val("RUNOOB");
});
$("button").click(function(){$("#runoob").attr("href","http://www.runoob.com/jquery");
});

jQuery 添加与删除

添加新的 HTML 内容：
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
删除元素和内容：
remove() 移除所选元素本身及其所有子元素（整个元素从 DOM 中删除）
empty() 只清空内部内容，元素本身仍保留在 DOM 中

jQuery CSS 类

jQuery css() 方法：css() 方法设置或返回被选元素的一个或多个样式属性。

在这里插入图片描述

jQuery - AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

$.ajax() 执行异步 AJAX 请求
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据