🌴 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元素并且选中这些克隆的副本 |