🌴 2022.3.31 早十


文章目录

  • 前言
  • 3.9 jQuery技术
  • 3.9.1 jQuery简介
  • 3.9.1.1 jQuery简介
  • 3.9.1.2 配置jQuery
  • 3.9.1.3 jQuery语法
  • 3.9.2 jQuery对象和DOM对象
  • 3.9.2.1 jQuery对象和DOM对象
  • 3.9.2.2 jQuery对象和DOM对象的转换
  • 3.9.3 jQuery选择器
  • 3.9.3.1 基本选择器
  • 3.9.3.2 层级选择器
  • 3.9.3.3 过滤选择器
  • 3.9.4 jQuery文档操作
  • 3.9.4.1 插入
  • 3.9.4.2 包裹
  • 3.9.4.3 替换
  • 3.9.4.4 删除
  • 3.9.4.5 复制


前言

🎬本文章是 【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元素并且选中这些克隆的副本