• Java基础之《Ajax+JQuery（JavaEE开发进阶Ⅱ）》—JQuery DOM操作

    一、管理选择器所得到的结果

    1、用jQuery选择出来的元素与数组非常类似，可以通过jQuery提供的一系列方法对其进行处理，包括获取长度、查找某个元素、筛选元素、遍历每个元素等。
    （1）size()
    获取选择器中元素的个数，类似数组中的length属性
    PS：jQuery1.8以后没有size()，用length代替

    （2）index(element)
    查找元素在集合中的位置

    （3）add()
    给集合添加元素

    （4）not()
    去除元素集合中的某个元素

    （5）filter()
    筛选元素集合中的元素

    （6）find()
    通过查询获取新的元素集合

    （7）each()
    对选择器中的元素进行遍历

    2、jQuery的一个强大的地方就是可以使用链式操作，可以大大缩短代码的长度，其中有两个方法用的比较多，比如：end()—回到操作对象的上一个对象，andSelf()—将前面对象进行组合后共同处理。
    PS：andSelf()方法在新版本中用andBack()方法替换

    3、管理选择器结果size().html

    1. <html>
    2. 	<head>
    3. 	<title>size()方法title>
    4. 		<style type="text/css">
    5. 			html{
    6. 				cursor:help;
    7. 				font-size:12px;
    8. 				font-family:Arial, Helvetica, sans-serif;
    9. 			}
    10. 			div{
    11. 				border:1px solid #003a75;
    12. 				background-color:#FFFF00;
    13. 				margin:5px;
    14. 				padding:20px;
    15. 				text-align:center;
    16. 				height:20px;
    17. 				width:20px;
    18. 				float:left
    19. 			}
    20. 		style>
    21. 		
    22. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    23. 		<script type="text/javascript">
    24. 			//用DOM注册一个点击事件
    25. 			document.onclick=function() {
    26. 				//获取div元素数量
    27. 				var i=$("div").length+1;
    28. 				//创建div
    29. 				var div=document.createElement("div");
    30. 				//把i放入div元素内
    31. 				div.innerHTML=i;
    32. 				//把div元素添加到body元素内，作为它的一个子元素
    33. 				$("body")[0].appendChild(div);
    34. 				//修改span值
    35. 				$("span")[0].innerHTML=i;
    36. 			}
    37. 		script>
    38. 	head>
    39. 	
    40. 	<body>
    41. 		<p>页面中一共有<span>0span>个div块。点击鼠标添加div：p>
    42. 	body>
    43. html>

    4、管理选择器结果index().html

    1. <html>
    2. 	<head>
    3. 	<title>index()方法title>
    4. 		<style type="text/css">
    5. 			html{
    6. 				cursor:help;
    7. 				font-size:12px;
    8. 				font-family:Arial, Helvetica, sans-serif;
    9. 			}
    10. 			div{
    11. 				border:1px solid #003a75;
    12. 				background-color:#FFFF00;
    13. 				margin:5px;
    14. 				padding:20px;
    15. 				text-align:center;
    16. 				height:20px;
    17. 				width:20px;
    18. 				float:left
    19. 			}
    20. 		style>
    21. 		
    22. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    23. 		<script type="text/javascript">
    24. 			$(function(){
    25. 				//给所有div注册点击事件
    26. 				$("div").click(function(){
    27. 					//当前点击的div在这个元素集合里的下标
    28. 					var index=$("div").index(this);
    29. 					//设置span标签内的值
    30. 					$("span").html(index.toString());
    31. 				});
    32. 			});
    33. 		script>
    34. 	head>
    35. 	
    36. 	<body>
    37. 		<div>0div><div>1div><div>2div><div>3div><div>4div><div>5div>
    38. 		点击的div块序号为：<span>span>
    39. 	body>
    40. html>

    5、管理选择器结果filter().html

    1. <html>
    2. 	<head>
    3. 	<title>filter()方法title>
    4. 		<style type="text/css">
    5. 			div{
    6. 				margin:5px;
    7. 				padding:5px;
    8. 				text-align:center;
    9. 				height:40px;
    10. 				width:40px;
    11. 				float:left
    12. 			}
    13. 			.myClass1{
    14. 				background:#fcff9f;
    15. 			}
    16. 			.myClass2{
    17. 				border:2px solid #000000;
    18. 			}
    19. 		style>
    20. 		
    21. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    22. 		<script type="text/javascript">
    23. 			$(function(){
    24. 				/*
    25. 				//给所有的div元素添加类选择器，样式
    26. 				$("div").addClass("myClass1");
    27. 				//过滤div元素集合里的元素，class属性包含middle
    28. 				var divs=$("div").filter("[class*=middle]");
    29. 				//再给过滤出的div元素添加类选择器，样式
    30. 				divs.addClass("myClass2");
    31. 				*/
    32. 				
    33. 				//链式操作
    34. 				//$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2");
    35. 				
    36. 				//filter里面函数作为参数，让用户自定义筛选函数，对于返回值为true的元素保留，否则就去除
    37. 				$("div").addClass("myClass1").filter(function(index){
    38. 					//index是元素集合里的下标
    39. 					return index==1||index==3;  //保留下标为1和3的那个
    40. 				}).addClass("myClass2");
    41. 				
    42. 			});
    43. 		script>
    44. 	head>
    45. 	
    46. 	<body>
    47. 		<div>div>
    48. 		<div class="middle">div>
    49. 		<div class="middle">div>
    50. 		<div class="middle">div>
    51. 		<div class="middle">div>
    52. 		<div>div>
    53. 	body>
    54. html>

    6、管理选择器结果find()_add()_not().html

    1. <html>
    2. 	<head>
    3. 	<title>find()_add()_not()方法title>
    4. 		<style type="text/css">
    5. 			.myClass{
    6. 				background:#ffde00;
    7. 			}
    8. 		style>
    9. 		
    10. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    11. 		<script type="text/javascript">
    12. 			$(function(){
    13. 				//找到所有p元素，从p元素内部找span元素
    14. 				//添加p元素里的子元素b到元素集合
    15. 				//给元素集合里的元素添加类选择器myClass，共2个
    16. 				$("p").find("span").add("p>b").addClass("myClass");
    17. 				
    18. 				//not函数去除，和add相反
    19. 				//.not("p>b")
    20. 				
    21. 			});
    22. 		script>
    23. 	head>
    24. 	
    25. 	<body>
    26. 		<p><span>Hellospan>, how <b>areb> you?p>
    27. 	body>
    28. html>

    7、管理选择器结果each().html

    1. <html>
    2. 	<head>
    3. 	<title>each()方法title>
    4. 		<style type="text/css">
    5. 			img{
    6. 				border:1px solid #003863;
    7. 			}
    8. 		style>
    9. 		
    10. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    11. 		<script type="text/javascript">
    12. 			$(function(){
    13. 				//查找所有img元素，遍历集合里的每一个元素，每遍历一个调用一次函数
    14. 				$("img").each(function(index){
    15. 					//this是遍历的当前对象，是一个dom对象
    16.                     //为img元素添加title属性
    17. 					this.title="这是第"+index+"幅图片，id是"+this.id;
    18. 				});
    19. 				
    20. 			});
    21. 		script>
    22. 	head>
    23. 	
    24. 	<body>
    25. 		<img src="01.jpg" id="img01" />
    26. 		<img src="02.jpg" id="img02" />
    27. 		<img src="03.jpg" id="img03" />
    28. 		<img src="04.jpg" id="img04" />
    29. 		<img src="05.jpg" id="img05" />
    30. 	body>
    31. html>

    8、管理选择器结果end()_andSelf().html

    1. <html>
    2. 	<head>
    3. 	<title>end()_andSelf()方法title>
    4. 		<style type="text/css">
    5. 			.myBackground{
    6. 				background:#ffde00;
    7. 			}
    8. 			.myBorder{
    9. 				border:2px solid #0000FF;
    10. 			}
    11. 			p{
    12. 				margin:8px;
    13. 				padding:4px;
    14. 				font-size:12px;
    15. 			}
    16. 		style>
    17. 		
    18. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    19. 		<script type="text/javascript">
    20. 			$(function(){
    21. 				//给p元素添加背景，给div元素添加边框
    22. 				//$("div").find("p").addClass("myBackground").end().addClass("myBorder");
    23. 				//给p元素添加背景，给div和p元素添加边框
    24. 				//jQuery3.x用addBack()替换andSelf()
    25. 				$("div").find("p").addClass("myBackground").addBack().addClass("myBorder");
    26. 			});
    27. 		script>
    28. 	head>
    29. 	
    30. 	<body>
    31. 		<div>
    32. 			<p>第一段p>
    33. 			<p>第二段p>
    34. 		div>
    35. 	body>
    36. html>

    二、jQuery对元素节点的操作

    1、通过jQuery来动态对节点进行操作是很容易的，对节点的操作主要分为：查询节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、对节点的属性操作、对节点的样式操作、设置和获取节点的HTML、文本和值、遍历元素节点、对节点的CSS-DOM操作。

    三、创建元素节点
    可以通过jQuery的工厂函数$()来完成对元素节点的创建
    例子：

    1. var $node_1=$("
      "      );  //创建一个空的元素节点
    2. var $node_2=$("
      hello
      "      );  //创建一个带文本的元素节点
    3. var $node_3=$("
      ">world
      "      );  //创建一个带属性的元素节点

    四、插入元素节点
    1、对新建元素节点的插入操作并非只有一种，以下是几种插入节点的方法
    （1）append()
    向每个匹配的元素内部追加内容（内部添加，最后一个子元素）

    （2）appendTo()
    将所有匹配的元素追加到指定的元素中（效果同append）

    （3）prepend()
    向每个匹配的元素内部前置内容（内部添加，第一个子元素）

    （4）prependTo()
    将所有匹配的元素前置到指定的元素中（效果同prepend）

    （5）after()
    在每个匹配的元素之后插入内容（插入同辈元素）

    （6）insertAfter()
    将所有匹配的元素插入到指定元素的后面（效果同after）

    （7）before()
    在每个匹配的元素之前插入内容（插入上一个兄弟节点）

    （8）insertBefore()
    将所有匹配的元素插入到指定元素的前面（效果同before）

    2、元素创建和插入方法.html

    1. <html>
    2. 	<head>
    3. 	<title>元素创建和插入方法title>
    4. 		<style type="text/css">
    5. 			html{
    6. 				cursor:help;
    7. 				font-size:12px;
    8. 				font-family:Arial, Helvetica, sans-serif;
    9. 			}
    10. 			div{
    11. 				border:1px solid #003a75;
    12. 				background-color:#FFFF00;
    13. 				margin:5px;
    14. 				padding:20px;
    15. 				text-align:center;
    16. 				height:20px;
    17. 				width:20px;
    18. 				float:left
    19. 			}
    20. 		style>
    21. 		
    22. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    23. 		<script type="text/javascript">
    24. 			/*
    25. 			//用DOM注册一个点击事件
    26. 			document.onclick=function() {
    27. 				//获取div元素数量
    28. 				var i=$("div").length+1;
    29. 				//创建div
    30. 				var div=document.createElement("div");
    31. 				//把i放入div元素内
    32. 				div.innerHTML=i;
    33. 				//把div元素添加到body元素内，作为它的一个子元素
    34. 				$("body")[0].appendChild(div);
    35. 				//修改span值
    36. 				$("span")[0].innerHTML=i;
    37. 			}
    38. 			*/
    39. 			
    40. 			//用jQuery来实现，对比上面用DOM方式，jQuery方式比较简单
    41. 			$(function(){
    42. 				//查询当前文档，绑定click事件
    43. 				$(document).click(function(){
    44. 					var i=$("div").length+1;
    45. 					//创建div标签
    46. 					var div=$("
      "+i+"
      "      );
    47. 					//查找body元素，追加一个子元素
    48. 					//append方法
    49. 					//$("body").append(div);
    50. 					//appendTo方法
    51. 					//div.appendTo($("body"));
    52. 					//prepend方法
    53. 					//$("body").prepend(div);
    54. 					//prepend方法
    55. 					//div.prependTo($("body"));
    56. 					//after方法，在body元素之后，添加div元素
    57. 					//$("body").after(div);
    58. 					//insertAfter方法
    59. 					//div.insertAfter($("body"));
    60. 					//before方法
    61. 					//$("body").before(div);
    62. 					//insertBefore方法
    63. 					div.insertBefore($("body"));
    64. 					//span内加1
    65. 					$("span").html(i);
    66. 					
    67. 				});
    68. 			});
    69. 		script>
    70. 	head>
    71. 	
    72. 	<body>
    73. 		<p>页面中一共有<span>0span>个div块。点击鼠标添加div：p>
    74. 	body>
    75. html>

    五、删除节点元素
    1、删除节点

    （1）remove方法
    例子：

    1. var $remove_li=$("ul li:eq(1)").remove();  //删除ul元素中的第2个li元素，返回被删除的li元素对象
    2. $("ul li").remove("li[title!='桔子']");  //通过传递参数来进行选择性的删除

    （2）detach()方法
    例子：

    var $remove_li=$("ul li:eq(1)").detach();  //和remove类似删除指定的元素，与remove不同的是，所有绑定的事件、附加的数据都会保留下来

    （3）empty()方法
    例子：

    $("ul li:eq(1)").empty();  //empty方法并不是删除元素节点，而是清空节点，它能清空元素中的所有后代节点

    2、删除元素节点.html

    1. <html>
    2. 	<head>
    3. 	<title>remove()、detach()、empty()方法title>
    4. 		<style type="text/css">
    5. 			p{
    6. 				font-size:14px;
    7. 				margin:0px;
    8. 				padding:5px;
    9. 			}
    10. 		style>
    11. 		
    12. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    13. 		<script type="text/javascript">
    14. 			/*
    15. 			$(function(){
    16. 				$("p").click(function(){
    17. 					alert("hello p");
    18. 				});
    19. 				$("input").click(function(){
    20. 					//删除p元素，返回被删除的对象
    21. 					var $removed=$("p").remove();
    22. 					//将p元素插入到h2标签之后
    23. 					$("h2").after($removed);
    24. 					//删除后p的点击事件没了
    25. 				});
    26. 			});
    27. 			*/
    28. 			
    29. 			/*
    30. 			$(function(){
    31. 				$("p").click(function(){
    32. 					alert("hello p");
    33. 				});
    34. 				$("input").click(function(){
    35. 					//删除p元素，返回被删除的对象
    36. 					var $removed=$("p").detach();
    37. 					//将p元素插入到h2标签之后
    38. 					$("h2").after($removed);
    39. 					//删除后p的点击事件还在
    40. 				});
    41. 			});
    42. 			*/
    43. 			
    44. 			$(function(){
    45. 				$("p").click(function(){
    46. 					alert("hello p");
    47. 				});
    48. 				$("input").click(function(){
    49. 					//没有删除p元素
      ，而是清空了p元素的内容
    50. 					$("p").empty();
    51. 				});
    52. 			});
    53. 			
    54. 		script>
    55. 	head>
    56. 	
    57. 	<body>
    58. 		<p>从前有一只大恐龙...p>
    59. 		<input type="button" value="点击我" />
    60. 		<h2>在树林里面跑啊跑...h2>
    61. 	body>
    62. html>

    六、复制节点
    clone()方法
    例子：

    1. $("li:eq(1)").clone.appendTo("ul");  //复制第二个li元素插入到ul中
    2. $("li:eq(1)").clone(true).appendTo("ul");  //传递了一个参数为true，代表复制元素的同时复制元素中所绑定的事件

    七、替换节点
    1、replaceWith()方法和replaceAll()方法
    例子：

    1. $("li:eq(1)").replaceWith("
    2. 草莓
      3. ");  //把第二个li元素替换掉
  • $("
  • 草莓
    • ").replaceAll("li:eq(1)"); //把第二个li元素替换掉。和replaceWith一样，无非就是语法颠倒

2、复制和替换元素.html

  1. <html>
  2. 	<head>
  3. 	<title>复制和替换元素title>
  4. 		<style type="text/css">
  5. 			
  6. 		style>
  7. 		
  8. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
  9. 		<script type="text/javascript">
  10. 			/*
  11. 			$(function(){
  12. 				//查找第一张图片，注册点击事件
  13. 				$("img:eq(0)").click(function(){
  14. 					//当前对象，this是dom对象，通过$封装成jQuery对象
  15. 					//复制并添加到body里
  16. 					//但是新插入的图片并没有点击事件
  17. 					$(this).clone().appendTo($("body"));
  18. 					//可以继承点击事件
  19. 					//$(this).clone(true).appendTo($("body"));
  20. 				});
  21. 			});
  22. 			*/
  23. 			
  24. 			$(function(){
  25. 				$("img:eq(0)").click(function(){
  26. 					//把第二张图片替换成超链接
  27. 					//$("img:eq(1)").replaceWith("我是超链接");
  28. 					$("我是超链接").replaceAll("img:eq(1)");
  29. 				});
  30. 			});			
  31. 		script>
  32. 	head>
  33. 	
  34. 	<body>
  35. 		<img src="09.jpg" /><img src="10.jpg" />
  36. 	body>
  37. html>

八、包裹节点
1、wrap()方法、wrapAll()方法和wrapInner()方法
例子：

  1. $("li").wrap("
  2. ");  //查找所有li元素，用i标签把li标签包裹起来
  • $("li").wrapAll(""); //用i标签把多个li标签整体包裹起来，要是被包裹的多个元素之间有其他元素，其他元素会被放到包裹元素之后
  • $("li").wrapInner(""); //把匹配到元素内部内容用i标签包裹

    • 2、包裹节点.html

    1. <html>
    2. 	<head>
    3. 	<title>包裹节点title>
    4. 		<style type="text/css">
    5. 			p{
    6. 				font-size:14px;
    7. 				margin:0px;
    8. 				padding:5px;
    9. 			}
    10. 		style>
    11. 		
    12. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    13. 		<script type="text/javascript">
    14. 			$(function(){
    15. 				//给第一个按钮注册事件
    16. 				$("input:eq(0)").click(function(){
    17. 					$("p").wrap("
      "      );
    18. 				});
    19. 				//给第二个按钮注册事件
    20. 				$("input:eq(1)").click(function(){
    21. 					$("p").wrapAll("
      "      );
    22. 				});
    23. 				//给第三个按钮注册事件
    24. 				$("input:eq(2)").click(function(){
    25. 					$("p").wrapInner("
      "      );
    26. 				});
    27. 			});
    28. 			
    29. 		script>
    30. 	head>
    31. 	
    32. 	<body>
    33. 		<p>我是段落1p>
    34. 		<h5>我是5号标题h5>
    35. 		<p>我是段落2p>
    36. 		<input type="button" value="wrap" /><br/>
    37. 		<input type="button" value="wrapAll" /><br/>
    38. 		<input type="button" value="wrapInner" /><br/>
    39. 		
    40. 	body>
    41. html>

    九、节点属性操作
    1、设置获取属性方法：attr()，删除属性的方法：removeAttr()
    例子：

    1. alert($("li:eq(1)").attr("title"));  //获取第二个li元素的title属性
    2. $("ul").attr({"title":"列表","id":"myul"});  //一次性设置多个属性
    3. $("li:eq(1)").removeAttr("title");  //删除第二个li内的title属性

    2、节点属性操作.html

    1. <html>
    2. 	<head>
    3. 	<title>节点属性操作title>
    4. 		<style type="text/css">
    5. 			
    6. 		style>
    7. 		
    8. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    9. 		<script type="text/javascript">
    10. 			$(function(){
    11. 				$("input:eq(0)").click(function(){
    12. 					alert($("img").attr("id"));
    13. 					
    14. 				});
    15. 				$("input:eq(1)").click(function(){
    16. 					$("img").attr({"title":"下雪啦","name":"chenhao"});
    17. 					
    18. 				});
    19. 				$("input:eq(2)").click(function(){
    20. 					$("img").removeAttr("id");
    21. 					
    22. 				});
    23. 			});
    24. 			
    25. 		script>
    26. 	head>
    27. 	
    28. 	<body>
    29. 		<img src="09.jpg" id="myimg" /><br/>
    30. 		<input type="button" value="获取id属性" /><br/>
    31. 		<input type="button" value="设置属性" /><br/>
    32. 		<input type="button" value="删除属性" /><br/>
    33. 		
    34. 	body>
    35. html>

    十、节点样式操作
    1、获取和设置样式可以用前面讲的设置获取属性（attr()）方法来实现
    例子：

    $("li:eq(2)").attr("class","myclass");  //给第三个li元素设置class属性为myclass

    2、追加样式使用addClass()方法
    例子：

    $("li:eq(2)").addClass("another");  //给第三个li元素追加another类选择器，和前面设置的样式不同的功能会叠加，相同的功能会覆盖

    3、移除样式使用removeClass()方法
    例子：

    1. $("li:eq(2)").removeClass("myClass");  //移除一个class选择器
    2. $("li:eq(2)").removeClass("myClass another");  //以空格方式隔开来，同时移除多个class选择器

    4、切换样式使用toggleClass()方法

    1. $("li:eq(2)").toggleClass("another");  //重复切换another选择器，已经使用的时候移除，没有使用的时候设置
    2. //假设使用了类选择器就移除，假设没使用就添加

    5、判断是否含有某个样式使用hasClass()方法

    1. $("li:eq(2)").hasClass("another");  //有返回true，没有返回false
    2. //此方法和$("li:eq(2)").is("another");等同

    6、节点样式操作.html

    1. <html>
    2. 	<head>
    3. 	<title>节点样式操作title>
    4. 		<style type="text/css">
    5. 			.myClass1{
    6. 				border:1px solid #750037;
    7. 				width:120px;
    8. 				height:80px;
    9. 				background-color:#ffcdfc;
    10. 			}
    11. 		style>
    12. 		
    13. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    14. 		<script type="text/javascript">
    15. 			//点击div元素，判断有没有用到myClass1类选择器
    16. 			//假设用到了就移除
    17. 			//假设没用到就添加上
    18. 			$(function(){
    19. 				$("div").click(function(){
    20. 					//方式一
    21. 					/*
    22. 					if ($(this).hasClass("myClass1")) {
    23. 						$(this).removeClass("myClass1");
    24. 					} else {
    25. 						$(this).addClass("myClass1");
    26. 					}
    27. 					*/
    28. 					//方式二
    29. 					$(this).toggleClass("myClass1");
    30. 				});
    31. 			});
    32. 			
    33. 		script>
    34. 	head>
    35. 	
    36. 	<body>
    37. 		<div>我是divdiv>
    38. 	body>
    39. html>

  • 相关阅读:
    TypeScript 类型声明文件
    G1回收器介绍
    Kubernetes(k8s)的Pod资源清单常用属性介绍
    干洗店洗鞋店管理系统app小程序；
    @Autowired @Resource @Qualifier的区别
    OpenCV中的像素重映射原理及实战分析
    毕业设计：微信小程序健康管理系统的开发与实现
    使用nginx搭建creates.io镜像
    mac pro M1(ARM)安装：Nginx安装并开启错误、访问日志
    华为新品Mate50将搭载北三短报文通信功能？这项技术是何方神圣
  • 原文地址：https://blog.csdn.net/csj50/article/details/126467607