`JQuery`基础

最新推荐文章于 2022-06-29 13:51:03 发布
最新推荐文章于 2022-06-29 13:51:03 发布
阅读量347 收藏
点赞数
分类专栏： javaweb 文章标签： jquery javascript 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47267628/article/details/124615472
版权

JQuery

概念：一个JavaScript框架，简化JS开发，jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。

快速入门

步骤：

  1. 下载JQuery
  2. 导入JQuery的js文件L：导入的是min.js
  3. 使用JQuery

下载版本问题：

目前jQuery有三个大版本：
		1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
			功能不再新增。因此一般项目来说，使用1.x版本就可以了，
					 最终版本：1.12.4 (2016年5月20日)
		2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
			功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
					 最终版本：2.2.4 (2016年5月20日)
		3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
			一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
			目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
			
			
 jquery-xxx.js 与 jquery-xxx.min.js区别：
		1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
		2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

快速入门案例：

<!--1.使用第一步：导入jquery文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>

<!--2.使用jquery-->
<!--使用jQuery中的id选择器函数，获取相关的标签【元素】对象-->
<script>
    var div1 = $("#div1");
    var html = div1.html();//注意的是：在jquery中获取对应属性的文本内容，要用html()函数
    // 而在JavaScript中使用的innerHTML属性
    alert(html)

    // 获取div2标签对象
    var div2 = $("#div2");
    var html1 = div2.html();
    alert(div2.html());
</script>
</body>
</html>
jquery对象和Javascript之间转换[重点]
jquery 转成 Javascript
jq对象[索引]  或者  jq对象.get(索引);

Javascript 转成 Jquery
$(js对象)



 for (let i = 0; i < divs.length; i++) {
      //修改div标签体中的内容，调用innerHTML属性
      divs[i].innerHTML = "aaa";
      // Javascript 转成 Jquery，由于Jquery修改标签属性更加方便
      $(divs[i]).html("eee");
  }
                                 
                                 
                           
  ar $divs = $("div");//通过标签选择器的方式
  // 获取的$divs也可以当作一个数组来使用
  // Jquery方式可以难过`html`的函数来修改div标签体中内容，不像js需要遍历
  $divs.html("bbb");

  /*
       1. JQuery对象在操作时，更加方便。
       2. JQuery对象和js对象方法不通用的.
       3. 两者相互转换
           * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
           * js -- > jq : $(js对象)
    */
  
  // Jquery 转成 Javascript ，由于$divs可以当作一个数组使用
  $divs[0].innerHTML = "ccc";
  $divs[1].innerHTML = "ddd";

<head>
    <meta charset="UTF-8">
    <title>Jquery和Javascript之间相互转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
  // 方式一：使用JavaScript方式获取所有div元素对象
  var divs = document.getElementsByTagName("div");
  // divs可以当作一个数组使用
  for (let i = 0; i < divs.length; i++) {
      //修改div标签体中的内容，调用innerHTML属性
      divs[i].innerHTML = "aaa";
      // Javascript 转成 Jquery，由于Jquery修改标签属性更加方便
      $(divs[i]).html("eee");
  }

  // 方式二：通过Jquery方式获取所有div元素对象
  var $divs = $("div");//通过标签选择器的方式
  // 获取的$divs也可以当作一个数组来使用
  // Jquery方式可以难过`html`的函数来修改div标签体中内容，不像js需要遍历
  $divs.html("bbb");

  /*
       1. JQuery对象在操作时，更加方便。
       2. JQuery对象和js对象方法不通用的.
       3. 两者相互转换
           * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
           * js -- > jq : $(js对象)
    */
  
  // Jquery 转成 Javascript ，由于$divs可以当作一个数组使用
  $divs[0].innerHTML = "ccc";
  $divs[1].innerHTML = "ddd";

</script>
</body>
选择器

概念：筛选具有相似特征的元素（标签）

1.基本操作学习

事件绑定

// 在Jquery中绑定事件的方式
        $(function () {
            // 给bt1绑定点击事件
            $("#bt1").click(
                function () {
                    alert("弹出BBB。。。")
                }
            );//在click括号中写相关的函数
        });

        // 的Javascript客户绑定事件的方式，
        window.onload = function (){
            document.getElementById("bt1").onclick = function () {
                alert("弹出CCC...");
            }
        }

入口函数：【就是等待加载页面完毕】

//在JQuery中等待页面加载完毕的方式
        // 入口函数【就是dom文档加载完成之后 执行该函数中的代码，就是等待页面加载完毕】
        $(function () {
            $("#bt1").click(function () {
                alert("弹出aaa")
            });
        });

        // 在Javascript中等待页面加载完毕的方式
        window.onload = function (){
            alert("页面加载文件了");
        }

注意是：$(function(){代码块})可以写多个，window.onloac=function(){代码块}只能定义一次,如果定义多次，后边的会将前边的覆盖掉

控制样式：

// 控制样式
        // 在Javascript中修改样式可以使用 style方式 或 className方式
        window.onload = function () {
            var div2 = document.getElementById("div2");
            div2.className = "div1";
        }

        // 在Jquery中修改样式可以使用 获取对象标签调用css()函数,在函数中传入键对，键是属性，值是属性值
        $(function () {// 等待页面加载完毕执行该代码
            var $div1 = $("#div1");
            $div1.css("backgroundColor","red");// 在Jquery中使用的是函数，修改样式【键值对方式】
        });

在Jquery中调用css()函数可以添加css样式的值，也可以获取样式的值，是键值对的形式，传入键表示获取值，传入键值对则表示添加样式

基本操作学习案例：【重点必须理解】

<!--1.使用第一步：导入jquery文件-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        .div1 {
            background-color: rebeccapurple;
        }
    </style>
    <script>
        //在JQuery中等待页面加载完毕的方式
        // 入口函数【就是dom文档加载完成之后 执行该函数中的代码，就是等待页面加载完毕】
        // 可以定义多个
        $(function () {
            $("#bt1").click(function () {
                alert("弹出aaa")
            });
        });

        // 在Javascript中等待页面加载完毕的方式,只能定义一次,如果定义多次，后边的会将前边的覆盖掉
        window.onload = function (){
            alert("页面加载文件了");
        }

        // 在Jquery中绑定事件的方式
        $(function () {
            // 给bt1绑定点击事件
            $("#bt1").click(
                function () {
                    alert("弹出BBB。。。")
                }
            );//在click括号中写相关的函数
        });

        // 的Javascript客户绑定事件的方式
        window.onload = function (){
            document.getElementById("bt1").onclick = function () {
                alert("弹出CCC...");
            }
        }

        // 控制样式
        // 在Javascript中修改样式可以使用 style方式 或 className方式
        window.onload = function () {
            var div2 = document.getElementById("div2");
            div2.className = "div1";
        }

        // 在Jquery中修改样式可以使用 获取对象标签调用css()函数,在函数中传入键对，键是属性，值是属性值
        $(function () {// 等待页面加载完毕执行该代码
            var $div1 = $("#div1");
            $div1.css("backgroundColor","red");// 在Jquery中使用的是函数，修改样式【键值对方式】
        });
    </script>
</head>

<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="submit" value="点我了" id="bt1" />
</body>
基本选择器【重点】
基本选择器            
	1. 标签选择器（元素选择器）               
       语法： $("html标签名") 获得所有匹配标签名称的元素
    2. id选择器 
       语法： $("#id的属性值") 获得与指定id属性值匹配的元素
    3. 类选择器
       语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
    4. 并集选择器：
       语法： $("选择器1,选择器2,....") 获取多个选择器选中的所有元素

基本选择器案例：

// 为能获取下面的元素，需要等待页面加载完毕
		$(function () {
			// ID选择器
			// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
			$("#b1").click(function () {
				$("#one").css("backgroundColor","red");
			});

			// 标签选择器
			// <input type="button" value=" 改变元素[标签]名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
			// 获取所有的div标签
			var $div = $("#b2");
			//　绑定点击事件
			$div.click(
				function () {
					$("div").css("backgroundColor","red");
				}
			);
			
			// 类选择器
			// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
			var $b3 = $("#b3");
			// 绑定点击事件
			$b3.click(
				function () {
					var $mini = $(".mini").css("backgroundColor","green");
				}
			);

			// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
			var $b4 = $("#b4");
			// 给b4绑定点击事件
			$b4.click(
				function () {
					// 并集选择器
					$("span,#tow").css("backgroundColor","green");
				}
			);
		})
层级选择器
层级选择器
	1. 后代选择器
		 语法： $("A B ") 选择A元素内部的所有B元素		
	2. 子选择器
		 语法： $("A > B") 选择A元素内部的所有B子元素

层级选择器案例：

    <script type="text/javascript">
		// 为了获取后面的标签，所以需要等待页面加载完毕
		$(function () {
			//后代选择器[儿子孙子。。。都选择]
			// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
			var $b1 = $("#b1");
			$b1.click(
					function () {
						$("body div").css("backgroundColor","green");
					}
			);

			// 子选择器[只选择儿子]
			// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
			var $b2 = $("#b2");
			$b2.click(function () {
				$("body>div").css("backgroundColor","green");
			});
		});
	</script>
属性选择器【重点】

属性选择器表示是：选择标签【元素】中包含该属性的标签

1. 属性名称选择器 
	语法： $("A[属性名]") 包含指定属性的选择器【重点】
	
2. 属性选择器
	语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器【重点】
	
3. 复合属性选择器
	语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器

注意是：复合属性选择器，多个条件必须同时满足才行

<script type="text/javascript">

		 //为了获取后面的标签，所以需要等待页面加载完毕
		 $(function () {
			 // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
			 var $b1 = $("#b1");
			 $b1.click(function () {
				 $("div[title]").css("backgroundColor","green");
			 });
			 // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
			 var $b2 = $("#b2");
			 $b2.click(function () {
				 $("div[title='test']").css("backgroundColor","green");
			 });
			 // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
			 var $b3 = $("#b3");
			 $b3.click(function () {
				 $("div[title!=test]").css("backgroundColor","green");//`！`在Jquery中表示不等于
			 });
			 // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
			 $("#b4").click(function () {
				 $("div[title^='te']").css("backgroundColor","green");//`^`在Jquery中表示以什么开头
			 });
			 // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
			 $("#b5").click(function () {
				 $("div[title$='est']").css("backgroundColor","green");//`$`在Jquery中表示以什么结束
			 });
			 // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
			 $("#b6").click(function () {
				 $("div[title*='es']").css("backgroundColor","green");//`*`在Jquery中表示包含
			 });
			 // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
			 $("#b7").click(function () {
				 $("div[id][title*='es']").css("backgroundColor","green");//注意是多个条件都必须都满足才起作用
			 });
		 })
	 </script>
过滤选择器
1. 首元素选择器 
	语法： 标签名:first 获得选择的元素中的第一个元素
	
2. 尾元素选择器 
	 语法： 标签名:last 获得选择的元素中的最后一个元素
	 
3. 非元素选择器
	 语法： 标签名:not(selector) 不包括指定内容的元素
	 
4. 偶数选择器
	 语法：标签名:even 偶数，从 0 开始计数
	 
5. 奇数选择器
	 语法： 标签名:odd 奇数，从 0 开始计数
	 
6. 等于索引选择器
	 语法： 标签名:eq(index) 指定索引元素
	 
7. 大于索引选择器 
	 语法： 标签名:gt(index) 大于指定索引元素
	 
8. 小于索引选择器 
	 语法： 标签名:lt(index) 小于指定索引元素
	 
9. 标题选择器
	语法： :header 获得标题（h1~h6）元素，固定写法【注意标题选择器是这样写固定写法，不变】

过滤选择器案例：

<script type="text/javascript">
		
		// 为获取后面标签元素，需要等待页面加载完毕后执行该代码块
		$(function () {
			// 改变div中的元素，说明是获取所有的div元素对象
			// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
			$("#b1").click(function () {
				$("div:first").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
			$("#b2").click(function () {
				$("div:last").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
			$("#b3").click(function (){
				$("div:not(.one)").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
			$("#b4").click(function () {
				$("div:even").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
			$("#b5").click(function () {
				$("div:odd").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
			$("#b6").click(function () {
				$("div:gt(3)").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
			$("#b7").click(function () {
				$("div:eq(3)").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
			$("#b8").click(function () {
				$("div:lt(3)").css("backgroundColor","green");
			});
			// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
			$("#b9").click(function () {
				$(":header").css("backgroundColor","green");
			});
		})
		 
	</script>

注意是：索引是从0零开始的

表单过滤选择器【重点】
1. 可用元素选择器 
		语法： :enabled 获得可用元素
2. 不可用元素选择器 
		语法： :disabled 获得不可用元素
3. 选中选择器 
		语法： :checked 获得单选/复选框选中的元素
4. 选中选择器 
		语法： :selected 获得下拉框选中的元素

案例：

 <script type="text/javascript">
   $(function () {
      // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
      $("#b1").click(function () {
         $("input[type='text']:enabled").val("aaa");
      });
      // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
      $("#b2").click(function () {
         $("input[type='text']:disabled").val("bbb");
      });
      // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
      $("#b3").click(function () {
         var length = $("input[type='checkbox']:checked").length;
         alert(length)
      });
      // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
      $("#b4").click(function () {
         // 注意是选中是option标签，就是select的子标签
         var length = $("select[id='job']>option:selected").length;
         alert(length)
      });
   })
</script>

DOM操作

内容操作
方法
html():获取/设置元素的标签体内容
例如：`<a><font>内容</font></a>  --> 获取的是：`<font>内容</font>`【注意获取的是下一级的内容有标签也包含标签】

text():获取/设置元素的标签体纯文本内容
例如：`<a><font>内容</font></a>  --> 获取的是：`内容`【注意只能获取标签体中的文本，不管有多少个套在一起，获取的最终是文本内容】
// 修改mydiv的标签体内容：注意是会将`<p><a href="#">标题标签</a></p>`全部替换

val():获取/设置元素的`value`属性值
例如： <input id="myinput" type="text" name="username" value="张三" /> 
获取到的是："张三"，也可以修改value中的值

// 修改mydiv文本内容：注意是会将：`<p><a href="#">标题标签</a></p>`全部替换和html()函数一样

案例：

<script>
			//为了获取下面标签，等待页面加载完毕，才能执行该代码块
			$(function () {
				// 获取myinput 的value值
				var val = $("#myinput").val();
				alert(val);
				// 修改myinput 的value值为 海康
				$("#myinput").val("海康");

				// 获取mydiv的标签体内容
				var html = $("#mydiv").html();//获取是div标签中内容：<p><a href="#">标题标签</a></p>和text()函数一样
				alert(html);
				// 修改mydiv的标签体内容：注意是会将`<p><a href="#">标题标签</a></p>`全部替换
				$("#mydiv").html("<h2>海康</h2>");//可以加入标签
				$("#mydiv").html("海康");

				// 获取mydiv文本内容
				var text = $("#mydiv").text();//获取是纯文本内容
				alert(text);
				// 修改mydiv文本内容：注意是会将：`<p><a href="#">标题标签</a></p>`全部替换和html()函数一样
				$("#mydiv").text("湛江");
			});

		</script>
属性操作
1.通用属性操作：
	1.attr():获取/设置/新增元素的属性[键值对形式，传入键表示是获取，传入键值对表示是新增]
	2.removeAttr():删除属性
	3.prop():获取/设置/新增元素的属性[键值对形式，传入键表示是获取，传入键值对表示是新增]
	4.removeProp():删除属性
	
	
attr和prop区别？
1.如果操作的是元素的固有属性，则建议使用prop【就是系统定义的属性】
2.如果操作的是元素自定义的属性，则建议使用attr

固有属性就是系统定义的，例如：<input type="text" username="user" />中的type属性就是系统定义的，而username属性就是自定义的属性

注意是：上述的获取和删除只需要传入键名就可以，而设置值是需要传入键值对的形式，因为上述的方法是键值对

<script type="text/javascript">
		$(function () {
			//获取北京节点的name属性值
			var $bj = $("#bj");
			// 由于li中没有name属性所以自定义的属性
			var attr = $bj.attr("name");//获取值传入键名就可以
			alert(attr);
			//设置北京节点的name属性的值为dabeijing
			var $bj1 = $("#bj");
			$bj1.attr("name","dabeijing");
			//新增北京节点的discription属性 属性值是didu
			var attr1 = $("#bj").attr("discription","didu");
			alert(attr1)
			//删除北京节点的name属性并检验name属性是否存在
			var $bj2 = $("#bj");
			$bj2.removeAttr("name");
			//获得hobby的的选中状态
			// 由于checkbox属性是input中的属性，所以是固有属性
			var $hobby = $("#hobby");
			var prop = $hobby.prop("type");
			alert(prop);
		})
	</script>


2.对class属性操作
	1.addClass(): 添加class属性值
	2.removeClass(): 删除class属性值
	3.toggleClass(): 切换class属性
		toggleClass("one"): 判断如果元素对象上存在`class="one"，则将属性值`one`删除掉，如果元素对象上不存在class="one"，则添加
		

	4.css(): 键值对形式
		当传入键时，获取的是属性的值`css("background");`表示获取背景色的值
		当传入键和值时，表示设置值`css("background","green");`表示设置背景色的值

案例：

 <script type="text/javascript">

   $(function () {
      //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
      $("#b1").click(function () {
         // 增加样式的方式,由于class是div固有属性，所以使用prop方式
         $("#one").prop("class","second");
      });
      //<input type="button" value=" addClass"  id="b2"/>
      $("#b2").click(function () {
         // 使用的addClass方式
         $("#two").addClass("second");
      });

      //<input type="button" value="removeClass"  id="b3"/>
      $("#b3").click(function () {
         $(".one").removeClass("one");
      });
      //<input type="button" value=" 切换样式"  id="b4"/>
      $("#b4").click(function () {
         $(".one").toggleClass("second");//没有则添加，有则删除
      });
      //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
      $("#b5").click(function () {
         var css = $("#one").css("background");
         alert(css);
      });
      //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
      $("#b6").click(function () {
         $("#one").css("background","green");
      });
   });
</script>
CRUD操作

父子层级关系：

1.append():父元素将子元素追加到未尾
	如：对象1.append(对象2):将对象2添加到对象1元素内部，并且在未尾

2.prepend():父元素将子元素追加到开头
	如：对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
	
3. appendTo():
		如：对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

4. prependTo()：
		如：对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

案例：

// <input type="button" value="将反恐放置到city的后面"  id="b1"/>
	 $("#b1").click(function () {
	 $("#city").append($("#fk"));
});

 // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
$("#b2").click(function () {
	$("#city").prepend($("#fk"));
});

兄弟层级关系：

1.after():添加元素到元素后边
	如：对象1.after(对象2)：将对象2添加到对象1的后边，对象1和对象2是兄弟关系
	
2.before():添加元素到元素前面
	如：对象1.before(对象2)：将对象2添加到对象1的前面，对象1和对象2是兄弟关系
	

7. insertAfter()
	如：对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
	
8. insertBefore()
	如：对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

案例：

<script type="text/javascript">
			 // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
			 $("#b3").click(function () {
				 $("#tj").after($("#fk"));
			 });

			 // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
			 $("#tj").before($("#fk"));
		 });
	</script>
	


<script type="text/javascript">
		 $(function () {
			 // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
			 $("#b1").click(function () {
				 $("#city").append($("#fk"));
			 });
			 // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
			 $("#b2").click(function () {
				 $("#city").prepend($("#fk"));
			 });

			 // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
			 $("#b3").click(function () {
				 $("#tj").after($("#fk"));
			 });

			 // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
			 $("#tj").before($("#fk"));
		 });
	</script>

删除和清空

1.remove():移除元素
	对象.remove()：将对象删除掉【谁调用删除谁】
	
2.empty():清空元素的所有后代元素
	对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

remove()代表是谁调用删除谁

<script type="text/javascript">
   $(function () {
      // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
      $("#b1").click(function () {
         $("#bj").remove();//表示谁调用删除谁
      });
      // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
      $("#b2").click(function () {
         $("#city").empty();//表示删除所有子标签，但是自己的标签和属性和值都保存
      });
   })
</script>
昱晟168
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网络技术----JQuery、axios-fecth、async-await
Meat_doll的博客
08-09 287
知识点
JQuery基础
weixin_47267628的博客
04-27 1392
JQuery 概念：一个JavaScript框架，简化JS开发，jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。 快速入门 步骤： 下载JQuery 导入JQu
jquery 加载等待效果
mengzhengjie的专栏
12-01 498
http://blog.csdn.net/pengpegv5yaya/article/details/11971623 [javascript] view plaincopy var dates = this.options.form.getWidgetByName("dates").getValue();     $.ajax({   
使用await/async函数代替jquery的ajax函数
缪子龙的博客
08-15 5171
其实在10年前,我读大学的期间,感觉jquery的ajax太好用了,但是随着时代的发展,JS的坑点越来越明显,其中一点就是地狱回调的问题,好在es7中提出了await/async函数 本文将jquery中的ajax转化成使用await/async函数的使用方式 首先需要定义一个函数,用于返回Promise类型的对象,接着需要使用resolve和reject函数用于异步处理结果 func...
jquery 等待效果
dreamparks的专栏
12-15 5566
mask.cs: .loadmask {     z-index: 100;     position: absolute;     top:0;     left:0;     -moz-opacity: 0.5;     opacity: .50;     filter: alpha(opacity=50);     background-color: #CCC;
jQuery基础
12-10
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。
Jquery基础
12-13
Jquery基础及个人心得，选择器，常用方法、监听事件，event事件：阻止默认事件
jQuery基础教程
07-22
资源名称：jQuery基础教程资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
async_await封装JQuery的Ajax请求,解决多层回调问题
菜鸟记录
09-25 1131
⏹async_await封装jQuery的Ajax请求
使用promise封装jquery的ajax来实现async和await方式
醉逍遥neo的博客
03-30 4808
promise是es6里用来解决回调地狱的方案，本质上只是让代码换了个书写形式，由异步形式换成可读性更好的“同步”形式。 使用jquery的ajax时，有时会遇到要在响应结果里做复杂操作的场景，这时候代码写起来就比较繁琐，可维护性不好，而如果使用es7的async、await方法就能大大提高代码质量，但是async和await也是要基于promise才能实现，所以就要对jquery的ajax做一个...
jQuery
weixin_44892520的博客
09-16 319
1. window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个的。 2. 执行时机不同：jQuery入口函数要快于window.onload.` jQuery入口函数要等待页面上dom树加载完后执行；window.onload要等待页面上所有资源（dom树/外部css,js链接，图片）都加载完毕后执行。`
jquery实现页面等待时的交互效果
hudeyong926的专栏
07-18 674
前端在请求后台有时候需要较长的一段时间，如果不给不用户一些提示性的消息，如正在加载之类的，用户可能会以为页面已死，所以还是得简单的做点交互才行。 思路详解： 在页面加载前就先加载一个div罩，等待页面全部加载完成后，关闭此div罩 .spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s inf
异步函数 async/awit
qq_38796823的博客
03-05 7647
1. 概念 async/await是es8的规范 async 后面一般跟一个函数，也就是async一般跟在function前。 await必须放在aysnc里面的函数体范围内 await后面应该跟一个promise对象 当使用了async/await后，程序流程就是：当执行到async/await程序时，进入async标识的函数体中，然后直到遇到了await，然后让await后面的代码执行（一般...
await
Oh_My_Godjun的博客
05-22 658
function sleep(ms) { return new Promise((resolve) =&gt; { $.ajax({ url:"http://crawlerapi.buji.net.cn/api/Crawler/projects?pageIndex=1&amp;pageSize=10", async:true,...
jQuery判断页面加载完成（DOM构建完成）
qq_45661948的博客
08-18 1294
1、$(function(){ 　　$("#a").click(function(){ 　　　　//adding your code here 　　}); }); 2、$(document).ready(function(){ 　　$("#a").click(function(){ 　　　　//adding your code here　　 　　}); }); 3、window.onload = function(){ 　　$("#a").click(function(){ 　　　　//adding .
async与await
qq_54250695的博客
02-18 708
一、async和await promise使用.then链式调用，但也是基于回调函数 async+await更加优雅的异步编程的写法 1.消灭异步回调的终极武器， 2.它是同步语法，也就是同步语法写异步代码 案例: async与await封装ajax请求 ...
jQuery页面加载完毕后执行事件
热门推荐
数字成都
03-15 4万+
首先最简单的方法。jquery的一种简写形式： alert("页面加载完成！")； }); 其对应的完整形态为： $(document).ready(function(){ alert("页面加载完成！")； }); 原生JS方法： window.function(){ alert("页面加载完成！")； } 这几种方法在功能上的效果是一样的，但是三者还是有一...
javascript中async、await的使用
intrwins的专栏
06-29 231
我的理解：async是异步的意思，在函数前面加async就是异步的异步，就成同步了，因为js函数本身就是异步的。而await就是使async函数实现异步的标志。
jquery基础教程
最新发布
09-28
下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值