后端程序员必备的jQuery基础

一、理解

jQuery 可以理解为具有继承了javascript的一个对象，以$作为标识。

二、使用

需要先引用再使用，如下示例

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
	</head>
	<body>	
		<div id="test">
			<a> 测试一下</a>
		</div>
		<div id="test2">
			
		</div>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
		//获取jqurey
		var div=$("#test");
		console.log(div);
		//普通Dom转Jqurey
		var tem=document.getElementById("test2");
		var domdiv=$(tem);
		console.log(domdiv);
		//Jqurey 转Dom
		console.log(div[0]);
	</script>
</html>

三、选择器

类型	名称	方法	描述与示例
基础选择器	id选择	#id	$(“#id”)
	元素名选择	elementname	$(“name”)
	类选择	.class	$(“.div”)
	全部	*	$(“*”)
	组合选择	类1，类2,类N	$(“#id,name,.div”)
层次选择器	后代选择	ancestor descendant	$(“#parent div”)
	子代选择	parent>child	$(“#parent>child”)
	相依选择	prev+next	$(“.blue + img”)
	同级选择	prev-sibling	$(“:blue+img”)
表单选择器	表单选择	:input	$(“:input”)
	文本框选择	:text	$(“:text”)
	密码选择	:password	$(“:password”)
	单选	:radio	$(“:radio”)
	复选	:checkbox	$(“:checkbox”)
	提交	:submit	$(“:submit”)
	图像	:image	$(“:image”)
	重置	:reset	$(“:reset”)
	按钮	:button	$(“:button”)
	文本域	:file	$(“file”)

基础选择器示例：

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
	</head>
	<body>	
		<div id="div1" class="blue"> 基础元素</div>
		<span id="span1">再测试一下</span>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
		//根据ID选择
		console.log($("#span1")[0].innerText);
		//根据类
		console.log($(".blue")[0].innerText)
	</script>
</html>

表单选择示例

四、Dom 操作

4.1获取属性

atrr(“属性名”)	当检测checked 时退回 checked /undefined
prop(“属性名”)	当检测checked 时返回 ture / false

示例

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
	</head>
	<body>	
		<input type="checkbox" name='ch' checked="checked" /> 选择项A
		<input type="checkbox" name='ch'/> 选择项B
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
		//查询input 
		var temp=$("input");
		//var temp=$("input[type='checkbox']"); 也可以通过条件进行筛选
		temp.each(function(idx,em){
			console.log(idx +"-->"+$(em));
			console.log($(em).attr('checked'));
			console.log($(em).prop('checked'));//用此能得到true/fase的值，所以推荐使用这个
			console.log($(em).attr('name'));
		})	
	</script>
</html>

4.2 操作元素样式

attr(“class”)	获取class 的样式
attr(“class”,”样式名”)	设置class样式
addClass(“样式名”)	添加样式名
css()	添加具体样式 css(“样式”,”值”)//单个 css({“样式”:”值”,样式”:”值”})//多个
removeClass(“class”)	移除样式

示例

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		<style type="text/css">
			div{
				padding: 8px;
				width: 180px;
			}
			.blue{
				background: blue;
			}
			.red{
				background: red;
			}
			.lar{
				background: green;
			}
			.newcss{
				background: black;
			}
		</style>
	</head>
	<body>	
		<div id="blueId" class="blue"> 测试一下</div>
		<button id="test"> 配置</button>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
		//获取样式名
		console.log($("#blueId").attr("class"));
		//设置样式名
		var btn=document.getElementById("test");
		btn.onclick=function(){
			//设置样式名
			//$("#blueId").attr("class","newcss");
			//添加样式
			//$("#blueId").addClass("lar");//覆盖式
			$("#blueId").css("font-size","40px",);
		}
		
		//--------
	</script>
</html>

4.3 操作元素内容

html()	获取元素的HTML
html(“html 代码”)	设置HTML内容
text()	获取元素文本
text(“设定文本”)	设定元素文本内容
val()	获取value值
val(“value”)	设置元素value值

示例

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		
	</head>
	<body>	
		<input type="text" id="test" value="测试" />
		<div id="div">
			<div id="divp">测试</div>
		</div>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
		var t=$("#test"),div=$("#div");
			div.html("<a>我也不知道</a>");//给相应参数设置值
			console.log(div.html());//取值
			console.log(t.val());//取值
			t.val("password");
	</script>
</html>

4.4 创建与添加、删除元素

prepend(“内容”)	增加子元素（可以是文本，也可以HTML）
$(“内容”).prependTo(selector)	向一个selector的头部增加一条选项
append(“内容”)	向一个数据集中增加一条数据
$(“内容”).appendTo(selector)	向一个selector的尾部增加一条选项
$(selector).before(“内容”)	向同级元素中的数据集的头部增加一项目
$(selector).after(“内容”)	向同级元素中的数据集的层部增加一项目
remove()	删除元素
empty()	清空元素

示例

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		
	</head>
	<body>	
		<div id="div">
			<span> 测试</span>	
		</div>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
	   //前新增示例   【后新增忽略，方法相同】
		var t1=$("<span>前新增  </span>"),
			t2=$("<span>前新增2  </span>"),
		 div=$("#div");
		div.prepend(t1);
		t2.prependTo(div);
		//
		//div.empty();//清空
		div.remove();//清除
	</script>
</html>

五、事件绑定

示例

<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		
	</head>
	<body>	
		<div id="div">
			<button type="button" id="test">绑定示例</button>
		</div>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
	<script type="text/javascript">
	   //前新增示例   【后新增忽略，方法相同】
		var btn=$("#test");
		//单绑定
		//方式1
		//btn.bind("click",function(){console.log("bind")});
		//方式2
		//btn.click(function(){console.log("2222")});
		
		//多个事件绑定
		btn.mouseout(function(){console.log("来了老弟")}).mouseover(function(){console.log("移出")});
		
	</script>
</html>

六、Ajax

Ajax是一种非常常见的技术，调用格式如下：

$.ajax({

type:请求方式 GET/POST

url:请求地址URL

async:是否同步

dataType:服务器返回数据类型

contentType:设置请求头

success:请求成功时调用此函数

error:请求失败时调用此函数

})

示例

<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<script type="text/javascript">
		$.ajax({
			type:"get",
			url:"order/new",
			data:{},
			success:function(data){
				//--------打印返回数据
				console.log(data);
			}
		});
</script>

总结

Html \ css\js\jquery\ 是前端的基础，当然后面的VUE等无非在js上的二次封装。

原文链接：https://blog.csdn.net/weixin_44690195/article/details/123115521