jQuery知识点总结

最新推荐文章于 2024-05-07 14:42:48 发布
最新推荐文章于 2024-05-07 14:42:48 发布
阅读量121 收藏 1
点赞数
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66254106/article/details/132900125
版权

一、jQuery介绍

1.jQuery引入

1.把外部的jQuery文件复制到当前项目中

2.在html项目中使用script标签引入外部的jQuery

二、jQery选择器

1.基本选择器

选择器名称语法解释
标签选择器(元素选择器)$("标签名称")获得所有匹配标签名称的元素
id选择器$("#id的属性值")获得与指定id属性值匹配的元素
类选择器$(".class的属性值")获得与指定的class属性值匹配的元素
例：点击按钮改变背景颜色：给jQery添加一个点击事件
​
1.获取元素选择器   
​
var $div = $("$div")
​
2.给按钮添加鼠标点击事件，jQery中都封装了函数，事件名称都去掉了on,
​
鼠标点击事件:
​
click(function(){
    事件的响应函数
}
​
$div.click(function(){
​
//在事件中改变背景色
​
//在jQery当中，把获取样式和设置样式都封装为了函数
//获取样式：jQery对象.css("样式名称")；
//设置样式: jQery对象.css("样式名称","样式的属性值")；
​
$("#one").css("bachground-color","red");
})

2.层级选择器

语法：

描述语法解释
获取A内部所有的B元素$("A B")后代选择器(包含子孙)
获取A元素下面所有的B子元素$("A >B")只有儿子，没有孙子
获取A元素同级下一个B元素$("A +B")下一个兄弟
获取A元素同级后面所有的B元素$("A ~B")后面的所有兄弟
获取A元素的同级B元素$("A").siblings("B")获取所有兄弟

3.属性选择器

语法：

描述语法
获取有属性的元素$("A[属性名]")
获取属性名等于值元素$("A[属性名='值']")
复合属性选择器，多个属性同事过滤$("A[属性名!='值']...[属性名!='值']")
获取属性名不等于值元素$("A[属性名!='值']")
获取属性名以值开头的元素$("A[属性名^='值']")
获取属性名以值结尾的元素$("A[属性名$='值']")
获取属性名含有值的元素$("A[属性名*='值']")

4.基本过滤选择器

描述语法
获取选择的元素中的第一个元素:first
获取选择的元素中的最后一个元素:last
不包括指定内容的元素(取反):not(selecter)
偶数，从0开始计数:even
奇数，从0开始计数:odd
指定索引(index)元素:eq(index)
大于指定索引元素:gt(index)
小于指定索引元素:lt(index)
获得标题，固定写法(<h1>/<h2>...):header

三、基本操作

1.操作内容

jquery原生js语法描述
html（）innerHTML$(("选择器").html())获取内容
text（）innerText$(("选择器").text())获取文本
val（）value$(("标签/").html())获取标签的值
$("标签).eq(索引值).val("要替换的内容")修改标签中的值

 2.操作属性

attr():操作自定义属性
    设置标签状态的语法：
     例：<button id="mybut"></button>
     $("#mybut").attr("disabled",true)
prop():操作原生属性

两者的区别： 

attr()和prop()是在jQuery中用于操作元素属性（attribute）和属性值（property）的方法。它们之间的区别如下：

attr()方法：

attr()方法用于获取或设置元素的HTML属性，例如src、href、class等。
它适用于处理HTML属性，无论是标准属性还是自定义属性。
如果要获取属性的值，可以使用attr()方法而不需要传递第二个参数。
如果要设置属性的值，需要传递两个参数，第一个参数是属性名，第二个参数是属性值。
使用attr()方法设置属性时，会直接修改DOM元素的HTML属性，并不会更新元素的当前状态。

示例：

javascript
// 获取属性值
var src = $("img").attr("src");

// 设置属性值
$("img").attr("src", "new-image.jpg");
prop()方法：

prop()方法用于获取或设置元素的属性值，例如checked、disabled、value等。
它适用于处理元素的属性，如布尔属性（boolean attributes），例如checked、disabled等。
如果要获取属性的状态（如是否被选中、是否禁用等），可以使用prop()方法而不需要传递第二个参数。
如果要设置属性的状态，可以传递两个参数，第一个参数是属性名，第二个参数是布尔值。
使用prop()方法设置属性时，会同时更新DOM元素的属性和当前状态。
示例：

javascript
// 获取属性状态
var checkedStatus = $("input[type='checkbox']").prop("checked");

// 设置属性状态
$("input[type='checkbox']").prop("checked", true);
需要注意的是，attr()和prop()的使用方法可能会根据具体情况而有所不同。在处理标准属性时，attr()和prop()通常可以互换使用，但在处理布尔属性时，更推荐使用prop()方法，因为它更符合逻辑。此外，一些特殊属性可能只能使用其中一种方法才能正常工作，所以需要根据具体要操作的属性来选择使用适当的方法。

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery-3.7.1.js"></script>
	<style>
		
		
	</style>
	<body>
		
		<div id="box"  index="1">1111111</div>
		<button id="mybut">点击</button>
	</body>
	<script>
		
		// 将按钮的状态更改
		$("#mybut").attr("disabled",true)
		// $("#mybut").attr("disabled",false)
		
		/*
		attr():操作自定义属性
		prop():操作原生属性
		
		*/
	   
	   //原生attr()
	   
	   // console.log($("#box").attr("id"));  //获取原生
	   // console.log($("#box").attr("id","box2"));  //设置原生
	   
	   //自定义
	   
	   // console.log($("#box").attr("index"));  //获取自定义
	   // console.log($("#box").attr("index","2"));  //设置自定义
	   
	   // 移除自定义
	   // console.log($("#box").removeAttr("index"));  //移除自定义
	   //移除原生
	   // console.log($("#box").removeAttr("id"));   //移除原生
	
	
	   // //原生prop()
	   
	   // console.log($("#box").prop("id"));  //获取原生
	   // console.log($("#box").prop("id","box2"));  //设置原生
	   
	   // //自定义(不可)  
	   
	   // console.log($("#box").prop("index"));  //获取自定义    undefind
	   // console.log($("#box").prop("index","2"));  //设置自定义   会加到原生dom节点的属性上，没有加到标签的节点上
	   
	   
	   // console.log($("#box").prop("index"));  //获取自定义 
	   
	   // 移除自定义(不可)
	   // console.log($("#box").removeProp("index"));  //移除自定义
	   
	   // console.log($("#box").prop("index"));  //获取自定义 
	   
	   //移除原生
	    // console.log($("#box").removeProp("id"));   //移除原生
	   
	   
		
	</script>
</html>
 prop设置自定义：

 3.操作偏移量

js中：
 offsetLeft `和` offset Top`是用来获取元素相对于其父元素的左偏移量和上偏移量的属性。
 offsetLeft:表示元素的左边框相对于其父元素的左边框的距离
 offsetTOP:表示元素的上边框相对于其父元素的上边框的距离

jQuery:
 offset(): 距离文档流左上角的left，top，如果传参数，就是设置
 position(): 有定位的元素的left,top(不支持设置)

代码： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery-3.7.1.js"></script>
	<style>
		*{
			margin: 0;
		    padding:0;
		}
		
		#box{
			width: 100px;
			height: 100px;
			margin: 50px;
			background-color: aquamarine;
			position: relative;
			
		}
		
		p{
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: red;
			left: 30px;
			top: 10px;
		}
	</style>
	<body>
		<div id="box">
			<p>1111</p>
			</div>
	</body>
	<script>
		/*
		 offsetLeft:
		 offsetTOP:
		      
	    jQuery:
		
		  offset(): 距离文档流左上角的left，top，如果传参数，就是设置
		  position(): 有定位的元素的left,top(不支持设置)
		*/
	   
	//    console.log($("#box").offset());   //获取值
	//    //修改值
	//    $("#box").offset({
	// 	   left:100,
	// 	   top:100
	//    })
	//    console.log($("#box").offset());   //获取值
	// console.log($("p").offset());
	
	// $("p").offset({
	// 		   left:100,
	// 		   top:100
	// })
	// console.log($("p").offset());
	
	
	console.log($("p").position());
	// 不支持设置
	$("p").position({
			   left:100,
			   top:100
	})
	console.log($("p").position());
	 </script>
</html>

 4.获取元素的尺寸

语法(宽高)描述补充
width() 、 height()内容的宽高样式设为display:none也可以获取到宽高
innerWidth()、innerHeight()内容的宽高+padding
outerWidth() 、outerHeight()内容的宽高+padding+border
outerWidth(true) 、outerHeight(true)内容的宽高+padding+border+margin方法里面传参数表示计算margin值
 代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery-3.7.1.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		
		#box{
			width: 100px;
			height: 100px;
			background-color: aquamarine;
			padding: 10px;
			border: 2px solid red;
			margin: 100px;
			/* display: none; */
		}
		
	</style>
	<body>
		
		<div id="box"></div>
	</body>
	<script>
		// 内容的宽高      width()      height()     样式设为display:none也可以获取到宽高
		// console.log($("#box").width(),$("#box").height());
		// 内容的宽高+padding        innerWidth()      innerHeight()
		console.log($("#box").innerWidth(),$("#box").innerHeight());
		
		// 内容的宽高+padding+border        outerWidth()      outerHeight()
		console.log($("#box").outerWidth(),$("#box").outerHeight());
		
		// 内容的宽高+padding+border+margin       outerWidth(true)      outerHeight(true)   方法里面传参数表示计算margin值
		console.log($("#box").outerWidth(true),$("#box").outerHeight(true));
	</script>
</html>

5.事件

 事件：
          
           绑定：jquery默认隐式迭代
           
           on：每次都触发   (封装了事件的方法)   可传参   事件委托
           one:只能触发一次
           
           绑定多个事件：
           例：$("ul li").on("click",A).on("click",B)
           
          jquery中可以(链式调用) 但是不可委托（可传参）
          
           解绑：
           off() 可进行解绑
           
           off():解绑所有事件
           off("click"):解绑click事件
           
           解绑多个事件：off("事件"，事件名称):解绑某个click事件

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../jquery-3.7.1.js"></script>
		<style>
			/* #box{
				
			} */
		</style>
	</head>
	<body>
		
		<!-- <button id="box">点击</button> -->
		
		<ul>
			<li>
				我是第一个
				<button>delete</button>
				</li>
			<li>
				我是第二个
				<button>delete</button>
				</li>
			<li>
				我是第三个
				<button>delete</button>
				</li>
			<li>我是第四个</li>
			<li>我是第五个</li>
		</ul>
		
	</body>
	<script>
		/*
		  事件：
		  
		   绑定：jquery默认隐式迭代
		   
		   on：每次都触发   (封装了事件的方法)   可传参   事件委托
		   one:只能触发一次
		   
		   绑定多个事件：
		   例：$("ul li").on("click",A).on("click",B)
		   
		  jquery中可以(链式调用) 但是不可委托（可传参）
		  
		   解绑：
		   off() 可进行解绑
		   
		   off():解绑所有事件
		   off("click"):解绑click事件
		   
		   解绑多个事件：off("事件"，事件名称):解绑某个click事件
		
		*/
	   // 需要传两个参数  性能较差
	   // $("ul li").on("click",function(){
		  //  alert(111);
	   // })
	   
	   // 解绑========================================
	   
	   // $("ul li").off("click")
	   
	   // 利用事件委托
	   // $("ul").on("click","button",function(){
	   // 		   alert(111);
			 //    console.log(this.parentNode.remove());
	   // })
	   
	   // 传参数时，参数必须作为对象进行传递
	   // $("ul").on("click",{
		  //  name:"张三",
		  //  age:18,
		  //  gender:"男"
	   // },function(e){
		   
		  //  console.log(e);
		  //  // console.log(this.parentNode.remove());
	   // })
	   
	   
	   // 事件传参+ 事件委托
	   
	   // $("ul").on("click","button","hello",function(e){
	   		   
	   // 		   console.log(e);
	   // 		   // console.log(this.parentNode.remove());
	   // })
	   
	   
	   
	   // one    只触发一次    click:每次都触发
	   
	   // $("ul").one("click","button",function(){
		   
		  //  console.log("只触发一次");
		   
	   // })
	   
	   
	   // jquery  (链式调用)  不可委托（可传参）
	   
	   // $("ul").click("hello",function(e){
		  //  console.log("我是点击",e);
	   // }).mouseover(function(){
		   
		  //  console.log("mouseover");
	   // })
	   
	   
	   // $("ul").change(function(){
	   // 		   console.log("我是change");
	   // })
	   
	   // $("ul").mouseup(function(){
	   // 		   console.log("我是鼠标抬起");
	   // })
	   
	   // $("ul").mousedown(function(){
	   // 		   console.log("我是鼠标按下");
	   // })
	   
	   
	   
	   // 先在全局定义两个函数
	   
	   
	   // function A(){
		  //  console.log("AAAAA");
	   // }

    //    function B(){
    //    		   console.log("BBBB");
    //    }
	   
	   
	   // $("ul li").on("click",A).on("click",B)
	   
	   // // 解绑一个函数
	   
	   // $("ul li").off("click",A)
	</script>
</html>

6.操作节点

1.创建节点

创建:
          
          （会往原来子元素的后面追加）
          
              方法一：append()
              方法二：appendTo()
              
           （会往原来子元素的前面追加）
              
              方法一：prepend()
              方法二：prependTo()
              
             （会往原来兄弟元素的前面追加） 
             
             方法一：before()
             方法二：insertBefore()
              
              （会往原来兄弟元素的后面追加）
              方法一：after()
              方法二：insertAfter()
 
创建+插入：append()  如果只创建不插入的话，只会创建在内存中，只有再插入才会插入到页面

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../jquery-3.7.1.js"></script>
		<style>
			#box{
				width: 500px;
				height: 500px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div id="box">
			111111
		</div>
	</body>
	<script>
		/*
		  节点：
		  // 创建:
		  
		  （会往原来子元素的后面追加）
		  
		      方法一：append()
			  方法二：appendTo()
			  
		   （会往原来子元素的前面追加）
		      
			  方法一：prepend()
			  方法二：prependTo()
			  
			 （会往原来兄弟元素的前面追加） 
			 
			 方法一：before()
			 方法二：insertBefore()
			  
			  （会往原来兄弟元素的后面追加）
			  方法一：after()
			  方法二：insertAfter()
		*/
	   // 创建+插入：append()  如果只创建不插入的话，只会创建在内存中，只有再插入才会插入到页面
	   
	   // 方法一：
	   
	   // var cdiv = $("<div>我是一个div</div>")
	   
	   // var cdiv = $("<div>").html("<b>我是一个b标签</b>").addClass("div").css("background","red")
	   
	   // $("#box").append(cdiv)
	   
	   
	   // 方法二：
	   
	   // $("<div>").html("<b>我是一个b标签</b>").addClass("div").css("background","red").appendTo($("#box"))
	   
	   
	   
	   // 元素前面追加
	   
	   // 方法一：prepend
	   
	   // var cdiv = $("<div>我是一个div</div>")
	   
	   // var cdiv = $("<div>").html("<b>我是一个b标签</b>").addClass("div").css("background","red")
	   
	   // $("#box").prepend(cdiv)
	   
	   
	   // 方法二：prependTo
	   
	   // $("<div>").html("<b>我是一个b标签</b>").addClass("div").css("background","red").prependTo($("#box"))
	   
	   // （会往原来兄弟元素的前面追加）
	    
	 
	   // 方法一：
	   // var cdiv = $("<div>我是一个div</div>")
	   
	   // $("#box").before(cdiv)
	   
	   // 方法二：
	   // var cdiv = $("<div>我是一个div</div>")
	   
	   // cdiv.insertBefore($("#box"))
	    // （会往原来兄弟元素的后面追加）
		
		// 方法一：
		// var cdiv = $("<div>我是一个div</div>")
		
		// $("#box").after(cdiv)
		
		// 方法二：
		// var cdiv = $("<div>我是一个div</div>")
		
		// cdiv.insertAfter($("#box"))
	</script>
</html>
 2.替换节点

替换：replaceWith() 支持多个替换

replaceWith()

replaceAll()

代码： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../jquery-3.7.1.js"></script>
		<style>
			#box{
			
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p>11111111</p>
			<span>22222222</span>
			<div>3333333</div>
			<div>3333333</div><div>3333333</div><div>3333333</div><div>3333333</div><div>3333333</div>
		</div>
	</body>
	<script>
		/*
		  
		  节点：
		  // 替换：replaceWith() 支持多个替换
		
		*/

// replaceWith() 支持多个替换
		// var cdiv = $("<div>我是一个div</div>")
		
		// $("#box div").replaceWith(cdiv)
		
		// replaceAll（）  支持多个替换
		var cdiv = $("<div>我是一个div</div>")
		
		cdiv.replaceAll($("#box div"))
	</script>
</html>
 3.克隆节点

 克隆：
clone().insertAfter()  克隆到.....之后 
clone()可接收参数   控制是不是克隆事件
       
第一个参数写为true  相当于把元素的点击事件也克隆
第二个参数写为false  相当于把元素的点击事件也克隆，但子元素点击事件不生效
 两个参数写为false  相当于把元素的点击事件也克隆，但该元素点击事件都不会生效
第一个参数写为true 第二个参数写为true  无意义

 代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../jquery-3.7.1.js"></script>
		<style>
			#box{
				background-color: aquamarine;
			}
			#center{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li>111</li>
				<li>222</li>
				<li>333</li>
			</ul>
			
		</div>
		
		<div id="center">
			<ul>
				<li>111</li>
				<li>222</li>
				<li>333</li>
			</ul>
			
		</div>
	</body>
	<script>
		/*
		  节点：

		  // 克隆：
		
		*/
	   
	   // clone().insertAfter()  克隆到.....之后 
	   // clone()可接收参数   控制是不是克隆事件
	   
	   // 第一个参数写为true  相当于把元素的点击事件也克隆
	   // 第二个参数写为false  相当于把元素的点击事件也克隆，但子元素点击事件不生效
	    // 两个参数写为false  相当于把元素的点击事件也克隆，但该元素点击事件都不会生效
		// 第一个参数写为true 第二个参数写为true  无意义
		
	   // $("#box").on("click",function(){
	   // 		  //  alert(111);
			 //  console.log("box click");
	   // })
	   
	   // $("#box").clone(true).prop("id","box2").insertAfter($("#center"))
	   
	   
	   // $("#box ul li").on("click",function(){
	   // 		  //  alert(111);
	   // 			  console.log("ul click");
	   // })
	   
	   // $("#box").clone(true,false).prop("id","box2").insertAfter($("#center"))
	   
	   // $("#box ul li").on("click",function(){
	   // 		  //  alert(111);
	   // 			  console.log("ul click");
	   // })
	   
	   // $("#box").clone(false,false).prop("id","box2").insertAfter($("#center"))
	   

	</script>
</html>
4.删除节点

删除：
删除自己：remove()
清空内部：empty()

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../jquery-3.7.1.js"></script>
		<style>
			#box{
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>11111</div>
			<div>22222</div>
			<div>33333</div>
			<div>44444</div>
			<div>55555</div>
		</div>
	</body>
	<script>
		/*
		  
		  节点：
		  
		 删除：
		 删除自己：remove()
		 清空内部：empty()

		*/
		
		// 删除
		// $("#box div").eq(0).remove()
		$("#box").empty()
	</script> 
</html>

 四、ajax请求

json-server在黑窗口下载并如何在HBuild x 中使用流程：

json-server在黑窗口下载并如何在HBuild x 中使用流程

要在HBuilder X中使用json-server，你需要按照以下步骤进行操作：

  1. 下载Node.js：首先，确保你的计算机已安装Node.js。你可以在Node.js官网（https://nodejs.org）上下载适合你操作系统的最新版本。

  2. 安装json-server：打开命令行终端（黑窗口），运行以下命令来全局安装json-server：

 
 
npm install -g json-server 
 
 
这会将json-server安装到全局环境中，允许你在任何地方使用该命令。
 
 
  1. 创建JSON数据文件：在你的项目目录中，创建一个名为db.json（或其他名称）的文件，并在其中编写你的JSON数据。示例：
 
 
json
 
 
{ "users": [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ], "posts": [ { "id": 1, "title": "Post 1", "author": 1 }, { "id": 2, "title": "Post 2", "author": 2 } ] } 
 
 
这是一个简单的帖子和用户数据的示例。
 
 
  1. 启动json-server：在命令行终端中，进入你的项目目录，并运行以下命令启动json-server：
 
 
json-server --watch db.json 
 
 
这会启动json-server，并监视db.json文件中的数据变化。
 
 
  1. 访问API接口：json-server会在默认情况下运行在http://localhost:3000，你可以通过打开浏览器并访问http://localhost:3000来访问你的JSON数据。例如，你可以访问http://localhost:3000/users来获取所有用户的列表。
 
 
在HBuilder X中使用json-server时，你可以通过Ajax或其他HTTP请求的方式来访问json-server提供的API接口，获取和操作数据。
 
 
这是json-server在HBuilder X中的基本使用流程。你可以根据自己的需求和项目来配置和扩展json-server。更多关于json-server的详细信息和用法，请参考json-server的官方文档（https://github.com/typicode/json-server）。
 

 

代码：
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery-3.7.1.js"></script>
	<style>
		
	</style>
	<body>
		<button id="myget">get</button>
		<button id="mypost">post</button>
		<button id="mypatch">patch</button>
		<button id="myput">put</button>
		<button id="mydelete">delete</button>
		
		
	</body>
	<script>
		/*
		 ajax请求：
		 $.get()
		 $.post()    
		*/
	   
	   // get  请求
	   
	   // $("#myget").click(function(){
		  //  $.ajax({
			 //   url:"http://localhost:3000/users",
		  //  // async:true     是否异步
		  //  data:{
			 //   id:1
		  //  },
		  //  method:"get",
		  //  success:function(res){
			 //   console.log(res);
		  //  },
		  //  error:function(){
			   
		  //  },
		  //  timout:500   //超过请求时间就会报错  
		  //  // headers:{
			   
		  //  // }  请求头
		  //  // dataType:     返回的数据类型  如果是字符串自动不解析为json 
		  //                           //     如果是json字符串则会自动解析为json对象
		  //  })
		   
	   // })
	   
	   
	   // post请求
	   
	   // $("#mypost").click(function(){
	   // 		   $.ajax({
	   // 			   url:"http://localhost:3000/posts",
	   // 		   // async:true     是否异步
	   // 		   data:{
				//    "title":"Post 4",
				//    "author": 4
	   // 		   },
	   // 		   method:"post",
	   // 		   success:function(res){
	   // 			   console.log(res);
	   // 		   },
	   // 		   error:function(){
	   			   
	   // 		   },
	   // 		   timout:1000   //超过请求时间就会报错  
	   // 		   // headers:{
	   			   
	   // 		   // }  请求头
	   // 		   // dataType:     返回的数据类型  如果是字符串自动不解析为json 
	   // 		                            //     如果是json字符串则会自动解析为json对象
	   // 		   })
	   		   
	   // })
	   
	   
	   // put请求    更新       指定好要更新那个数据的id
	   
	   
	   // $("#myput").click(function(){
	   // 		   $.ajax({
	   // 			   url:"http://localhost:3000/put/1",
	   // 		   // async:true     是否异步
	   // 		   data:{
	   // 				   "title":"Post 4",
	   // 				   "author": 4
	   // 		   },
	   // 		   method:"put",
	   // 		   success:function(res){
	   // 			   console.log(res);
	   // 		   },
	   // 		   error:function(){
	   			   
	   // 		   },
			   
	   // 		   //timout:1000   //超过请求时间就会报错  
	   // 		   // headers: {
	   // 		   //   'Content-Type': 'application/json'
	   // 		   // }  // 请求头
	   // 		   // dataType:     返回的数据类型  如果是字符串自动不解析为json 
	   // 		                            //     如果是json字符串则会自动解析为json对象
	   // 		   })
	   		   
	   // })
	   
	   
	   // // patch请求   可自己进行插值更新
	   
	   // $("#mypatch").click(function(){
	   // 		   $.ajax({
	   // 			   url:"http://localhost:3000/patch/1",
	   // 		   // async:true     是否异步
	   // 		   data:{
	   // 				   "title":"Patch"
	   // 		   },
	   // 		   method:"patch",
	   // 		   success:function(res){
	   // 			   console.log(res);
	   // 		   },
	   // 		   error:function(){
	   			   
	   // 		   },
	   			   
	   // 		   //timout:1000   //超过请求时间就会报错  
	   // 		   // headers: {
	   // 		   //   'Content-Type': 'application/json'
	   // 		   // }  // 请求头
	   // 		   // dataType:     返回的数据类型  如果是字符串自动不解析为json 
	   // 		                            //     如果是json字符串则会自动解析为json对象
	   // 		   })
	   		   
	   // })
	   
	   
	   // delete请求 
	   
	   // $("#mydelete").click(function(){
	   // 		   $.ajax({
	   // 			   url:"http://localhost:3000/patch/1",
	   // 		   // async:true     是否异步
	   // 		   // data:{
	   // 				 //   "title":"Patch"
	   // 		   // },
	   // 		   method:"delete",
	   // 		   success:function(res){
	   // 			   console.log(res);
	   // 		   },
	   // 		   error:function(){
	   			   
	   // 		   },
	   			   
	   // 		   //timout:1000   //超过请求时间就会报错  
	   // 		   // headers: {
	   // 		   //   'Content-Type': 'application/json'
	   // 		   // }  // 请求头
	   // 		   // dataType:     返回的数据类型  如果是字符串自动不解析为json 
	   // 		                            //     如果是json字符串则会自动解析为json对象
	   // 		   })
	   		   
	   // })
	   
	   
	   
	   
	   
	   // promise==============================================
	   
	   // get  请求
	   
	   // $("#myget").click(function(){
	   // 		   $.ajax({
	   // 			   url:"http://localhost:3000/users",
	   // 		   // async:true     是否异步
	   // 		   data:{
	   // 			   id:1
	   // 		   },
	   // 		   // method:"get",
	   // 		   // headers:{
	   			   
	   // 		   // }  请求头
	   // 		   }).then(res=>{
				//    console.log(res);
			 //   }).catch(err=>{
				//    console.log(err);
			 //   })
	   		   
	   // })
	   
	   
	   
	   //  使用async   await  同步代码执行异步操作
	   
	   // get  请求
	   
	   // $("#myget").click(async function(){
	   // 		var res= await $.ajax({
	   // 			   url:"http://localhost:3000/users",
	   // 		   // async:true     是否异步
	   // 		   data:{
	   // 			   id:1
	   // 		   },
	   // 		    method:"get",
	   // 		   // headers:{
	   			   
	   // 		   // }  请求头
	   // 		   })
			   
			 //   console.log(res);
	   		   
	   // })
	   
	   
	   // 调用get()和post()
	   
	   // $.get("http://localhost:3000/users",{
		  //  id:1
	   // },function(res){
		  //  console.log(res);
	   // })
	   
	   // promise
	   
	   // $.get("http://localhost:3000/users",{
	   // 		   id:1
	   // }).then(res=>{
	   // 		   console.log(res);
	   // })
	   
	   
	   
	   // post请求   $.post（）
	   
	 //   $("#mypost").click(async function(){
	 //   		var res = await $.post("http://localhost:3000/posts",{
		// "title":"Post 3",
		//    "author": 4		
		// 	})
			
		// 	console.log(res);
	   		   
	 //   })
	   
	
	   
	</script>
</html>

                

        

        

    




    

      

        

            

              
                
                  liujingjing3127
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JQuery 入门 - 附案例代码

				
			

			

				

					wuyxinu的博客
				

				

					12-23
					
					6万+
					
				

			

		

		

			
				
为什么要学jquery
使用javascript开发过程中，有许多的缺点：

查找元素的方法单一，麻烦。
遍历数组很麻烦，通常要嵌套一大堆的for循环。
有兼容性问题。
想要实现简单的动画效果，也很麻烦
代码冗余。

体验jquery的使用
/*
* 1. 查找元素的方法多种多样，非常灵活
* 2. 拥有隐式迭代特性，因此不再需要手写for循环了。
* 3. 完全没有兼容性问题。
* 4. 实现动...

			
		

	



                

              
                



	

		

			

				
					
一个小时学会jQuery<最通俗易懂的讲解>

				
			

			

				

					chetianyao8457的博客
				

				

					08-07
					
					1543
					
				

			

		

		

			
				
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 
其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 
另外，阅读...

			
		

	



                


  
              

                


	

		

			

				
					
2024年最新jQuery 基础知识总结（超级详细），超通俗解析

					
最新发布

				
			

			

				

					2401_84617533的博客
				

				

					05-07
					
					900
					
				

			

		

		

			
				
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

			
		

	





	

		

			

				
					
jQuery基础知识汇总

				
			

			

				

					z2431435的博客
				

				

					08-25
					
					1625
					
				

			

		

		

			
				
jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

			
		

	



		

			
		



	

		

			

				
					
jQuery基础知识点汇总

				
			

			

				

					heliuerya的博客
				

				

					05-31
					
					1448
					
				

			

		

		

			
				
class 选择器：   语法：$(".class值")  根据 class样式值 查找标签对象  class表示css中的样式，这是使用样式的名称定位dom对象。组合选择器：      语法：$("#id,.class,标签名") 是多个被选对象之间使用逗号分隔后形成的选择器，可以组合id，class，标签名等，举例：$("body" > "div");$("选择器").attr("username","张三")  //设置数组中的所有dom对象的username属性值为"张三"。

			
		

	





	

		

			

				
					
JQuery主要知识点总结

				
			

			

				

					Getoveritx的博客
				

				

					07-13
					
					629
					
				

			

		

		

			
				
1、jQuery概述
1.1Javascript库
JavaScript库：即library，是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了许多预先定义好的函数在里边。
简单理解就是一个js文件，里面对原生的代码进行了封装，这样就可以快速高效的使用这些封装好的功能。
1.2、JQuery的概念
jQuery是一个快速、简洁的JavaScript库，把js里的DOM操作做了封装，我们可以快速的查询使用里面的功能。
2、jQuery的基本使用
2.1、jQuery的

			
		

	





	

		

			

				
					
jQuery 知识点 总结

				
			

			

				

					02-18
				

			

		

		

			
				
锋利jQuery 知识点 总结，囊括重点，要点

			
		

	





	

		

			

				
					
jquery知识点总结.md

				
			

			

				

					09-05
				

			

		

		

			
				
jquery

			
		

	





	

		

			

				
					
Jquery知识点总结

				
			

			

				

					01-19
				

			

		

		

			
				
Jquery的常用知识点总结，以及学习流程

			
		

	





	

		

			

				
					
JS和JQuery的知识点和用法总结与分析

				
			

			

				

					10-12
				

			

		

		

			
				
JS和JQuery的知识点和用法总结与分析
JS和JQuery的知识点和用法总结与分析

			
		

	





	

		

			

				
					
jquery知识点整理

				
			

			

				

					07-19
				

			

		

		

			
				
关于jquery的基本东西，相关的方法，属性等

			
		

	





	

		

			

				
					
JQuery基础知识点汇总（代码+知识点+xmind思维导图）

				
			

			

				

					10-15
				

			

		

		

			
				
代码+知识点汇总，采用xmind框图导出，知识点简单明了，无论是学过还是没学过，通过这个资料过一遍绝对对Jquery整体清楚明了。后面附带了9个基本的jquery实例，进一步加深用jquery的理解。（全部实例（30个）可另外下载我的另一个jquery实例文件）

			
		

	





	

		

			

				
					
jQuery基础知识点总结(必看)

				
			

			

				

					10-22
				

			

		

		

			
				
在本文中，我们将深入探讨 jQuery 的基础知识点，帮助开发者更好地理解和运用这一强大的工具。  1. **jQuery 入口函数与 JavaScript 入口函数的区别**  - **书写个数不同**：JavaScript 的入口函数通常是 `window....

			
		

	





	

		

			

				
					
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选

				
			

			

				

					a2868221132的博客
				

				

					03-27
					
					5212
					
				

			

		

		

			
				
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选

			
		

	





	

		

			

				
					
jQuery

				
			

			

				

					water7_melon7的博客
				

				

					06-03
					
					136
					
				

			

		

		

			
				
jQuery

			
		

	





	

		

			

				
					
JQuery 知识点总结

				
			

			

				

					znhyXYG的博客
				

				

					12-06
					
					1813
					
				

			

		

		

			
				
概念：


	JavaScript库

	
		把一些浏览器兼容性，或者是一些常用的函数封装到一个js文件中，就是JavaScript库
		
		
		我们自己封装的animate.js，就是JavaScript库
		
	
常见的JavaScript库： jQuery、Prototype、MooTools

JQuery的优点


	强大的选择器
	
	
	链式编程
	
	
	隐式迭代
	
	
	丰富的插件，可以自己编写插件
	
	
	开源
	
JQ中的顶级对象

jQuery中的顶级对象是$或jQ..

			
		

	





	

		

			

				
					
"jQuery知识点总结：初始化与方法详解

				
			

			

				

					
				

			

		

		

			
				
以上是一些jQuery的知识点总结，jQuery作为一个优秀的 JavaScript 框架，可以方便地实现页面的各种动态效果和交互功能。掌握这些知识点，可以帮助前端开发者更加高效地完成工作，提升用户体验和页面的交互性。希望...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值