JQuery

最新推荐文章于 2024-11-02 12:42:04 发布

罗念笙

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量169

点赞数 1

分类专栏： javaRoad 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Al_tair/article/details/124728485

版权

javaRoad 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

大家好呀，我是小笙，以下是我学习JQuery的笔记

JQuery

概述

W3school在线文档

JQuery库下载地址

JQuery 是一个快速的，简洁的 javaScript 库，其宗旨：写更少的代码,做更多的事情

JQuery 作用

使用户能更方便地处理 HTML,css,dom等等
提供方法、events、选择器，并且方便地为网站提供 AJAX 交互
实现了浏览器的兼容问题

代码示例

原生javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("btn01");
            btn.onclick = function () {
                alert("hello,jquery");
            }
        }
    </script>
</head>
<body>
    <button type="button" id="btn01">按钮</button>
</body>
</html>

使用jquery库

DOM 对象转成 jQuery 对象<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery3.6.0/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //1.得到 btn01 这个对象->jquery 对象 
        //    $btn01 是一个 jquery 数组对象 其实就是对 dom 对象的包装. 
        //2.jquery中，获取对象的方法是 $("#id"),必须在 id 前有# 
        //3.规定 jquery 对象的命名以$开头.(不是必须，但是约定)
        $(function () {
            var $btn01 = $("#btn01");
            $btn01.click(function () {
                alert("hello,jquery");
            })
        })
    </script>
</head>
<body>
    <button type="button" id="btn01">按钮</button>
</body>
</html>

JQuery对象

jQuery 对象就是对 DOM 对象进行包装后产生的对象

DOM 对象转成 jQuery 对象

对于一个 DOM 对象，只需要用$ ()把 DOM 对象包装起来，就可以获得一个 jQuery 对象如$(DOM 对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 对象转成 jQuery 对象</title>
    <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var $btn01 = $("#btn01");
            $btn01.click(function () {
                var username = document.getElementById("username");
                alert("username value= " + username.value);
                var $username = $(username);
                alert("$username value= " + $username.val())
                }
            )
        }
    </script>
</head>
<body>
    用户名 <input type="text" id="username" name="username" value="罗念笙"/><
    <button type="button" id="btn01">按钮</button>
</body>
</html>

jQuery 对象转成 DOM 对象

JQuery 对象是一个数组对象，可以通过[index]的方法，来得到相应的 DOM 对象
JQuery 本身提供，通过.get(index)方法，得到相应的 DOM 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $username = $("#username");
            alert($username);  // Object
            alert($username[0]); // HTMLInputElement
            alert($username.get(0)); // HTMLInputElement
        })

    </script>
</head>
<body>
    u:<input type="text" id="username">
</body>
</html>

jQuery 选择器

选择器是 jQuery 的核心, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

基本选择器

基本选择器是 jQuery 中最常用的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素

*	$(“*”)	所有元素
#id	$(“#lastname”)	id=“lastname” 的元素
.class	$(“.intro”)	所有 class=“intro” 的元素
element	$(“p”)	所有元素
.class.class	$(“.intro.demo”)	所有 class=“intro” 且 class=“demo” 的元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器应用实例</title>
        <style type="text/css"> div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 60px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        } </style>
        <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(function () {
                 $("#b1").click(function () {
                    $("#one").css("background","#0000FF");
                })

                $("#b2").click(function () {
                    $(".mini").css("background","#FF0033");
                })

                $("#b3").click(function () {
                    $("div").css("background","#00FFFF");
                })

                $("#b4").click(function () {
                    $("*").css("background","#00FF33");
                })

                $("#b5").click(function () {
                    $("span,#two,.mini").css("background","#3399FF");
                })
            });
        </script>
    </head>
    <body>
        <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
        <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
        <input type="button" value=" 改 变 元 素 名 为 <div> 的 所 有 元 素 的 背 景 色 为 #00FFFF" id="b3"/>
        <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
        <input type="button" value=" 改变所有的<span>元素,id为two,class为.mini的元素的背景色为 #3399FF" id="b5"/><hr/>
        <div id="one" class="mini">div id 为 one</div>
        <div id="two">div id 为 two</div>
        <div id="three" class="mini">div id 为 three</div>
        <span id="s_one" class="mini">span one</span> <span id="s_two">span two</span>
    </body>
</html>

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>层次选择器应用实例</title> 
	<style type="text/css"> 
		div, span { 
			width: 140px; 
			height: 140px; 
			margin: 20px; 
			background: #9999CC; 
			border: #000 1px solid; 
			float: left; font-size: 17px; 
			font-family: Roman; 
		}
		div.mini { 
			width: 80px; 
			height: 30px; 
			background: #CC66FF; 
			border: #000 1px solid; 
			font-size: 12px; 
			font-family: Roman; 
		} 
	</style> 
	<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script> 
	<script type="text/javascript"> 
		$(function(){
			// 在给定的祖先元素下匹配所有后代元素
			$("#b1").click(function (){
				$("body div").css("background","#0000FF");
			})
			
			// 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
			$("#b2").click(function(){
				$("body > div").css("background","#FF0033");
			})
			
			// 匹配所有紧接在id为 #one 元素后的 div 元素
			$("#b3").click(function(){
				$("#one + div").css("background","#0000FF");
			})
			
			// 匹配id为 #two 元素之后的所有 div 元素
			$("#b4").click(function(){
				$("#two ~ div").css("background","#0000FF");
			})
			
			// 匹配前后所有兄弟元素
			$("#b5").click(function(){
				$("#two").siblings("div").css("background","#0000FF");
			})
		})
	</script> 
</head> 
<body> 
	<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> 
	<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> 
	<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> 
	<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> 
	<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> <hr/> 
	<div id="one" class="mini"> div id 为 one </div> 
	<div id="two"> div id 为 two 
		<div id="two01"> id two01</div> 
		<div id="two02"> id two02 </div> 
	</div> 
	<div id="three" class="mini"> div id 为 three 
		<div id="three01"> id three01 </div> 
	</div> 
</body> 
</html>

基础过滤选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>基础过滤选择器-应用实例</title>
		<style type="text/css">
			div,
			span {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div.mini {
				width: 80px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 匹配找到的第一个元素
				$("#b1").click(function(){
					$("div:first").css("background","#0000FF");
				})
				
				// 匹配找到的最后一个元素
				$("#b2").click(function(){
					$("div:last").css("background","#0000FF");
				})
				
				// 去除所有与给定选择器匹配的元素
				$("#b3").click(function(){
					$("div:not(.one)").css("background","#0000FF");
				})
				
				// 匹配所有索引值为偶数的元素
				$("#b4").click(function(){
					$("div:even").css("background","#0000FF")
				})
				
				// 匹配所有索引值为奇数的元素
				$("#b5").click(function(){
					$("div:odd").css("background","#0000FF")
				})
				
				// 匹配所有大于给定索引值的元素
				$("#b6").click(function(){
					$("div:gt(3)").css("background","#0000FF")
				})
				
				// 匹配一个给定索引值的元素
				$("#b7").click(function(){
					$("div:eq(3)").css("background","#0000FF")
				})
				
				// 匹配所有小于给定索引值的元素
				$("#b8").click(function(){
					$("div:lt(3)").css("background","#0000FF")
				})
				
				// 匹配如 h1, h2, h3 之类的标题元素
				$("#b9").click(function(){
					$(":header").css("background","#0000FF")
				})
		
			})
		</script>
	</head>
	<body>
		<h1>H1 标题</h1>
		<h2>H2 标题</h2>
		<h3>H3 标题</h3> 
		<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1" /> 
		<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2" /> 
		<input type="button" value=" 改变 class 不为 one 的所有 div 元素的背景色为 #0000FF" id="b3" /> 
		<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4" /> 
		<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5" /> 
		<input type="button" value=" 改变 索引 值为大 于 3 的 div 元素 的背 景色为 #0000FF" id="b6" /> 
		<input type="button" value=" 改变 索引 值为等 于 3 的 div 元素 的背 景色为 #0000FF" id="b7" /> 
		<input type="button" value=" 改变 索引 值为小 于 3 的 div 元素 的背 景色为 #0000FF" id="b8" /> 
		<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9" /><hr />
		<div id="one" class="mini"> div id 为 one</div>
		<div id="two"> div id 为 two 
			<div id="two01"> id two01 </div>
			<div id="two02"> id two02 </div>
		</div>
		<div id="three" class="one"> div id 为 three class one 
			<div id="three01"> id three01 </div>
		</div>
	</body>
</html>

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>内容过滤选择器应用实例</title>
		<style type="text/css">
			div,
			span {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div.mini {
				width: 80px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 匹配包含给定文本的元素
				$("#b1").click(function(){
					$("div:contains('di')").css("background","black")
				})
				
				// 匹配所有不包含子元素或者文本的空元素
				$("#b2").click(function(){
					$("div:empty").css("background","pink");
				})
				
				// 匹配含有选择器所匹配的元素的元素
				$("#b3").click(function(){
					// 含有class=.mini元素的父元素
					$("div:has(.mini)").css("background","green");
				})
				
				// 匹配含有子元素或者文本的元素
				$("#b4").click(function(){
					$("div:parent").css("background","yellow");
				})
			})
		</script>
	</head>
	<body> 
		<input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 black" id="b1" /><br/>
		<input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2" /><br/>
		<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3" /><br/> 
		<input type="button" value=" 改变含有子元素(或者文本元素)的 div 元素的背景色为 yellow" id="b4" /><br/> 
		<div id="xxxx">
			<div id="one" class="mini"> div id 为 one </div>
		</div>
		<div id="two"> div id 为 two 
			<div id="two01"> id two01 </div>
			<div id="two02"> id two02 </div>
		</div>
		<div id="three" class="one"> div id 为 three class one 
			<div id="three01"> id three01</div>
		</div>
		<div id="four" class="one"> XXXXXXXXXX </div>
		<div id="five" class="one"></div>
		<div id="mover"> 执行动画 </div>
	</body>
</html>

可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>可见度过滤选择器-应用实例</title>
		<style type="text/css">
			div,
			span {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div.mini {
				width: 30px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}

			div.visible {
				display: none;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 匹配所有的可见元素
				$("#b1").click(function(){
					$("div:visible").css("background","#0000FF");
				})
				
				// 匹配所有的不可见元素,利用 jQuery 中的 show() 方法将它们显示出来
				$("#b2").click(function(){
					$("div:hidden").css("background","#0000FF").show();
				})
				
				
				// 选取所有的文本隐藏域, 并打印它们的值
				$("#b3").click(function(){
					var $inputs = $("input:hidden");
					// 方式一: for
					for(i=0;i<$inputs.length;i++){
						// dom对象
						var input = $inputs[i];
						alert(input.value);
					}
					// 方式二: foreach
				    $inputs.each(function(){
						// this表示每次遍历取到的dom对象
						alert(this.value);
					})
				})
			})
		</script>
	</head>
	<body> 
		<input type="button" value="改变所有可见的 div 元素的背景色为 #0000FF" id="b1" /><br/>
		<input type="button" value="选取所有不可见的 div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/><br/>
		<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/><br/><hr/> 
		<input type="hidden" value="hidden1" /> 
		<input type="hidden" value="hidden2" /> 
		<input type="hidden" value="hidden3" /> 
		<input type="hidden" value="hidden4" />
		<div id="one" class="visible"> div id 为 one </div>
		<div id="two" class="visible"> div id 为 two </div>
		<div id="three" class="one"> div id 为 three </div>
	</body>
</html>

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>属性过滤选择器-应用实例</title>
		<style type="text/css">
			div,span {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div.mini {
				width: 30px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}

			div.visible {
				display: none;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 匹配包含给定属性的元素
				$("#b1").click(function(){
					$("div[title]").css("background","black");
				})
				
				// 匹配给定的属性是某个特定值的元素
				$("#b2").click(function(){
					$("div[title=test]").css("background","black");
				})
				
				// 匹配所有不含有指定的属性，或者属性不等于特定值的元素
				$("#b3").click(function(){
					$("div[title!=test]").css("background","black");
				})
				
				// 匹配给定的属性是以某些值开始的元素
				$("#b4").click(function(){
					$("div[title^=te]").css("background","black");
				})
				
				// 匹配给定的属性是以某些值结尾的元素
				$("#b5").click(function(){
					$("div[title$=est]").css("background","black");
				})
				
				// 匹配给定的属性是以包含某些值的元素
				$("#b6").click(function(){
					$("div[title*=es]").css("background","black");
				})
				
				// 复合属性选择器,需要同时满足多个条件时使用.是一个组合
				$("#b7").click(function(){
					$("div[id][title*=es]").css("background","black");
				})
			})
		</script>
	</head>
	<body> 
		<input type="button" value="含有属性 title 的 div 元素" id="b1"/><br/>
		<input type="button" value="属性 title 值等于 test 的 div 元素" id="b2"/><br/>
		<input type="button" value="属性 title 值不等于 test 的 div 元素(没有属性 title 的也将被选中)" id="b3"/><br/>
		<input type="button" value="属性 title 值 以 te 开始 的 div 元素" id="b4"/><br/> 
		<input type="button" value="属性 title 值 以 est 结束 的 div 元素" id="b5"/><br/> 
		<input type="button" value="属性 title 值 含有 es 的 div 元素" id="b6"/><br/>
		<input type="button" value="选取有属性 id 的 div 元素，然后在结果中选取属性 title 值含有“es”的 div 元素" id="b7"/><br/>
		<div id="one" title="test"> div id 为 one test </div>
		<div id="one-1" title="texxx"> div id 为 one-1 texxx </div>
		<div id="one-2" title="xxxest"> div id 为 one-2 xxxest </div>
		<div id="one-3" title="xxxesxxxxxt"> div id 为 one-3 xxxesxxxxxt </div>
		<div id="two" title="ate"> div id 为 two </div>
		<div id="three" class="one"> div id 为 three </div>
		<div title="test" class="one"> no id</div>
	</body>
</html>

子元素过滤选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>子元素过滤选择器示例-应用实例</title>
		<style type="text/css">
			div,
			span {
				width: 140px;
				height: 70px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			div.visible {
				display: none;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// :nth-child(index/even/odd/equation)
				// 匹配其父元素下的第 N 个子或奇偶元素
				$("#b1").click(function(){
					$("div .one:nth-child(2)").css("background","green");
				})
				
				// 匹配第一个子元素
				$("#b2").click(function(){
					$("div .one:first-child").css("background","green");
				})
				
				// 匹配最后一个子元素
				$("#b3").click(function(){
					$("div .one:last-child").css("background","green");
				})
				
				// 只有一个子元素的才会被匹配
				$("#b4").click(function(){
					$("div .one:only-child").css("background","green");
				})
			})
		</script>
	</head>
	<body> 
		<input type="button" value="每个 class 为 one 的 div 父元素下的第 2 个子元素" id="b1"/><br/> 
		<input type="button" value="每个 class 为 one 的 div 父元素下的第一个子元素" id="b2"/><br/> 
		<input type="button" value=" 每 个 class 为 one 的 div 父 元 素 下 的 最 后 一 个 子 元 素 " id="b3"/><br/>
		<input type="button" value="如果 class 为 one 的 div 父元素下的仅仅只有一个子元素，那么选中这 个子元素" id="b4"/><br/>
		<div class="one">
			<div id="one" class="one"> XXXXXXXXX id=one </div>
			<div id="two" class="one"> XXXXXXXXX id=two </div>
			<div id="three" class="one"> XXXXXXXXX id=three </div>
			<div id="four" class="one"> XXXXXXXXX id=four </div>
		</div>
		<div class="one">
			<div id="five" class="one"> XXXXXXXXX id=five </div>
		</div>
	</body>
</html>

表单属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单对象属性过滤选择器-应用实例</title>
		<style type="text/css">
			div,
			span {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 匹配所有可用元素
				$("#b1").click(function(){
					// 方式一
					$("input[type='text']:enabled").val("足球1");
					// 方式二
					var $input = $("input[type=text]:enabled");
					$input.each(function(){
						$(this).val("足球1");
					})
				})
				
				// 匹配所有不可用元素
				$("#b2").click(function(){
					var $input = $("input[type=text]:disabled");
					$input.each(function(){
						$(this).val("排球1");
					})
				})
				
				// 匹配所有选中的被选中元素(复选框、单选框等）
				$("#b3").click(function(){
					alert($("input[type='checkbox']:checked").length);
				})
				
				// 匹配所有选中的 option 元素
				$("#b4").click(function(){
					var $options = $("select option:checked");
					$options.each(function(){
						alert(this.value);
					})
				})
			})
		</script>
	</head>
	<body> 
		<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/>
		<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/><br/>
		<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数 " id="b3"/><br/>
		<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容 " id="b4"/><br/>
		<input type="text" value="篮球 1" /> 
		<input type="text" value="篮球 2" /> 
		<input type="text" value="篮球 3" disabled="true" /> 
		<input type="text" value="篮球 4" disabled="true" /><br>
		<h1>选择你的爱好</h1> 
			<input type="checkbox" value="爱好 1" />爱好 1 
			<input type="checkbox" value="爱好 2" />爱好 2
			<input type="checkbox" value="爱好 3" />爱好 3 
			<input type="checkbox" value="爱好 4" />爱好 4<br>
		<h1>选项如下:</h1> 
			<select name="job" size=9 multiple="multiple">
				<option value="选项 1">选项 1^^</option>
				<option value="选项 2">选项 2^^</option>
				<option value="选项 3">选项 3^^</option>
				<option value="选项 4">选项 4^^</option>
				<option value="选项 5">选项 5^^</option>
				<option value="选项 6">选项 6^^</option>
			</select> 
			<select id="hsp" name="edu">
				<option value="博士">博士^^</option>
				<option value="硕士">硕士^^</option>
				<option value="本科">本科^^</option>
				<option value="小学">小学^^</option>
			</select>
	</body> 
</html>

表单选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单选择器-应用实例</title>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				alert($(":button").length); // 3
				alert($("button").length); // 2
				alert($("input[type=button]").length) // 1
			})
		</script>
	</head>
	<body>
		<form>
			<input type="text" /><br /> 
			<input type="checkbox"/><br/> 
			<input type="radio" /><br /> 
			<input type="image" src="./imgs/1.png" height="100" /><br/> 
			<input type="file"/><br/> 
			<input type="submit"/><br/>
			<input type="reset"/><br/> 
			<input type="password"/><br/> 
			<input type="button" value="按钮 1"/><br/>
			<select>
				<option/>
			</select><br/>
			<textarea></textarea><br/> 
			<button>按钮 2</button> 
			<button>按钮 3</button> 
		</form>
	</body>
</html>

JQuery的DOM操作

查找节点, 修改属性

查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>操作节点的属性</title>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					$("img").attr("src","./imgs/2.png");
				})
			})
		</script>
	</head>
	<body> <img src="./imgs/1.png" height="100"/> <br/> 
	<button>改变图片</button> </body>
</html>

创建节点

创建节点: 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回

第1组方法(内部插入法)

插入的元素是原来的元素的子元素

append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的

第2组方法(外部插入法)

插入的元素是原来的元素的兄弟元素

after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>创建节点-应用实例</title>
		<style type="text/css">
			div,span {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}
			div.mini {
				width: 30px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			// 使用 dom 的传统方法
			var test1 = function(){
				var li = document.createElement("li");
				li.setAttribute("id","cq");
				li.setAttribute("name","chongqing");
				li.innerText = "重庆";
				document.getElementById("sh").append(li);
			}
			
			$(function(){
				$("#b2").click(function(){
					$li = $("<li id='cq' name='chongqing'>重庆</li>");
					// 外部插入法
					$("#sh").after($li);
					$li.insertAfter("#sh");
				})	
				
				$("#b3").click(function(){
					$li = $("<li id='cd' name='chengdu'>成都</li>");
					// 外部插入法
					$("#bj").before($li);
				})	
			})
		</script>
	</head>
	<body>
		<ul id="city">
			<li id="bj" name="beijing">北京</li>
			<li id="sh" name="shanghai">上海</li>
			<li id="jl" name="jilin">吉林</li>
			<li id="my" name="mianyang">绵阳</li>
		</ul>
		<input type="button" id="b1" onclick="test1()" value="添加重庆 li 到上海下(使用 dom 的传统方法)"/><br/>
		<input type="button" id="b2" value="添加重庆 li 到上海下"/><br/>
		<input type="button" id="b3" value="添加成都 li 到北京前"/><br/>
	</body>
</html>

删除节点

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用
empty(): 清空元素中的所有后代节点(不包含属性节点)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>删除节点-应用实例</title>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#b1").click(function(){
					$("p").remove();
				})
				
				$("#b2").click(function(){
					$("p").empty();
				})
				
				$("#b3").click(function(){
					$("#sh").remove();
				})
			})
		</script>
	</head>
	<body> 您喜欢的城市:<br>
		<ul id="city">
			<li id="bj" name="beijing">北京</li>
			<li id="sh" name="shanghai">上海</li>
			<li id="tj" name="tianjin">天津</li>
		</ul> 您爱好的游戏:<br>
		<ul id="game">
			<li id="fk" name="fakong">反恐</li>
			<li id="cq" name="chuangqi">传奇</li>
		</ul>
		<p>Hello</p> how are <p>you?</p>
		<p name="test">Hello, 
			<span>Person</span> 
			<a href="#">and person</a>
		</p> 
		<input type="button" value="删除所有p" id="b1"/>
		<input type="button" value="所有p清空" id="b2"/> 
		<input type="button" value="删除上海这个li" id="b3"/>
	</body>
</html>

复制节点

clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
clone(true): 复制元素的同时也复制元素中的的事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>复制节点-应用实例</title>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("p").click(function(){
					alert($(this).text());
				})
				// 复制元素但不复制元素中的事件
				$("p").clone().insertAfter($("button"));
				// 复制元素的同时也复制元素中的的事件
				$("p").clone(true).insertAfter($("button"))
			})
		</script>
	</head>
	<body> 
		<button>保存</button> 
		<br><br><br><br>
		<br>-------------------------------------<br>
		<p>段落 1</p>
		<p>段落 2</p>
		<p>段落 3</p>
		<p>段落 4</p>
		<p>段落 5</p>
	</body>
</html>

替换节点

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素 A.replaceWith(B)
replaceAll(): 颠倒了的 replaceWith() 调用方法,A.replaceAll(B) == B.replaceWith(A)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>替换节点-应用实例</title>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 将 p 替换成 button
				// $("p").replaceWith("<input type='button' id='btn' value='按钮'/>")
				// $("<input type='button' id='btn' value='按钮'/>").replaceAll("p");
			})
		</script>
	</head>
	<body>
		<h1>节点替换</h1>
		<p>Hello</p>
		<p>jquery</p>
		<p>World</p>
	</body>
</html>

属性操作

attr(): 获取属性和设置属性
attr()传递一个参数时, 即为某元素的获取指定属性
attr()传递两个参数时, 即为某元素设置指定属性的值
removeAttr(): 删除指定元素的指定属性

样式操作

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass()
移除样式: removeClass() — 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
判断是否含有某个样式: hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>查找节点</title>
		<style type="text/css">
			div {
				width: 140px;
				height: 140px;
				margin: 20px;
				float: left;
				border: #000 1px solid;
			}

			.one {
				width: 140px;
				height: 140px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}
		</style>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				// 获取 class 和设置 class: class 是元素的一个属性
				$("#b1").click(function(){
					$("#first").attr("class","one");
				})
				
				// 追加样式
				$("#b2").click(function(){
					$("#first").addClass("one");
				})
				
				// 移除样式
				$("#b3").click(function(){
					$("#first").removeClass("one");
				})
				
				// 切换样式
				$("#b4").click(function(){
					$("#first").toggleClass("one");
				})
				
				// 判断是否含有某个样式
				$("#b5").click(function(){
					alert($("#first").hasClass("one"));
				})
			})
		</script>
	</head>
	<body> 
		<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id为first添加.one 样式)" id="b1"/><br/>
		<input type="button" value=" 追加样式 : addClass() ( 给 id 为 first 添 加 .one 样 式 )"id="b2"/><br/> 
		<input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给 id 为 first 删除 .one 样式) " id="b3"/><br/>
		<input type="button" value="切换样式: toggleClass() (给 id 为 first 切换 .one 样式) --- 控制样式上的重复切 换.如果类名存在则删除它, 如果类名不存在则添加它" id="b4"/><br/> 
		<input type="button" value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false" id="b5"/><br/>
		<div id="first">first</div>
		<div id="second">second</div>
	</body>
</html>

常用遍历节点方法

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素
取得匹配元素后面的同辈元素的集合:next()/nextAll()
取得匹配元素前面的同辈元素的集合:prev()/prevAll()
取得匹配元素前后所有的同辈元素: siblings()
获取指定的第几个元素: nextAll().eq(index)
对获取到的同辈元素进行过滤 nextAll().filter(“标签”)

CSS-DOM 操作

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>css-dom 操作</title>
		<script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					var offset = $("img").offset();
					alert("上边: " + offset.top + " 左边：" +  offset.left);
				})
			})
		</script>
	</head>
	<body> 
		<br/>hello,world~
		<img src="./imgS/1.png" width="200"> 
		<button id="b1" type="button">获取图片信息</button> 
	</body>
</html>