本文详细介绍了jQuery库的基础知识，包括jQuery的安装、基本语法、对象类型及其转换、选择器的使用，以及如何进行文档操作如插入、包裹、替换、删除和复制元素。此外，还探讨了jQuery选择器的各种类型，如基本选择器、层级选择器和过滤选择器。通过实例展示了jQuery简化JavaScript操作的强大功能。
🌴 2022.3.31 早十
文章目录
前言
🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏 传送门
💻提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3”
📽本节主要内容：简单认识一下jQuery的语法，选择器，以及对文档的操作
3.9 jQuery技术
3.9.1 jQuery简介
3.9.1.1 jQuery简介
jQuery是一个JavaScript函数库。一个轻量级的“写的少，做的多”的JavaScript库，jQuery还提供了大量的插件，简而言之，就好比很长的方法与属性，通过重写，对Javascript的简化
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX1
3.9.1.2 配置jQuery
🚀 添加 jQuery
从 jquery 下载 jQuery 库，之后在文件中引用
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery，我们可以直接引用他们。首选百度和新浪因为访问速度快嘛
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
🚀 jQuery版本
- Production version - 用于实际的网站中，已被精简和压缩
- Development version - 用于测试和开发（未压缩，是可读的代码）
3.9.1.3 jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作
基础语法：
$(selector).action()
示例：之前学习了利用DOM获取元素，使用
document.getElementById("abc").style.display="none";可以达到隐藏的效果，但jQuery会更简洁
$("p").hide() //隐藏所有 <p> 元素
$("p.test").hide() //隐藏所有 class="test" 的 <p> 元素
$("#test").hide() //隐藏所有 id="test" 的元素
3.9.2 jQuery对象和DOM对象
3.9.2.1 jQuery对象和DOM对象
- jQuery 对象是通过jQuery包装之后的DOM对象
- DOM对象是指HTML文档对象
- 对于一个DOM对象，使用$()包装后即为jQuery对象
document.getElementById("msg-div") //DOM对象
$(document.getElementById("msg-div")) //jQuery对象
为了区分二者，可以用
$命名对象
var div = document.getElementById("msg-div") //DOM对象
var $div = $(document.getElementById("msg-div")) //jQuery对象
3.9.2.2 jQuery对象和DOM对象的转换
jQuery 对象只能使用jQuery方法。DOM对象只能使用DOM方法。
var div = document.getElementById("msg-div");
div.style.backgroundColor = "red";
var $div = $(document.getElementById("msg-div"));
$div.css("background","green")
🚀 jQuery 对象转为DOM对象方法一
jQuery对象实际上是一个数据对象，可以通过
[index]方法获得相应的DOM对象
var $div = $("#msg-div"); //得到jQuery对象
var div = $("#msg-div")[0]; //转换成DOM对象
🚀 jQuery 对象转为DOM对象方法二
jQuery本身可通过.get(index)方法得到相应的DOM对象
var $div = $("#msg-div"); //得到jQuery对象
var div = = $("#msg-div").get(0); //转换成DOM对象
🚀 DOM对象转为jQuery对象
对于一个DOM对象，只需要用
$()将DOM对象包装起来，就能获得jQuery对象了
var div = document.getElementById("msg-div"); //得到DOM对象
var $div = $(div); //转换成jQuery对象
3.9.3 jQuery选择器
选择器和CSS大同小异，语法：
$("选择器")
3.9.3.1 基本选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素的集合 | $("#test") |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test") |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p") |
| * | 匹配所有元素 | 集合元素 | $("*") |
| selector1,s2,s3… | 将每个选择器匹配到的元素合并后一起返回 | 集合元素 |
3.9.3.2 层级选择器
| 选择器 | 描述 | 返回 | 例 |
|---|---|---|---|
| ancestor descendant | 在给定的祖先元素下匹配所有的后代元素 | 集合元素 | $("li span") |
| parent > child | 在给定的父元素下匹配所有的子元素 | 集合元素 | $("li>span") |
| prev + next | 匹配所有紧接在 prev 元素后的 next 元素 | 集合元素 | $("p+span") |
| prev ~ siblings | 匹配 prev 元素之后的所有 siblings(同辈) 元素 | 集合元素 | $("p~span") |
3.9.3.3 过滤选择器
🚀 基本过滤选择器
| 选择器 | 描述 | 返回 | 例 |
|---|---|---|---|
| :first | 获取第一个元素 | 选中第一个p标签 | $("p:first") |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 选中span但不包括其中的p | $("span:not p") |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 | 选中偶数行 | $("tr:even") |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 | 选中奇数行 | $("tr:odd") |
| :eq(index) | 匹配一个给定索引值的元素 | 选中第二行 | $("tr:eq(2)") |
其它
| 选择器 | 描述 |
|---|---|
| :gt(index) | 匹配所有大于给定索引值的元素 |
| :lang1.9+ | 选择指定语言的所有元素 |
| :last | 获取最后个元素 |
| :lt(index) | 匹配所有小于给定索引值的元素 |
| :header | 匹配如 h1, h2, h3之类的标题元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
| :focus | 匹配当前获取焦点的元素 |
| :root1.9+ | 选择该文档的根元素 |
🚀 内容过滤选择器
| 选择器 | 描述 | 例 | 返回 |
|---|---|---|---|
| :contains(text) | 匹配包含给定文本的元素 | $("span:contain('A')") | 所有包含A字符的span |
| :empty | 匹配所有不包含子元素或者文本的空元素 | $(":empty") | 没有结束标签的元素也会返回 |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 | $("li:has(p:empty)") | li标签中的空p |
| :parent | 匹配含有子元素或者文本的元素 | $("li:has(p:parent)") | li标签中有内容的p |
🚀 可见性过滤选择器
| 选择器 | 描述 |
|---|---|
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
| :visible | 匹配所有的可见元素 |
🚀 属性过滤选择器
| 选择器 | 描述 | 例 | 返回 |
|---|---|---|---|
| [attribute] | 匹配包含给定属性的元素 | $("color") | 含有color属性的元素 |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 | $("color=red") | color是红色的元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 | $("color!=red") | |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 | ||
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 | ||
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 | ||
| [attrSel1][attrSel2][attrSelN] | 复合属性选择器，需要同时满足多个条件时使用 |
🚀 子元素过滤选择器
| 选择器 | 描述 |
|---|---|
| :first-child | 匹配第一个子元素 |
| :first-of-type1.9+ | 选择所有相同的元素名称的第一个兄弟元素 |
| :last-child | 匹配最后一个子元素 |
| :last-of-type1.9+ | 选择的所有元素之间具有相同元素名称的最后一个兄弟元素 |
| :nth-child | 匹配其父元素下的第N个子或奇偶元素 |
| :nth-last-child()1.9+ | 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个 |
| :nth-last-of-type()1.9+ | 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个 |
| :nth-of-type()1.9+ | 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个 |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会被匹配 |
| :only-of-type1.9+ | 选择所有没有兄弟元素，且具有相同的元素名称的元素 |
🚀 表单过滤选择器
| 选择器 | 描述 |
|---|---|
| :input | 匹配所有 input, textarea, select 和 button 元素 |
| :text | 匹配所有的单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有图像域 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| :file | 匹配所有文件域 |
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
3.9.4 jQuery文档操作
3.9.4.1 插入
🚀 内部插入
| 选择器 | 描述 |
|---|---|
| append(content) | 向每个匹配的元素内部追加内容 |
| appendTo(content) | 把所有匹配的元素追加到另一个指定的元素元素集合中 |
| prepend(content) | 向每个匹配的元素内部前置内容 |
| prependTo(content) | 把所有匹配的元素前置到另一个、指定的元素元素集合中 |
$(".title-span").append("123") //在span标签内容追加"123"
$(".title-span").append($("<div>123</div>")) //在span标签内加div
$("<div>123</div>").appendTo($(".title-span")) //把div插入到span内
🚀外部插入
| 选择器 | 描述 |
|---|---|
| after(content|fn) | 在每个匹配的元素之后插入内容 |
| before(content|fn) | 在每个匹配的元素之前插入内容 |
| insertAfter(content) | 把所有匹配的元素插入到另一个、指定的元素元素集合的后面 |
| insertBefore(content) | 把所有匹配的元素插入到另一个、指定的元素元素集合的前面 |
$(".title-span").after($("<div>123</div>")) //在span标签后加div
$("<div>123</div>").insertBefore($(".title-span")) //在span标签之前加div
3.9.4.2 包裹
| 选择器 | 描述 |
|---|---|
| wrap(html|ele|fn) | 把所有匹配的元素用其他元素的结构化标记包裹起来 |
| unwrap() | 移出元素的父元素。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素 |
| wrapAll(html|ele) | 匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素 |
| wrapInner(html|ele|fn) | 匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素 |
$(".title-span").wrap($("div"))
/*
<span></span>改为
<div>
<span></span>
</div>
*/
3.9.4.3 替换
| 选择器 | 描述 |
|---|---|
| replaceWith(content|fn) | 将所有匹配的元素替换成指定的HTML或DOM元素 |
| replaceAll(selector) | 用匹配的元素替换掉所有 selector匹配到的元素 |
$(".title-span").replaceWith($("div")) //把span标签替换为div
$("div").replaceAll($(".title-span")) //把div替换为span
3.9.4.4 删除
| 选择器 | 描述 |
|---|---|
| empty() | 删除匹配的元素集合中所有的子节点(删除所有元素和内容,例如p标签内的文字内容也会被清除) |
| remove([expr]) | 从DOM中删除所有匹配的元素(删除所有元素，包括绑定事件) |
| detach([expr]) | 从DOM中删除所有匹配的元素。 不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来 |
3.9.4.5 复制
| 选择器 | 描述 |
|---|---|
| clone([Even[,deepEven]]) | 克隆匹配的DOM元素并且选中这些克隆的副本 |
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
