Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习）

86 阅读 0 评论 57 点赞

我是靠谱客的博主迷路白羊，最近开发中收集的这篇文章主要介绍Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、JQuery的认识

jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码

jQuery的核心思想：（write less，do more）写得更少，做得更多

二、JQuery的基本使用

注意：在使用前需要先将JQuery.js的文件引入进来（建议新建一个普通文件夹，区分不同的资源）

1、jQuery库的引入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 因为是静态网页，所以使用的是相对路径，同时要注意库引入的内部不能再写其他代码 -->
<script type="text/javascript" src="jquery/jquery-2.1.3.js"></script>
<script type="text/javascript">
	console.debug(jQuery);//这里直接是打印的对象
	console.debug($);
	console.debug($ == jQuery);
</script>
</head>
<body>

</body>
</html>

2、获取jQuery对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-2.1.3.js"></script>
<script type="text/javascript">
	/* 1、获取dom对象，原生的js方式 */
	window.onload = function(){//文档加载完毕后才执行
		var div = document.getElementById("mydiv");
		console.debug(div);
		
		/* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */
		var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
		console.debug($div);
	}
</script>
</head>
<body>
	<div id="mydiv">这是我的div</div>
</body>
</html>

3、$(function(){ 内容 })和window.onload的区别

window.onload与$(function)：

*相同点：* 它们都是用来加载页面的

*不同点：* window.onload是页面内容渲染完毕之后，执行匿名函数中的内容,而 $(f u n c t i o n) 是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说$ (function)的****性能要高于****window.onload所以以后推荐使用$(function)

<script type="text/javascript">
	/* 1、获取dom对象，原生的js方式 */
	/* window.onload = function(){//文档加载完毕后才执行内部
		var div = document.getElementById("mydiv");
		console.debug(div);
		
		//2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 
		var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
		console.debug(mydiv);
	} */
	
	$(function(){//文档加载完毕后才执行内部
		
		var div = document.getElementById("mydiv");
		console.debug(div);
		
		/* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */
		var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
		console.debug($div);
		
	})
</script>

4、jQuery对象和dom对象的相互转换

<script type="text/javascript">
	/* jQuery对象和dom对象的相互转换是为了满足js原生的功能太弱，而jquery功能更加强大 */
	$(function(){//文档加载完毕后才执行内部
		
		var div = document.getElementById("mydiv");
		console.debug(div);
		
		var $jqdiv = $(div);//js对象转换为jquery对象
		console.debug($jqdiv);
		
		/* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */
		var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
		console.debug($div);
		
		var jsdiv = $div[0];//jquery对象转换为js对象
		console.debug(jsdiv);
		
	})
</script>

5、jQuery基本选择器

参考jQuery文档：选择器是为了选中HTML页面中的dom节点，而得到Jquery对象，通过Jquery对象去操作dom节点

#id id选择器根据id获取jQuery对象(单个)
element 元素选择器根据标签名获取jQuery对象(多个)
.class 类型选择器根据类型名获取jQuery对象(多个)
selector1,selector2,selectorN 组合选择器根据多个选择器组合在一起，选中多个

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//1、根据id获取jquery对象
		var $div = $("#id");
		console.debug($div);
		//2、根据元素选择jQuery对象
		var $divs = $("div");
		console.debug($divs);
		//3、根据类型匹配多个jQuery对象
		var $classes = $(".hobbies");
		console.debug($classes);
		//4、组合选择器匹配多个jQuery对象
		var $elements = $("#mydiv,a");
		console.debug($elements);
	})
</script>

三、JQuery注册事件的四种方式

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//1、方式一常用方式，支持事件委托!(推荐)
		$("#btn1").on("click",function(){
			alert("方式一常用方式");
		})
		//2、方式一绑定
		$("#btn1").bind("click",function(){
			alert("方式二bind方式");
		})
		//3、方式三
		$("#btn1").one("click",function(){
			alert("方式三只能点一次");
		})
		//4、方式四，直接.事件名
		$("#btn1").click(function(){
			alert("方式四.事件名");
		})
	})
</script>
</head>
<body>
	<input type="button" value="注册事件方式1" id="btn1">
	<input type="button" value="注册事件方式2" id="btn2">
	<input type="button" value="注册事件方式3" id="btn3">
	<input type="button" value="注册事件方式4" id="btn4">
</body>

四、JQuery事件委托机制

存在层级关系的事件，需要对执行的顺序进行设定

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//存在层级的执行关系
		$("#btn").on("click",function(){
			$("#filediv").append("<input type='button' code='button' value='按钮'><br/>");
		})
		//绑定事件在input标签上
		$("#filediv").on("click","input[code='button']",function(){
			alert("成功了！");
		})
	})
</script>
</head>
<body>
	<input type="button" value="动态添加按钮" id="btn">
	<div id="filediv">
		<input type="button" code="button" value="按钮"><br/>
	</div>
</body>

五、JQuery中的方法

1、jQuery操作html/文本/value属性值

html():和innerHTML效果一样
text()：和innerText效果一样
上述两个传了参数就是添加文本
val()：只获取value

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		/* var html = $("#filediv").html("<input type='button' value='按一手'><br/>");//获得的是js对象
		var $html = $(html);
		console.debug(html);
		console.debug($html); */
		//text()
		/* var text = $("#btn").text("<input type='button' code='button' value='按一手'><br/>");
		console.debug(text);  */
		//val()
		var value = $("input[code='button']").val();//获得对应value的值
		console.debug(value);
	})
</script>

2、jQuery操作元素或节点的方法

添加：append()-------$(A).append(B)的操作，是把B追加到A中

appendTo()---------$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追o加到B中

删除：remove()，empty()

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		/* 
		添加：append()，appendTo()
		删除：remove()，empty()
		复制：clone(true)
		*/
		//1、$(A).append(B)的操作，是把B追加到A中
		var $mydiv = $("#mydiv");
		$mydiv.append("<h2>追加</h2>");
		
		//2、$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中
		var $youdiv = $("#youdiv");
		$youdiv.appendTo("#mydiv");
		
		//3、remove()删除所有元素
		//$mydiv.remove();
		
		//4、empty()删除匹配的元素集合中所有的子节点。
		//$mydiv.empty();
		
		//5、clone(true) 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
		//先给按钮绑定事件
		$("input[code='button']").on("click",function(){
			alert(1);
		})
		//进行复制
		$("#btn").on("click",function(){
			$("input[code='button']:first").clone(true).appendTo("#filediv");//first获取第一个元素
		})
		
	})
</script>
</head>
<body>
	<div id="mydiv">这是我的div</div>
	<div id="youdiv"><h4>div是你的</h4></div>
	<input type="button" value="动态添加按钮" id="btn">
	<div id="filediv">
		<input type="button" code="button" value="按钮"><br/>
	</div>
</body>

3、jQuery操作dom的属性和样式

①、操作属性：JQuery对象.attr()，removeAttr(),data()

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//jQuery中获取属性的值有2种方式:
		//方式一：attr()，如果没有这个属性，就是添加该属性
		var $input1 = $("#username")
		var input2 = $input1.attr("name");
		$input1.attr("sex","false");
		console.debug($input1);
		
		
		//方式二：data()获取到的值，会转为对应的类型，获取是以data-开始的属性
		var input2 = $("#username").data("email");
		console.debug(input2);
		//并且会转成对应类型
		console.debug(typeof input2);
		
		//3、删除属性
		$input1.removeAttr("name");
		
		//4、添加属性
		$("#addAttribute").on("click",function(){
			$("input:eq(4)").attr("a","A");
		})
		
	})
</script>
</head>
<body>
	<input type="text" id="username" data-age="22" data-sex="true" name="wang"
		data-email="12@qq.com" data-person='{"name":"王天霸","age":33,"sex":"男"}' />
	<input type="button" id="addAttribute" value="添加属性" /><br />
	<input type="text" id="username" />
</body>

②、操作样式：css()，addClass()，removeClass()

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//css()，addClass()，removeClass()
		//方式一
		//$("#p").css("color","pink");//设置一个样式
		//$("#p").css({ color: "#ff0011", background: "blue" });//设置多个样式
		
		//方式二：相当于添加一个属性标签
		$("#p").addClass("ps");
		$("#p").removeClass("ps");//移除
	})
</script>
<style type="text/css">
	.ps{
		color: red;
	}
</style>
</head>
<body>
	<p id="p">湖人总冠军</p>
</body>

六、JQuery练习题

第一题

<script type="text/javascript">
	$(function() {
		//第一题：先绑定事件，使用checked进行选择
		$("#btn").on("click",function(){
			var $inputs = $("input[type='checkbox']:checked");
			console.debug($inputs);
		})
		//第二题：hide中三个参数，第一个是设置速度，第二个是切换的效果，第三个是结束后的函数
		$("p").on("click",function(){
			$(this).hide(1000,"swing",function(){
				alert("没了！");
			})
		})
		//第三题：使用奇偶行设置不同的值，even是索引值为偶数的元素，odd是索引值为奇数的元素
		$("tr:even").css({"color":"red","background":"green"})
		$("tr:odd").css({"color":"pink","background":"yellow"})
	});
</script>

</head>
<body>
	篮球
	<input type="checkbox" name="hobbies" /> 足球
	<input type="checkbox" name="hobbies" /> 羽毛球
	<input type="checkbox" name="hobbies" />

	<input value="点击获取选中的input标签" type="button" id="btn" />

	<br />点击p标签隐藏
	<br />
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>

	<br />给不同的行添加颜色<br/>
	<table border="1" width="200px">
		<tr>
			<td>item1</td>
		</tr>
		<tr>
			<td>item2</td>
		</tr>
		<tr>
			<td>item3</td>
		</tr>
		<tr>
			<td>item4</td>
		</tr>
		<tr>
			<td>item5</td>
		</tr>
	</table>
</body>

第二题

<script type="text/javascript">
	$(function(){
		//选单个的标签向右边传递，先绑定事件
		$("#btn1").on("click",function(){
			//对选中的标签要进行选择，使用select匹配所有选中的option元素
			$("#select1 option:checked").appendTo($("#select2"));
		})
		//一次性全部选中向右传递
		$("#btn2").on("click",function(){
			//对选中的标签要进行选择，使用select匹配所有选中的option元素
			$("#select1 option").appendTo($("#select2"));
		})
		//反向操作
		$("input[type='button']:eq(2)").on("click",function(){
			//对选中的标签要进行选择，使用select匹配所有选中的option元素
			$("#select2 option:checked").appendTo($("#select1"));
		})
		$("input[type='button']:eq(3)").on("click",function(){
			//对选中的标签要进行选择，使用select匹配所有选中的option元素
			$("#select2 option").appendTo($("#select1"));
		})
		
	});
</script>
</head>
<body>
	<table border="1">
		<tr>
			<td>
				<select id="select1" style="width:100px" size="10" multiple="multiple">
					<option value="选项1">选项1</option>
					<option value="选项2">选项2</option>
					<option value="选项3">选项3</option>
					<option value="选项4">选项4</option>
					<option value="选项5">选项5</option>
					<option value="选项6">选项6</option>
					<option value="选项7">选项7</option>
					<option value="选项8">选项8</option>
					<option value="选项9">选项9</option>
				</select>
			</td>
			<td align="center">
				<input type="button" id="btn1" value="-->"/><br/>
				<input type="button" id="btn2" value="==>"/><br/>
				<input type="button" value="<--"/><br/>
				<input type="button" value="<=="/>
			</td>
			<td>
				<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
			</td>
		</tr>
	</table>
</body>

第三题

<script type="text/javascript">
	$(function(){
		//先绑定事件
		$("#checkAll").on("click",function(){
			$("input[name='hobbies']").each(function(i,obj){
				$(obj).prop({"checked":true})
			})
		})
		$("#checkNotAll").on("click",function(){
			$("input[name='hobbies']").each(function(i,obj){
				$(obj).prop({"checked":false})
			})
		})
		$("#checkUnAll").on("click",function(){
			$("input[name='hobbies']").each(function(i,obj){
				if(obj.checked){//这里是js对象
					$(obj).prop({"checked":false})
				}else{
					$(obj).prop({"checked":true})
				}
			})
		})
	});
	
	function checkChange(src){//已经绑定事件了
		var che = src.checked;
		if(che){
			$("input[name='hobbies']").prop({
				  checked:true
			})
		}else{
			$("input[name='hobbies']").prop({
				  checked:false
			})
		}
	}
</script>

</head>
<body>
	请选择你的爱好:<br/>
	<div>
		<input type="checkbox" name="hobbies"/>打篮球&nbsp;
		<input type="checkbox" name="hobbies"/>踢足球&nbsp;
		<input type="checkbox" name="hobbies"/>上网&nbsp;
	</div>
	
	<div>
	  <input type="checkbox" onchange="checkChange(this)"/>全选/全不选<br/>
		<input type="button" id="checkAll" value="全选"/>
		<input type="button" id="checkNotAll" value="全不选"/>
		<input type="button" id="checkUnAll" value="反选"/>
	</div>
</body>

第四题

<script type="text/javascript">
	$(function() {
		$("#btn1").on("click",function(){
			$("#select").val("2号");
		})
		$("#btn2").on("click",function(){
			$("#selectMultiple").val(["2号","5号"]);
		})
		$("#btn3").on("click",function(){
			$("input[type='checkbox']").val(["复选2","复选4"]);
		})
		$("#btn4").on("click",function(){
			$("input[value='单选2']").prop("checked",true);
		})
		$("#btn5").on("click",function(){
			var $inputs = $(":checked");
			$.each($inputs,function(i,n){
				console.debug(n);
			})
		})
	});
</script>
<title>练习5</title>
</head>
<body>
	<input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/>
	<input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/>
	<input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/>
	<input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/>
	<input id="btn5" type="button" value="打印已被选中的值"/><br/>
	
	<form name="userForm">
		单选下拉框<select id="select" name="select">
			<option value="1号">1号</option>
			<option value="2号">2号</option>
			<option value="3号">3号</option>
			<option value="4号">4号</option>
			<option value="5号">5号</option>
			<option value="6号">6号</option>	
		</select>
		
		多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple">
			<option value="1号">01号</option>
			<option value="2号">02号</option>
			<option value="3号">03号</option>
			<option value="4号">04号</option>
			<option value="5号">05号</option>
			<option value="6号">06号</option>	
		</select>
		<br/>
		复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1
		<input value="复选2" type="checkbox" name="checkbox"/>复选2
		<input value="复选3" type="checkbox" name="checkbox"/>复选3
		<input value="复选4" type="checkbox" name="checkbox"/>复选4
		<input value="复选5" type="checkbox" name="checkbox"/>复选5
		<br/>
		单选框<input value="单选1" type="radio" name="radio"/>单选1
		<input value="单选2" type="radio" name="radio"/>单选2
		<input value="单选3" type="radio" name="radio"/>单选3
		<input value="单选4" type="radio" name="radio"/>单选4
	</form>
</body>

第五题

<script language="javascript">
	$(function(){
		$("#btn_submit").on("click",function(){
			var username = $("#username").val();
			var email = $("#email").val();
			var tel = $("#tel").val();
			//进行追加
			var th = "<tr>"+
				"<td>"+username+"</td>"+
				"<td>"+email+"</td>"+
				"<td>"+tel+"</td>"+
				"<td>"+"<a href='javascript:void(0)'  οnclick='remove(this)' >删除</a></td>"
				+"</tr>";
			$(th).appendTo("#userTbody")
		})
		//删除所有
		$("#btn_removeAll").on("click",function(){
			$("#userTbody").empty();//清空内部
		})
	});
	function remove(a){//a标签
		$(a).closest("tr").remove();//closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
	}
		
</script>
</head>
<body>
	<a href="http://www.itsource.cn">首页</a>
	<form name="userForm">
		<center>
		用户录入<br/>
		用户名:<input id="username" name="username" type="text"/>
		E-mail:<input  id="email" name="email" type="text"/>
		电话:<input id="tel" name="tel" type="text"/>
		
		<input type="button" value="提交" id="btn_submit"/>
		<input type="button" value="删除所有" id="btn_removeAll"/>
		
		</center>
	</form>
	<hr/>
	<table border="1" align="center"> 
		<thead>
			<tr>
				<th>用户名</th>
				<th>E-mail</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="userTbody">
		</tbody>
	</table>
</body>

七、JSON格式数据

1、JSON格式数据概述

JSON格式字符串转JSON对象，标准的json格式字符串数据属性必须加"",JSON字符串转JSON对象有3种方式：

方式一：使用eval转，eval("("+jsonStr+")");json字符串不是标准的也能转
方式二：使用JSON.parse(jsonStr);只能转标准的json字符串
方式三：使用jquery的方式转$.parseJSON(jsonStr);它是基于第二种的实现，只能转标准的json字符串(推荐使用它)

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//创建json对象，也是json格式
		var person = {"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}};
		console.debug(person);
		console.debug(person.name);
		console.debug(person.dept.name);
		
		//创建json数组
		var person2 = [
			{"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}},
			{"name":"西门吹雪","age":23,"dept":{"id":2,"name":"公关部"}}
		]
		console.debug(person2);
		console.debug(person2[1].dept.name);
		
		//JSON格式字符串转JSON对象，标准的json格式字符串数据  属性必须加""
		var jsonStr = '{"name":"王天霸","age":22}';
		console.debug(jsonStr);//是一个字符串
		//方式一：使用eval转，eval("("+jsonStr+")");json字符串不是标准的也能转
		var jsonStr1 = eval("("+jsonStr+")")
		console.debug(jsonStr1);
		
		//方式二：使用JSON.parse(jsonStr);只能转标准的json字符串
		var jsonStr2 = JSON.parse(jsonStr);
		console.debug(jsonStr2); 
		
		//方式三：使用jquery的方式转$.parseJSON(jsonStr);它是基于第二种的实现，只能转标准的json字符串(推荐使用它)
		var jsonStr3 = $.parseJSON(jsonStr);
		console.debug(jsonStr3);
		
	})
</script>

2、JSON方法来定义对象

1.创建对象
- 使用 new Xxx()创建对象
- 使用JSON创建对象
设置属性
- 普通设置对象.属性名=值
- 动态设置值对象[“属性名”]=值
删除属性
- delete 对象.属性名或者 delete 对象[“属性名”]

<script type="text/javascript">
	$(function(){//文档加载完毕后才执行内部
		//1、创建对象
		var user = {
			name : "老王",
			age : 18,
			eat:function(){
				alert("这是方法")
			} 
		}
		//2、添加属性
		user.sex = "false";
		user.add = function(){
			alert("嘿嘿嘿")
		}
		
		console.debug(user.sex)
		user.add();
		//3、删除属性:delete 对象.属性名  或者  delete 对象["属性名"]
		delete user.sex;
		console.debug(user)
	})
</script>

八、省市二级联动（练习）

就是在日常填写信息时，当输入了省，会自动匹配市

part1: 二级联动后台准备

前台页面

发布项目

准备mvc环境：tomcat环境

准备模拟数据
part2:发送Ajax加载省份
part3:根据省份发送Ajax加载市

<script type="text/javascript">
	$(function(){
		//1、需要在页面加载的时候就把省份加载进去
		function load(){//已经获取了省份信息
			//$.get通过远程 HTTP GET 请求载入信息
			$.get("/provinces",function(date){//这里的参数就是后台返回的数据
				$(date).each(function(i,n){
					//将省份的信息追加
					$("#province").append("<option value='"+n.id+"'>"+n.name+"</option>")
				})
			})
		}
		load();
		//2、加载市的信息，首先绑定事件，在省的数据发生变化的时候市才显示
		$("#province").on("change",function(){
			$("#city").empty();//每次需要对市的信息进行清空
			$("#city").append("<option value='-1'>请选择</option>")//清空以后再重写
			//获取id传递到后台
			var id = $(this).val();
			var param = {"id":id}
			$.get("/city",param,function(date){//获取市的信息
				$(date).each(function(i,n){
					//将市信息追加
					$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>")
				})
			})
		})
	})
</script>
</head>
<body>
	省份:<select id="province">
			<option value="-1">请选择</option>
		</select>
	市: <select id="city">
			<option value="-1">请选择</option>
		</select>
</body>

控制层信息

package cn.itsource.controller;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class CityController {
	@RequestMapping("/provinces")
	@ResponseBody/*返回json格式数据*/
	public List<City> provinces(){
		return CityService.getProvinces();//把省份的数据接口写好了
	}
	
	@RequestMapping("/city")
	@ResponseBody/*返回json格式数据*/
	public List<City> city(Long id){
		return CityService.findCityByProvinceId(id);
	}
}

最后

以上就是迷路白羊为你收集整理的Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习）的全部内容，希望文章能够帮你解决Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：学习
浏览次数：86 次浏览
发布日期：2024-01-10 10:55:23
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogfz_13__23__22_y.html

Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习）

概述

一、JQuery的认识

二、JQuery的基本使用

1、jQuery库的引入

2、获取jQuery对象

3、$(function(){ 内容 })和window.onload的区别

4、jQuery对象和dom对象的相互转换

5、jQuery基本选择器

三、JQuery注册事件的四种方式

四、JQuery事件委托机制

五、JQuery中的方法

1、jQuery操作html/文本/value属性值

2、jQuery操作元素或节点的方法

3、jQuery操作dom的属性和样式

①、操作属性：JQuery对象.attr()，removeAttr(),data()

②、操作样式：css()，addClass()，removeClass()

六、JQuery练习题

第一题

第二题

第三题

第四题

第五题

七、JSON格式数据

1、JSON格式数据概述

2、JSON方法来定义对象

八、省市二级联动（练习）

最后

评论列表共有 0 条评论

发表评论取消回复

Java小白学习指南【day41】---JQuery基础一、JQuery的认识二、JQuery的基本使用三、JQuery注册事件的四种方式四、JQuery事件委托机制五、JQuery中的方法六、JQuery练习题七、JSON格式数据八、省市二级联动（练习）

概述

一、JQuery的认识

二、JQuery的基本使用

1、jQuery库的引入

2、获取jQuery对象

3、$(function(){ 内容 })和window.onload的区别

4、jQuery对象和dom对象的相互转换

5、jQuery基本选择器

三、JQuery注册事件的四种方式

四、JQuery事件委托机制

五、JQuery中的方法

1、jQuery操作html/文本/value属性值

2、jQuery操作元素或节点的方法

3、jQuery操作dom的属性和样式

①、操作属性：JQuery对象.attr()，removeAttr(),data()

②、操作样式：css()，addClass()，removeClass()

六、JQuery练习题

第一题

第二题

第三题

第四题

第五题

七、JSON格式数据

1、JSON格式数据概述

2、JSON方法来定义对象

八、省市二级联动（练习）

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复