jQuery笔记

最新推荐文章于 2023-03-22 15:12:32 发布
最新推荐文章于 2023-03-22 15:12:32 发布
阅读量81 收藏
点赞数
分类专栏： JAVA学习全过程笔记 JavaWeb 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwerasdctds/article/details/126111562
版权

开篇基础

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作
官网地址：
https://jquery.com/ 

为什么使用 jQuery

非常重要的理由就是：它能够兼容市面上主流的浏览器，IE 和 FireFox， Google 浏览器处理 AJAX ，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX 异步对象。
其他优点：
  1. 写少代码,做多事情【write less do more】
  2. 免费，开源且轻量级的 js 库，容量很小
  3. 兼容市面上主流浏览器，例如 IE，Firefox，Chrome
  4. 能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
  5. 文档手册很全
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
  • 通过 ID 属性：document.getElementById()
  • 通过 class 属性：getElementsByClassName()
  • 通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出
错。 jQuery 分别使用 $(“#id”) , $(“.class 名 ”) , $(“ 标签名 ) 封装了上面的 js 方法。

第一个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个例子</title>
		<!-- 指定jquery的库文件位置， 使用相对路径，当前项目的js目录下的指定文件 -->
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/* 
			  1.  $(document) ,  $是jQuery中的函数名称， document是函数的参数
			       作用是 document对象变成  jQuery函数库可以使用的对象。 
			  2.  ready：是jQuery中的函数， 是准备的意思， 当页面的dom对象加载成功后
			      会执行ready函数的内容。  ready 相当于js中的onLoad事件
			  3.  function()自定义的表示onLoad后要执行的功能。
			*/
			$(document).ready(function(){
				//自定义的功能代码
				alert("Hello jQuery")
			})
			
			//和上面效果一样，一般使用这种写法（简洁方便）
			$( function(){
				//代码内容
				alert("Hello JQuery 快捷方式")
			  }    
			) 
		</script>
	</head>
	<body>
	</body>
</html>

DOM 对象

文档对象模型（ Document Object Model ，简称 DOM ），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。
通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。 DOM 对象可以使用 JavaScript 中的方法。

JavaScript 对象和 jQuery 对象

用 JavaScript 语法创建的对象叫做 JavaScript 对象 , JavaScript 对象只能调用 JavaScript 对象的 API 。
用 JQuery 语法创建的对象叫做 JQuery 对象 , jQuery 对象只能调用 jQuery 对象的 API 。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们一般是将 JavaScript 对象转化成 Jquery 对象
获取 jQuery
官网下载地址： https://jquery.com/download/

DOM 对象和 jQuery 对象

DOM 对象是用 JavaScript 语法创建的对象，也看做是 js 对象
jQuery对象就相当于数组对象，而DOM对象就是里面存放的对象，两者方法和属性使用方式不同

1.DOM 对象转换 jQuery 对象：

使用 $(DOM 对象 ) 方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以 $ 开头，这不是必须的。 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom对象转为jquery</title>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function btnClick(){
				//获取dom对象
				var obj = document.getElementById("btn");
				//使用dom的value属性,获取值
				alert("使用dom对象的属性="+obj.value)
				
				//把dom对象转jquery,使用jquery库中的函数
				var jobj = $(obj);
				//调用jquery中的函数,获取value的值
				alert( jobj.val() )
			}
			
		</script>
	</head>
	<body>
		 <input type="button" id="btn" value="==我是按钮==" onclick="btnClick()" />
	</body>
</html>

2.jQuery 对象转为 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象： get(0) 方式与下标 [0] 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function btnClick(){
				//使用jquery的语法,获取页面中的dom对象
				//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
				var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
				//alert( obj.value)
				
				var num  = obj.value;
				obj.value = num * num;
			}
			
		</script>
	</head>
	<body>
		 <div>
			 <input type="button" value="计算平方" onclick="btnClick()" /><br/>
			 <input type="text" id="txt" value="整数" />
		</div>
	</body>
</html>

选择器

选择器 : 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

基本选择器

根据 ID ， class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象 .
  • id 选择器        语法：$(“#id”)
  • class 选择器  语法：$(“.class 名称”)
  • 标签选择器     语法：$(“标签名”)
  • 所有选择器     语法：$(“*”) 选取页面中所有 DOM 对象。
  • 组合选择器     语法：$(“id,class,标签名”) 

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
			.two{
				background: gold;
				font-size: 20pt;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//id选择器
				var obj = $("#one");
				//使用jquery中改变样式的函数
				obj.css("background","red");
			}
			function fun2(){
				//使用样式选择器
				var obj = $(".two");
				obj.css("background","yellow");
			}
			function fun3(){
				//标签选择器
				var obj = $("div"); //数组有3个对象
				//jquery的操作都是操作数组中的全部成员.
				//所以是给所有的div都设置的背景色
				obj.css("background","blue");
			}
			function fun4(){
				var obj = $("*");
				obj.css("background","green");
			}
			function fun5(){
				var obj = $("#one,.two,span");
				obj.css("background","red");
				
				 //obj是一个数组, 有两个成员, 1 是span dom对象
				 //$(  obj[1] ) : jquery对象
				// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
				$(  obj[1]  ).css("background","green");//就是span
				
			}
			
			document.getElementById("one"); //js的语法规则 ,value
			$("#one"); //jquery语法
			
		</script>
	</head>
	<body>
		<div id="one">我是one的div</div><br/>
		<div class="two">我是样式是two的div</div>
		<br/>
		<div>我是没有id，class的div</div>
		<br/>
		<span class="two">我是span标签</span>
		<br/>
		<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
		<br/>
		<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
		<br/>
		<input type="button" value="使用标签选择器" onclick="fun3()" /> 
		<br/>
		<input type="button" value="所有选择器" onclick="fun4()"/>
		<br/>
		<input type="button" value="组合选择器" onclick="fun5()"/>
	</body>
</html>

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form> ，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的 
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
注意：$(":tr"): 不能用，tr 不是 input 标签
语法：$(":type 属性值")
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器 $(":type的值")
				var obj = $(":text");
				//获取value属性的值 val()是jquery中的函数, 读取value属性值
				alert( obj.val());
			}
			
			function fun2() {
				//定位radio
				var obj = $(":radio");//数组,目前是两个对象 man ,woman
				//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
				for(var i=0;i<obj.length;i++){
					//从数组值获取成员,使用下标的方式
					var  dom = obj[i];
					//使用dom对象的属性,获取value值
					alert(dom.value)
				}
			}
			
			function fun3(){
				//定位checkbox
				var obj = $(":checkbox"); //数组,有三个对象
				for(var i=0;i<obj.length;i++){
					var dom = obj[i];
					//alert(dom.value);
					//使用jqueyr的val函数, 获取value的值
					//1. 需要jquery对象
					var jObj = $(dom); // jObj 是jquery对象
					//2. 调用jquery函数
					alert("jquery的函数调用=" + jObj.val());			
				}		
			}

		</script>
	</head>
	<body>
		<input type="text" value="我是type=text" /><br/>
		<br/>
		<input type="radio" value="man" /> 男 <br/>
		<input type="radio" value="woman" /> 女 <br/>
		<br/>
		<input type="checkbox" value="bike" /> 骑行 <br/>
		<input type="checkbox" value="football" /> 足球 <br/>
		<input type="checkbox" value="music" /> 音乐 <br/>
		<br/>
		<input type="button" value="读取text的值" onclick="fun1()"/>
		<br/>
		<input type="button" value="读取radio的值" onclick="fun2()"/>
		<br/>
		<input type="button" value="读取checkbox的值" onclick="fun3()"/>
	</body>
</html>

过滤器

jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立
出现在 jquery 函数，如果使用只能出现在选择器后方

基本过滤器

  • 选择第一个 first, 保留数组中第一个 DOM 对象  语法：$(“选择器:first”)
  • 选择最后个 last, 保留数组中最后 DOM 对象      语法：$("选择器:last")
  • 选择数组中指定对象                                            语法：$(“选择器:eq(数组索引)”)
  • 选择数组中小于指定索引的所有 DOM 对象        语法：$(“选择器:lt(数组索引)”)
  • 选择数组中大于指定索引的所有 DOM 对象        语法：$(“选择器:gt(数组索引)”)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">

			$(function() {
				//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
				 $("#btn1").click(function(){
					//过滤器
					var obj = $("div:first");
					obj.css("background","red");
				}) 
				
				//绑定事件
				$("#btn2").click(function(){
					var obj = $("div:last");
					obj.css("background","green");
				})
				
				//绑定btn3的事件
				$("#btn3").click(function(){
					var obj = $("div:eq(3)");
					obj.css("background","blue");
				})
				
				$("#btn4").click(function(){
					var obj = $("div:lt(3)");
					obj.css("background","orange");
				})
				
				$("#btn5").click(function(){
					var obj = $("div:gt(3)");
					obj.css("background","yellow");
				})
				
				$("#txt").keydown(function(){
					alert("keydown")
				})
			})
			
		</script>
	</head>
	<body>
		<input type="text" id="txt" />
		<div id="one">我是div-0</div>
		<div id="two">我是div-1</div>
		<div>我是div-2
		    <div>我是div-3</div>
			<div>我是div-4</div>
		</div>
		<div>我是div-5</div>
		<br />
		<span>我是span</span>
		
		<br/>
		<input type="button" value="获取第一个div" id="btn1"/>
		<br/>
		<input type="button" value="获取最后一个div" id="btn2"/>
		<br/>
		<input type="button" value="获取下标等于3的div" id="btn3"/>
		<br/>
		<input type="button" value="获取下标小于3的div" id="btn4"/>
		<br/>
		<input type="button" value="获取下标大于3的div" id="btn5"/>
	</body>
</html>

表单对象属性过滤器

  • 选择可用的文本框     $(“:text:enabled”)
  • 选择不可用的文本框  $(“:text:disabled”)
  • 复选框选中的元素      $(“:checkbox:checked”)
  • 选择指定下拉列表的被选中元素  选择器>option:selected
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
		
			$(function() {
				 $("#btn1").click(function(){
					//获取所有可以使用的text
					var obj  = $(":text:enabled");
					//设置 jquery数组值所有dom对象的value值
					obj.val("hello");
				}) 
				
				$("#btn2").click(function(){
					//获取选中的checkbox
					var obj  = $(":checkbox:checked");
					for(var i=0;i<obj.length;i++){
						//alert( obj[i].value);
						alert(    $(obj[i]).val()  ) 
						alert(obj[i].value)
					}
				})
				
				$("#btn3").click(function(){
					//获取select选中的值
					//var obj= $("select>option:selected");
					var obj = $("#yuyan>option:selected");
					alert(obj.val());
				})
		
			})	
			
		</script>
	</head>
	<body>
		<input type="text"  id="txt1" value="text1" /><br/>
		<input type="text"  id="txt2" value="text2" disabled="true"/><br/>
		<input type="text"  id="txt3" value="text3" /><br/>
		<input type="text"  id="txt4" value="text4" disabled/><br/>
		<br/>
		<input type="checkbox" value="游泳" />游泳 <br/>
		<input type="checkbox" value="健身" checked />健身 <br/>
		<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
		<br/>
		<select id="yuyan">
			<option value="java">java语言</option>
			<option value="go" selected>go语言</option>
			<option value="python">python语言</option>
		</select>
	
		<br/>
		<input type="button" value="设置可以的text的value是hello" id="btn1"/>
		<br/>
		<button id="btn2">显示选中的复选框的值</button>
		<br/>
		<button id="btn3">显示选中下拉列表框的值</button>
	</body>
</html>

函数

1. val
操作数组中 DOM 对象的 value 属性 .
$( 选择器 ).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$( 选择器 ).val( 值 ) ：有参形式调用 ; 对数组中所有 DOM 对象的 value 属性值进行统一赋值
2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$( 选择器 ).text(): 无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$( 选择器 ).text( 值 ): 有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3.attr
对 val, text 之外的其他属性操作
$( 选择器 ).attr( “属性名” ): 获取 DOM 数组第一个对象的属性值
$( 选择器 ).attr( “属性名” , “值” ): 对数组中所有 DOM 对象的属性设为新值 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: yellow;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			//在dom对象创建好后,绑定事件
			$(function(){
				$("#btn1").click(function(){
					//val() 获取dom数组中第一个对象的value属性值
					var text = $(":text").val();
					alert(text)
				})
				
				$("#btn2").click(function(){
					//设置所有的text的value为新值
					$(":text").val("三国演义");
				})
				
				$("#btn3").click(function(){
					//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
					alert($("div").text());
				})
				
				$("#btn4").click(function(){
					//设置div的文本值
					$("div").text("新的div文本内容");
				})
				
				$("#btn5").click(function(){
					//读取指定属性的值
					alert($("img").attr("src"));
				})
				
				$("#btn6").click(function(){
					//设置指定属性的,指定值
					$("img").attr("src","img/ex2.jpg");
					//val(), text();
				})
			})
			
		</script>
	</head>
	<body>
		<input type="text" value="刘备" /><br/>
		<input type="text" value="关羽" /><br/>
		<input type="text" value="张飞" /><br/>
		<br/>
		<div>1.我第一个div</div>
		<div>2.我第二个div</div>
		<div>3.我第三个div</div>
		<br/>
		<img src="img/ex1.jpg" id="image1" />
		<br/>
		
		<input type="button" value="获取第一文本框的值" id="btn1"/> <br/> <br/>
 
		<input type="button" value="设置所有文本框的value值" id="btn2"/> <br/> <br/>
 
		<input type="button" value="获取所有div的文本值" id="btn3"/> <br/> <br/>
 
		<input type="button" value="设置div的文本值" id="btn4"/> <br/> <br/>
 
		<input type="button" value="读取src属性的值" id="btn5"/> 

		<input type="button" value="设置指定的属性值" id="btn6"/>
	</body>
</html>
1.hide
$( 选择器 ).hide() : 将数组中所有 DOM 对象隐藏起来
2.show
$( 选择器 ).show(): 将数组中所有 DOM 对象在浏览器中显示起来
3.remove
$( 选择器 ).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4.empty
$( 选择器 ).empty() ：将数组中所有 DOM 对象的子对象删除
5.append
为数组中所有 DOM 对象添加子对象
$( 选择器 ).append("<div> 我动态添加的 div</div>")
6.html
设置或返回被选元素的内容（ innerHTML ）。
$( 选择器 ) .html() ：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$( 选择器 ) .html( 值 ) ：有参数调用，用于设置 DOM 数组中所有元素的内容。
7.each
each 是对数组， json 和 dom 数组等的遍历 , 对每个元素调用一次函数。
语法 1 ： $.each( 要遍历的对象 , function(index,element) { 处理程序 } )
语法 2 ： jQuery 对象 .each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: yellow;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			//在dom对象创建好后,绑定事件
			$(function(){
				$("#btn1").click(function(){
					//使用remove:删除父和子所有的dom对象
					$("select").remove();
					
				})
				
				$("#btn2").click(function(){
					//使用empty 删除子dom对象
					$("select").empty();
				})
				
				$("#btn3").click(function(){
					//使用append,增加dom对象
					//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
					
					//增加一个table
					$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
				})
				
				$("#btn4").click(function(){
					//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
					//alert($("span").text()); // 我是mysql数据库
					alert( $("span").html() ); //我是mysql <b>数据库</b>
					
				})
				
				$("#btn5").click(function(){
					//使用 html(有参数):设置dom对象的文本值
					$("span").html("我是新的<b>数据</b>");
					
				})
				
				$("#btn6").click(function(){
					//循环普通数组,非dom数组
					var  arr = [ 11, 12, 13];
					$.each(arr, function(index,element){
						alert("循环变量："+index + "=====数组成员:"+ element);
					})
				})
				
				$("#btn7").click(function(){
					//循环json
					var json={"name":"张三","age":20};
					
					//var  obj = eval("{'name':'张三','age':20}");
					
					$.each(json,function(i,n){
						alert("i是key="+i+",n是值="+n);
					})
					
				})
				
				$("#btn8").click(function(){
					//循环dom数组
					var domArray = $(":text");//dom数组
						
					$.each( domArray, function(i,n){
						// n 是数组中的dom对象
						alert("i="+i+"  , n="+n.value);
					})
				})
				//和上面是一样的效果
				$("#btn9").click(function(){
					//循环jquery对象, jquery对象就是dom数组
					$(":text").each(function(i,n){
						alert("i="+i+"，n="+ n.value);
					})
					
				})
			})
			
		</script>
	</head>
	<body>
		<input type="text" value="刘备" />
		<input type="text" value="关羽" />
		<input type="text" value="张飞" /> <br/><br/>
		
		<select>
			<option value="老虎">老虎</option>
			<option value="狮子">狮子</option>
			<option value="豹子">豹子</option>
		</select> <br/>

		<select>
			<option value="亚洲">亚洲</option>
			<option value="欧洲">欧洲</option>
			<option value="美洲">美洲</option>
		</select> <br/><br/>
		
		<div id="fatcher">我是第一个div</div> <br/>

		<span>我是mysql <b>数据库</b></span> <br/>
		
		<span>我是jdbc</span> <br/><br/>
		
		<input type="button" value="使用remove删除父和子对象" id="btn1"/> <br/>
		
		<input type="button" value="使用empty删子对象" id="btn2"/> <br/>
 
		<input type="button" value="使用append,增加dom对象" id="btn3"/> <br/>
 
		<input type="button" value="获取第一个dom的文本值" id="btn4"/> <br/>
 
		<input type="button" value="设置span的所以dom的文本值" id="btn5"/> <br/>
 
		<input type="button" value="循环普通数组" id="btn6"/> <br/>
 
		<input type="button" value="循环json" id="btn7"/> <br/>
 
		<input type="button" value="循环dom数组" id="btn8"/> <br/>
 
		<input type="button" value="循环jquery对象" id="btn9"/> <br/>
	</body>
</html>

事件

定义元素监听事件

语法： $( 选择器 ). 监听事件名称 ( 处理函数 );
说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
为页面中所有的 button 绑定 onclick, 并关联处理函数 fun1
$("button").click(fun1)
为页面中所有的 tr 标签绑定 onmouseover ，并关联处理函数 fun2
$("tr").mouseover(fun2)

on() 绑定事件

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
语法： $( 选择器 ) .on(event,,data,function)
event ：事件一个或者多个，多个之间空格分开
data ：可选。规定传递到函数的额外数据， json 格式
function: 可选。规定当事件发生时运行的函数。 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: yellow;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			//在dom对象创建好后,绑定事件
			$(function(){
				$("#btn1").click(function(){
					//使用append增加dom对象
					$("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
					//使用on给按钮绑定事件
					$("#newBtn").on("click",function(){
						alert("新建的按钮被单击了");
					})
				})
				
				
			})
			
		</script>
	</head>
	<body>
		
		<div id="mydiv">
			我是一个div ，需要增加一个button
		</div>
		
		<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
		<br/>
		
	</body>
</html>

jQuery AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、 HTML 、 XML 或 JSON 同时能够把接收的数据更新到 DOM 对象

$.ajax()方法

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, ... } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ： 布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是：
"application/x-www-form-urlencoded" 。
data ：规定要发送到服务器的数据，可以是： string ， 数组，多数是 json
dataType ：期望从服务器响应的数据类型。 jQuery 从 xml, json, text, html 这些中测试最可能的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
error(xhr,status,error) ：如果请求失败要运行的函数， 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr) ：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参
type ：规定请求的类型（ GET 或 POST 等），默认是 GET ， get ， post 不用区分大小写
url ：规定发送请求的 URL 。
error() , success() 中的 xhr 是 XMLHttpRequest 对象。
主要使用的是 url , data ,dataType, success . 
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">

        $(function(){
            $("#btn").click(function () {
                //获取dom的value值
                var proid = $("#proid").val();
                //发起ajax请求
                $.ajax({
                    url:"queryjson",
                    data:{"proid":proid},
                    dataType:"json",
                    success:function (resp) {
                        //resp是json对象
                        //alert(resp.name + " === "+resp.jiancheng)
                        $("#proname").val(resp.name);
                        $("#projiancheng").val(resp.jiancheng);
                        $("#proshenghui").val(resp.shenghui);
                    }
                })
            });
        })
    </script>
</head>
<body>
    <p>ajax请求使用json格式的数据</p>
    <table>
        <tr>
            <td>省份编号：</td>
            <td><input type="text" id="proid">
                <input type="button" value="搜索" id="btn">
            </td>
        </tr>
        <tr>
            <td>省份名称：</td>
            <td><input type="text" id="proname"></td>
        </tr>
        <tr>
            <td>省份简称：</td>
            <td><input type="text" id="projiancheng"></td>
        </tr>
        <tr>
            <td>省会名称：</td>
            <td><input type="text" id="proshenghui"></td>
        </tr>
    </table>
</body>
</html>

$.get()方法

$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法： $.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL 。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。当请求成功时运行的函数。 data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（ "success" 、 "notmodified" 、 "error" 、 "timeout" 、 "parsererror" ）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地， jQuery 会智能判断。可能的类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回

$.post()方法

$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法： $.post(URL,data,function(data,status,xhr),dataType)
参数同 $get()
奕澎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery从入门到精通（全）
码农研究僧的博客
08-03 1358
目录前言 前言 jQuery 是一款跨主流浏览器的 JavaScript 库 封装了 JavaScript 相关方法调用 简化JavaScript 对 HTML DOM 操作
JQuery从入门到精通
热门推荐
cgblpx的博客
06-02 1万+
异步请求局部刷新 架构 主流方式： 技术栈 JavaScript 形成交互 jQuery 封装JavaScript，代码更加简洁高效 ajax 异步请求 json 数据传输 Web中间件(tomcat) 处理请求和响应 mysql数据库 存取数据 执行过程 用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前
jquery从入门到精通（一）
weixin_30314793的博客
10-25 130
1. $. data（） 的使用 为元素赋值： $(seletor).data(key,value) value可以为任一数据类型 从元素中取值：$(seletor).data(key) 2. bind（） 与 on（） 的区别 on() ：事件冒泡是过滤子元素 3. attr() 与 prop() 的区别 prop() ： 用于标签固有的属性 ...
JQuery从入门到精通(全一章)
GWHMYS的博客
08-01 533
JQuery从选择器到事件再到动画；全程无尿点
jQuery入门到精通
11-01
jQuery入门到精通，前端开发技术，前端javaScript
JQuery笔记
01-09
**jQuery简介** jQuery是一款高效、简洁且功能丰富的JavaScript库，由John Resig在2006年创建。它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务，使得JavaScript编程更加简单和直观。jQuery的核心理念是...
jquery 笔记 事件
10-28
jQuery笔记：事件处理 事件是JavaScript编程中非常重要的一环，它允许网页响应用户的交互。在jQuery中，事件处理机制提供了一种更为简便和强大的方式来处理这些交互。本文将介绍在jQuery中如何处理事件，包括传统...
jQuery从入门到精通第一篇
风云无忌的博客
06-16 5121
alert($) div{ padding:8px 0px; font-size:12px; text-align:center; border:solid 1px #888; } $(document).rea
jQuery开发从入门到精通源代码和示例(1-7)
11-12
jQuery开发从入门到精通（袁江）源代码，清华大学出版社 2013年 配套视频可以在B站上搜到（同名视频）
jQuery 入门到精通
11-14
jQuery 入门，对Dom操作，Ajax页面无刷新，json
jQuery从入门到精通
w18789476022的博客
01-22 699
目录 1. 初识jQuery 1.1 What？ 1.2Why? 1.3How? 2. jQuery的2把利器 2.1jQuery核心函数 2.2. jQuery核心对象（通过.调用内部的方法） 3. 使用jQuery核心函数 4. 使用jQuery对象 5. jQuery插件 6. 练习 1. 初识jQuery CRUD：增删改查（create、read、update、delete）。 Write less,do more。 1.1 What？ h...
【jQuery从入门到精通】03-jQuery工具、属性、CSS
VectorX's Blog
09-05 241
jQuery工具、属性、CSS 1、jQuery工具方法 $.each() $.trim() $.type() $.isArray() $.isFunction() $.isNumberic() $.parseJSON() 2、练习：多Tab点击切换 3、jQuery操作属性
[JavaScript][jQuery]jQuery从入门到精通
王德封-逐浪
11-26 1336
原文出处：http://developer.51cto.com/art/201005/202450.htm 15个值得开发者关注的jQuery开发技巧和心得 在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢![了解详细] jQuery开发入门 jQuery是如何工作的 最近发现jQuer
jQuery入门到精通全套完整版
不要回答的博客
06-07 1670
p1/41p $是函数名 jQuery封装了javascript的方法调用，简化了javascript对HTML DOM操作 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210604153945566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L216ajE1MTAxMjI5ODcx,size_16,c
【jQuery从入门到精通】05-jQuery文档、事件、动画
VectorX's Blog
09-05 242
jQuery文档、事件、动画 1、文档处理-增删改 append、appendTo prepend、prependTo before、insertBefore after、insertAfter replaceWith、replaceAll empty、remove、detach 练习：添加删除员工 2、事件处
JQuery入门到精通教程（）
最新发布
m0_73647713的博客
03-22 779
以上就是今天要介绍的内容，本文仅仅简单介绍了jQuery基本的使用，后续还会更新发布。
JQuery笔记：选择器、属性操作、事件处理和DOM操作详解
Jquery笔记 Jquery是JavaScript库，用于简化HTML、CSS和JavaScript之间的交互。下面是Jquery笔记的详细知识点。 一、选择器 * 并且选择器：使用逗号分隔多个选择器，选择所有匹配的元素。 * 父子选择器：使用大于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值