🌴 2022.3.31 早十

文章目录

前言

3.9 jQuery技术

3.9.1 jQuery简介

3.9.1.1 jQuery简介

3.9.1.2 配置jQuery

🚀 添加 jQuery

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

🚀 jQuery版本

3.9.1.3 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对象

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对象的转换

var div = document.getElementById("msg-div");
div.style.backgroundColor = "red";
var $div = $(document.getElementById("msg-div"));
$div.css("background","green")

🚀 jQuery 对象转为DOM对象方法一

var $div = $("#msg-div"); 		//得到jQuery对象
var div = $("#msg-div")[0];		//转换成DOM对象

🚀 jQuery 对象转为DOM对象方法二

var $div = $("#msg-div"); 			//得到jQuery对象
var div = = $("#msg-div").get(0); 	//转换成DOM对象

🚀 DOM对象转为jQuery对象

var div = document.getElementById("msg-div");	//得到DOM对象
var $div = $(div); 		//转换成jQuery对象

3.9.3 jQuery选择器

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()不同的是，所有绑定的事件、附加的数据等都会保留下来