web day04(jquery，MySQL)

最新推荐文章于 2022-10-22 10:46:17 发布
最新推荐文章于 2022-10-22 10:46:17 发布
阅读量125 收藏
点赞数
分类专栏： web 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yygyj/article/details/112299782
版权

1.jQuery概述

ajax代码

<script type="text/javascript">
		$(function(){
			$.ajax({
				type:"GET",
				url:"/user/query/point?userId=1",
			    dataType:"json",
			    successs:function(data){
			    	//将请求的数据输出到div中
			    	$('#div02').html(data.points+"分");
			    }
			});
			
		});
		
	</script>

jQuery相比js可以实现写的更少，但是做的更多的效果
jQuery本质是一个js的函数库，在页面中引入这个函数库就可以使用jQuery的语句
2.jQuery的版本问题，分为未压缩和压缩的版本，根据需要选择对应的版本下载
1.x支持常用的浏览器和IE6+
2.x支持常用的浏览器和IE9+
3.x支持常用的浏览器和IE9+
新的jQuery不兼容旧的jQuery
3.jQuery的引入
在head标签中书写script子标签，通过src属性引入jQuery函数库
4.jQuery的功能
可以像css选择器一样选择元素
可以直接创建所需的元素

$("<div><font></font></div>");

可以便捷的获取文档就绪事件
jQuery和js对象可以相互转换
a.jQuery的文档就绪事件

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>引入jquery</title>
	//引入jQuery
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		/*window.οnlοad=function(){
		$("#div1").text("aaa");
	}*/
	/*$(document).ready(function () {
		
	});*/
	/*$().ready(function () {
		
	});*/
	//jQuery的文档就绪事件
	$(function () {
		$("#div1").text("123");
	});
	</script>
	</head>
	<body>
		<div id="div1">
		</div>
	</body>
</html>

b.js对象转jQuery对象
jQuery单词和$单词意义一样，是简写形式
c.jQuery对象转js对象

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>js和jQuery的相互转换</title>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
	$(function () {//文档就绪事件
		/*//js转jQuery
		var js_div1=document.getElementById("div1");
		var jQuery_div1=$(js_div1);
		jQuery_div1.text("12596");*/
		//jQuery转js
		var jQuery_div1=$("#div1");
		var js_div1=jQuery_div1[0];
		//var js_div1=jQuery_div1.get(0);
		js_div1.innerText="78965";
		$(".test")[0].innerText="0号";
		$(".test")[1].innerText="1号";
	});
	</script>
	</head>
	<body>
		<div id="div1">
		</div>
		<div id="test" class="test">
			
		</div>
		<div id="test" class="test">
			
		</div>
	</body>
</html>

案例：
基本选择器（和css选择器类似）

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>基本选择器的练习</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		div,span{
			width:140px;
			height:140px;
			margin: 20px;
			background: #9999CC;
			border: 1px solid #000;
			float: left;
			font-size: 17px;
			font-family:Roman;
		}
		div.mini{
			width:40px;
			height:43px;
			background: #CC66FF;
			border: 1px solid #000;
			font-size: 12px;
			font-family:Roman;
		}
		input{
			margin: 5px 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			/*-----------基本选择器练习-------*/
			//改变元素名为<div>的所有元素的背景颜色为#FF69B4   id="b1"
			$("#b1").click(function () {
				$("div").css("background","#FF69B4");
			});
			//改变id为one的元素的背景颜色为#9ACD32  id="b2"
			$("#b2").click(function () {
				$("#one").css("background","#9ACD32");
			});
			//改变class为mini的所有元素的背景颜色为#FF0033"   id="b3"
			$("#b3").click(function(){
				$(".mini").css("background","#FF0033");
			});
			//改变所有元素的背景颜色为#FDF5E6"  id="b4"
			$("#b4").click(function(){
				$("*").css("background","#FDF5E6");
			});
			//改变所有的span元素和id为two的元素的背景颜色为#FF1493"  id="b5"
			$("#b5").click(function(){
				$("span,#two").css("background","#FF1493");
			});
			//改变所有的span元素和id为two的,id为one的,class为mini的所有的元素的背景颜色为#006400"   id="b6"
			$("#b6").click(function(){
				$("span,.two,.one,.mini").css("background","#006400");
			});
		});
	</script>
	</head>
	<body>
		<input type="button"  value="改变元素名为<div>的所有元素的背景颜色为#FF69B4"   id="b1" />
		<input type="button"  value="改变id为one的元素的背景颜色为#9ACD32"  id="b2" />
		<input type="button"  value="改变class为mini的所有元素的背景颜色为#FF0033"   id="b3" />
		<input type="button"  value="改变所有元素的背景颜色为#FDF5E6"  id="b4" />
		<input type="button"  value="改变所有的span元素和id为two的元素的背景颜色为#FF1493"  id="b5"/>
		<input type="button"  value="改变所有的span元素和id为two的,id为one的,class为mini的所有的元素的背景颜色为#006400"   id="b6" />

		<h1>天气冷了</h1>
		<h2>天气又冷了</h2>
		<div id="one">
			id为one
		</div>
		<div id="two" class="mini">
			id为two class是mini<br/>
			<div class="mini">
			class是mini
		</div>
			
		</div>
		<div class="one">
			class是one<br/>
			<div class="mini">
			class是mini
		    </div>
		<div class="mini">
			class是mini
		    </div>
		</div>
		<div class="one">
			class是one
			<div class="mini01">
			class是mini01
		</div>
		<div class="mini">
			class是mini
		</div>
		</div>
		
		<div id="b1" class="test">
			动画
		</div>
		<div class="span">
			span
		</div>
		<span class="mini">
			span class是mini
		</span>
	</body>
</html>

案例：
层级选择器
在这里插入图片描述

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>层级选择器的练习</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		div,span{
			width:140px;
			height:140px;
			margin: 20px;
			background: #9999CC;
			border: 1px solid #000;
			float: left;
			font-size: 17px;
			font-family:Roman;
		}
		div.mini{
			width:40px;
			height:43px;
			background: #CC66FF;
			border: 1px solid #000;
			font-size: 12px;
			font-family:Roman;
		}
		input{
			margin: 5px 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			/*-----------层级选择器练习-------*/
			//"改变body内所有div的背景颜色为#F08080" id="b1"
			$("#b1").click(function(){
				$(" body div").css("background","#F08080");
			});
			//改变body内子div的背景颜色为#FF0033   id="b2"
			$("#b2").click(function(){
				$("body>div").css("background","#FF0033");
			});
			//改变id为one的下一个div的背景颜色为#0000FF  id="b3"
			$("#b3").click(function(){
				$("#one+div").css("background","#0000FF");
			});
			//改变id为two的元素后面所有的兄弟div元素的背景颜色为#9ACD32  id="b4"
			$("#b4").click(function(){
				$("#two~div").css("background","#9ACD32");
			});
			//改变id为two的元素所有div兄弟元素的背景颜色为#FF6347   id="b5"
			$("#b5").click(function(){
				$("#two").siblings("div").css("background","#FF6347");
			});
			
		});
	</script>
	</head>
	<body>
		<input type="button"  value="改变body内所有div的背景颜色为#F08080" id="b1" />
		<input type="button"  value="改变body内子div的背景颜色为#FF0033"  id="b2" />
		<input type="button"  value="改变id为one的下一个div的背景颜色为#0000FF"   id="b3" />
		<input type="button"  value="改变id为two的元素后面所有的兄弟div元素的背景颜色为#9ACD32"  id="b4" />
		<input type="button"  value="改变id为two的元素所有div兄弟元素的背景颜色为#FF6347"  id="b5"/>

		<h1>天气冷了</h1>
		<h2>天气又冷了</h2>
		<div id="one">
			id为one
		</div>
		<div id="two">
			id为two
			<div class="mini">
			class是mini
		</div>
		</div>
		<div class="one">
			class是one
			<div class="mini">
			class是mini
		    </div>
		<div class="mini">
			class是mini
		    </div>
		</div>
		<div class="one">
			class是one
			<div class="mini01">
			class是mini01
		</div>
		<div class="mini">
			class是mini
		</div>
		</div>
		<div id="b1" class="test">
			动画
		</div>
	</body>
</html>

案例：
基本过滤选择器
在这里插入图片描述

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>基本过滤选择器的练习</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		div,span{
			width:140px;
			height:140px;
			margin: 20px;
			background: #9999CC;
			border: 1px solid #000;
			float: left;
			font-size: 17px;
			font-family:Roman;
		}
		div.mini{
			width:40px;
			height:43px;
			background: #CC66FF;
			border: 1px solid #000;
			font-size: 12px;
			font-family:Roman;
		}
		input{
			margin: 5px 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			/*-----------基本过滤选择器练习-------*/
			//改变第一个div元素的背景颜色为#FF6347" id="b1"
			$("#b1").click(function(){
				$("div:first").css("background","#FF6347");
			});
			//改变最后一个div元素的背景颜色为#9ACD32"  id="b2"
			$("#b2").click(function(){
				$("div:last").css("background","#9ACD32");
			});
			//改变class不为one的所有div的背景颜色为#FF0033"   id="b3"
			$("#b3").click(function(){
				$("div:not(.one)").css("background","#FF0033");
			});
			//改变索引值为3的div元素背景颜色为#006400"  id="b4"
			$("#b4").click(function(){
				$("div:eq(3)").css("background","#006400");
			});
			//改变索引值小于3的div元素背景颜色为#FF69B4"  id="b5"
			$("#b5").click(function(){
				$("div:lt(3)").css("background","#FF69B4");
			});
			//改变索引值大于3的div元素背景颜色为#F08080"  id="b6"
			$("#b6").click(function(){
				$("div:gt(3)").css("background","#F08080");
			});
			//改变索引值为偶数的div元素背景颜色为#FF6347"  id="b7"
			$("#b7").click(function(){
				$("div:even").css("background","#FF6347");
			});
			//改变索引值为奇数的div元素背景颜色为#FF1493"  id="b8"
			$("#b8").click(function(){
				$("div:odd").css("background","#FF1493");
			});
		});
	</script>
	</head>
	<body>
		<input type="button"  value="改变第一个div元素的背景颜色为#FF6347" id="b1" />
		<input type="button"  value="改变最后一个div元素的背景颜色为#9ACD32"  id="b2" />
		<input type="button"  value="改变class不为one的所有div的背景颜色为#FF0033"   id="b3" />
		<input type="button"  value="改变索引值为3的div元素背景颜色为#006400"  id="b4" />
		<input type="button"  value="改变索引值小于3的div元素背景颜色为#FF69B4"  id="b5"/>
		<input type="button"  value="改变索引值大于3的div元素背景颜色为#F08080"  id="b6"/>
		<input type="button"  value="改变索引值为偶数的div元素背景颜色为#FF6347"  id="b7"/>
		<input type="button"  value="改变索引值为奇数的div元素背景颜色为#FF1493"  id="b8"/>

		<h1>天气冷了</h1>
		<h2>天气又冷了</h2>
		<div id="one">
			id为one
		</div>
		<div id="two">
			id为two
			<div class="mini">
			class是mini
		</div>
		</div>
		<div class="one">
			class是one
			<div class="mini">
			class是mini
		    </div>
		<div class="mini">
			class是mini
		    </div>
		</div>
		<div class="one">
			class是one
			<div class="mini01">
			class是mini01
		</div>
		<div class="mini">
			class是mini
		</div>
		</div>
		<div id="b1" class="test">
			动画
		</div>
	</body>
</html>

案例：
内容选择器
在这里插入图片描述
案例：
可见选择器
在这里插入图片描述

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>内容和可见选择器的练习</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		div,span{
			width:140px;
			height:140px;
			margin: 20px;
			background: #9999CC;
			border: 1px solid #000;
			float: left;
			font-size: 17px;
			font-family:Roman;
		}
		div.mini{
			width:40px;
			height:43px;
			background: #CC66FF;
			border: 1px solid #000;
			font-size: 12px;
			font-family:Roman;
		}
		input{
			margin: 5px 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			/*-----------内容选择器练习-------*/
			//改变含有文本‘id’的div元素的背景颜色为#FF6347" id="b1"
			$("#b1").click(function(){
				$("div:contains('id')").css("background","#FF6347");
			});
			//改变空元素div（即不包含文本也不包含子元素）的背景颜色为#9ACD32"  id="b2"
			$("#b2").click(function(){
				$("div:empty").css("background","#9ACD32");
			});
			//改变包含div子元素的div的背景颜色为#FF0033"   id="b3"
			$("#b3").click(function(){
				$("div:has(div)").css("background","#FF0033");
			});
			//改变非空div元素背景颜色为#006400"  id="b4"
			$("#b4").click(function(){
				$("div:parent").css("background","#006400");
			});
			
			/*-----------可见选择器练习-------*/
			//改变所有可见div元素背景颜色为#F08080"  id="b5"
			$("#b5").click(function(){
				$("div:visible").css("background","#F08080");
			});
			//让所有隐藏元素显示并改变背景颜色为#FF69B4"  id="b7"
			$("#b7").click(function(){
				$("div:hidden").css("background","#FF69B4").css("display","block");
			});
		});
	</script>
	</head>
	<body>
		<input type="button"  value="改变含有文本‘id’的div元素的背景颜色为#FF6347" id="b1" />
		<input type="button"  value="改变空元素div（即不包含文本也不包含子元素）的背景颜色为#9ACD32"  id="b2" />
		<input type="button"  value="改变包含div子元素的div的背景颜色为#FF0033"   id="b3" />
		<input type="button"  value="改变非空div元素背景颜色为#006400"  id="b4" />
		<hr/>
		<hr/>
		<input type="button"  value="改变所有可见div元素背景颜色为#F08080"  id="b5"/>
		<input type="button"  value="让所有隐藏元素显示并改变背景颜色为#FF69B4"  id="b7"/>

		<h1>天气冷了</h1>
		<h2>天气又冷了</h2>
		<div id="one">
			id为one
		</div>
		<div id="two">
			id为two
			<div class="mini">
			class是mini
		</div>
		</div>
		<div class="one" title="aa"> 
			class是one
			<div class="mini"></div>
		<div class="mini">
			class是mini
		    </div>
		</div>
		<div id="mover"></div>
		<div style="display: none;">
			看见我，，看不见我
		</div>
	</body>
</html>

案例：
属性选择器
在这里插入图片描述
子元素选择器
在这里插入图片描述
案例：

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>属性和子元素选择器的练习</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		div,span{
			width:140px;
			height:140px;
			margin: 20px;
			background: #9999CC;
			border: 1px solid #000;
			float: left;
			font-size: 17px;
			font-family:Roman;
		}
		div.mini{
			width:40px;
			height:43px;
			background: #CC66FF;
			border: 1px solid #000;
			font-size: 12px;
			font-family:Roman;
		}
		input{
			margin: 5px 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			/*-----------属性和子元素选择器练习-------*/
			//改变包含id属性的div元素的背景颜色为#FF6347" id="b1"
			$("#b1").click(function(){
				$("div[id]").css("background","#FF6347");
			});
			//改变包含属性title="aa"元素div的背景颜色为#9ACD32"  id="b2"
			$("#b2").click(function(){
				$("div:[title='aa']").css("background","#9ACD32");
			});
			//改变type属性不等于button的input元素的div的背景颜色为#FF0033"   id="b3"
			$("#b3").click(function(){
				$("input:[type!='button']").css("background","#FF0033");
			});
			
			/*-----------子元素选择器练习-------*/
			//改变div第二个子元素背景颜色为#006400"  id="b4"
			$("#b4").click(function(){
				$("div:nth-child(2)").css("background","#F08080");
			});
			//改变div第一个子元素的背景颜色为#FF69B4"  id="b5"
			$("#b5").click(function(){
				$("div:first-child").css("background","#FF69B4").css("display","block");
			});
		});
	</script>
	</head>
	<body>
		<input type="button"  value="改变包含id属性的div元素的背景颜色为#FF6347" id="b1" />
		<input type="button"  value="改变包含属性title="aa"元素div的背景颜色为#9ACD32"  id="b2" />
		<input type="button"  value="改变type属性不等于button的input元素的div的背景颜色为#FF0033"   id="b3" />
		<hr/>
		<hr/>
		<input type="button"  value="改变div第二个子元素背景颜色为#006400"  id="b4"/>
		<input type="button"  value="改变div第一个子元素的背景颜色为#FF69B4"  id="b5"/>

		<h1>天气冷了</h1>
		<h2>天气又冷了</h2>
		<div id="one">
			id为one
		</div>
		<div id="two">
			id为two
			<div class="mini">
			class是mini
		</div>
		</div>
		<div class="one" title="aa"> 
			class是one
			<div class="mini"></div>
		<div class="mini">
			class是mini
		    </div>
		</div>
		<div id="mover"></div>
		<div style="display: none;">
			看见我，，看不见我
		</div>
			<input type="submit" name="test" value="提交" />
	</body>
</html>

表单选择器
在这里插入图片描述
案例：

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>表单选择器的练习</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		div,span{
			width:140px;
			height:140px;
			margin: 20px;
			background: #9999CC;
			border: 1px solid #000;
			float: left;
			font-size: 17px;
			font-family:Roman;
		}
		div.mini{
			width:40px;
			height:43px;
			background: #CC66FF;
			border: 1px solid #000;
			font-size: 12px;
			font-family:Roman;
		}
		input{
			margin: 5px 5px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			/*-----------表单选择器练习-------*/
			//改变所有input元素的背景颜色为#F08080" id="b1"
			$("#b1").click(function(){
				$(":input").css("background","#F08080");
			});
			//改变password元素的背景颜色为#9ACD32"  id="b2"
			$("#b2").click(function(){
				$(":password").css("background","#9ACD32");
			});
			//打印：radio元素的个数"   id="b3"
			$("#b3").click(function(){
				alert($(":radio").length);//length和size()相同
			});
			//打印所有：checked元素的value值"  id="b4"
			$("#b4").click(function(){
				$(":checked").each(function(){//each()可以将jQuery选择器中获取到的每一个对象元素进行操作
					alert($(this).val())
				});
			});
			//打印所有：selected元素的value值"  id="b5"
			$("#b5").click(function(){
				alert($(":selected").val());//val()相当于value()
			});
		});
	</script>
	</head>
	<body>
		<input type="button"  value="改变所有input元素的背景颜色为#F08080" id="b1" />
		<input type="button"  value="改变password元素的背景颜色为#9ACD32"  id="b2" />
		<input type="button"  value="打印：radio元素的个数"   id="b3" />
		<input type="button"  value="打印所有：checked元素的value值"  id="b4"/>
		<input type="button"  value="打印所有：selected元素的value值"  id="b5"/>

		<h1>天气冷了</h1>
		<h2>天气又冷了</h2>
			用户名：<input type="text" name="username" value="被禁用了" disabled="disabled"/>
			密码：<input type="password" name="password" value="123" />
			性别：<input type="radio" name="gender" value="man" />男<input type="radio" name="gender" value="woman" checked="checked"/>女<br/><br/><br/>
			爱好： <input type="checkbox" name="like" value="bkball" checked="checked"/>篮球
			       <input type="checkbox" name="like" value="plball" />足球
				   <input type="checkbox" name="liket" value="tball" />台球
			出生地：<select name="city">
			<option value="val" selected="selected">上海</option>
			<option value="val" selected="selected">北京</option>
			<option value="val" selected="selected">天津</option>
			</select>
			简介：<textarea name="discription" rows="2" cols="10">请输入个人描述
			</textarea>
	</body>
</html>

案例:
使用jquery实现qq列表

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>好友列表</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
table{
	border: #0099FF 1px solid;
	width:100px;
	border-collapse:collapse;
}
table td{
	border: #0066FF 1px solid;
	background: #FF9900;
	text-align: center;
}
table td div{
	background: #FFFF99;
	text-align: center;
}
table td a:link,table td a:visited{
	color: #00FFFF;
	text-decoration: none;
}
table td a:hover{
	color: #00CC00;
}
/*使用display属性，如果取值为none就是隐藏标签*/
table td div{
	display: none;
}
.open{
	display: block;
}
.close{
	display: none;
}
</style>		
		<script type="text/javascript"> 
		 	function openDiv(obj){
			 	//1.隐藏其他行的div
			 	//获取a标签的祖先tr，再找tr的兄弟标签tr，找到兄弟tr下的div隐藏
			 	$(obj).parents("tr").siblings("tr").find("div").hide();
			 	//2.切换当前行的div的可见状态toggle()
			 	//找当前a标签的子标签div，切换可见状态
			 	$(obj).next().toggle();
		 	}
		</script>
	</HEAD>
	<BODY>
		<table>
			<tr>
			<td>
				<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
				<div>
					秦始皇<br/>
					刘邦<br/>
					李世民<br/>
					康熙<br/>
				</div>
			</td>
			</tr>
			<tr>
			<td>
				<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
				<div>
					刘备<br/>
					关羽<br/>
					张飞<br/>
					赵云<br/>
				</div>
			</td>
			</tr>
			<tr>
			<td>
				<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
				<div>
					西施<br/>
					貂蝉<br/>
					杨贵妃<br/>
					王昭君<br/>
				</div>
			</td>
			</tr>
			
		</table>
	</BODY>
</HTML>

案例：
下拉框（jquery）

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>二级联动菜单</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<script type="text/javascript"> 
		 	function selectCity(obj){
			 	var cities={
				 	"北京市":["海淀区","朝阳区","丰台区"],
				 	"河北省":["石家庄","唐山","秦皇岛"],
				 	"辽宁省":["沈阳","大连","鞍山"],
				 	"山东省":["青岛","济南","烟台"]
			 	}
				//jquery实现
				//获取省市的值
				var province=$(obj).val();
				//通过省市获取城市的值
				var city=cities[province];
				//清空
				$("#city").html("<option>--请选择--</option>")
				for(var i=0;i<city.length;i++){
					$("#city").append("<option>"+city[i]+"</option>");
				}






			 	
			 	/*//js实现
			 	//1.先获取省市信息
			 	var province=obj.value;
			 	//2.根据省市信息获取城市信息
			 	var city=cities[province];
			 	//3.将城市信息绑定在第二个下拉框中
			 	//3.1获取第二个下拉框
			 	var sel_city=document.getElementById("city");
			 	//清空操作
			 	sel_city.innerHTML="<option>--请选择--</option>"
			 	//3.2循环添加城市信息
			 	for(var i=0;i<city.length;i++){
				 	sel_city.innerHTML+="<option>"+city[i]+"</option>";
			 	}*/
		 	}
		</script>
	</HEAD>
	<BODY>
		<select id="province" onchange="selectCity(this)">
			<option>--选择省市--</option>
			<option>北京市</option>
			<option>河北省</option>
			<option>辽宁省</option>
			<option>山东省</option>
		</select>
		<select id="city">
			<option>--选择城市--</option>
		</select>
	</BODY>
</HTML>

常用的jqueryApi
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例：
员工添加

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>模拟员工信息管理</title>
	<style type="text/css">
		body{
			font-family:"微软雅黑";
		}
		h2,h4{
			text-align: center;
		}
		div#box1,div#box2{
			text-align: center;
		}
		hr{
			margin: 20px 0;
		}
		table{
			margin: 0 auto;
			width:70%;
			text-align: center;
			border-collapse:collapse;
		}
		td,th{
			padding: 7px;width:20%;
		}
		th{
			background-color: #DCDCDC;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript">
		//让整个页面加载完成
		$(function(){
			//添加
			$("#add").click(function(){
				var id=$.trim($("#box1 input[name='id']").val());//$.trim()去空格
				var name=$.trim($("#box1 input[name=name]").val());
				var email=$.trim($("#box1 input[name=email]").val());
				var salary=$.trim($("#box1 input[name=salary]").val());
				//非空校验
				if(id==""||name==""||email==""||salary==""){
					alert("员工信息不能为空");
					return;
				}
				//员工id是否重复
				var flag=true;
				//获取页面中的全部id，再使用用户输入的id与他们做比较
				$("table tr").each(function(){
					if(id==$(this).find("td:eq(1)").text()){
						alert("id已经存在");
						flag=false;
						return;
					}
				});
				if(!flag){
					return;
				}
				//添加数据到页面
				var $tr=$("<tr></tr>");
				var $check_td=$("<td><input type='checkbox' name='test'  /></td>");
				var $id_td=$("<td>"+id+"</td>");
				var $name_td=$("<td>"+name+"</td>");
				var $email_td=$("<td>"+email+"</td>");
				var $salary_td=$("<td>"+salary+"</td>");
				//将td与tr拼接
				$tr.append($check_td).append($id_td).append($name_td).append($email_td).append($salary_td);
				//将tr添加到table里边
				var $table=$("table");
				$table.append($tr);
				
			});
			//全选
			$("#all").click(function(){
			//获取全选按钮的选中状态，同步到页面所有的checkbox身上
			var check=$(this).attr("checked");
			//
			$("input[type='checkbox']").attr("checked",check);
			
			});
			//删除
			$("#del").click(function(){
				$(":checked:not(#all)").parents("tr").remove();
			});
			//更新
			$("#upd").click(function(){
				//根据id修改其他的员工信息
				//获取数据
				var id=$.trim($("#box2 input[name='id']").val());//$.trim()去空格
				var name=$.trim($("#box2 input[name=name]").val());
				var email=$.trim($("#box2 input[name=email]").val());
				var salary=$.trim($("#box2 input[name=salary]").val());
				//判断id是否存在
				//获取页面中的全部id，再使用用户输入的id与他们做比较
				//标志位
				var flag=true;
				$("table tr").each(function(){
					if(id==$(this).find("td:eq(1)").text()){
						$(this).find("td:eq(2)").text(name);
						$(this).find("td:eq(3)").text(email);
						$(this).find("td:eq(4)").text(salary);
						flag=false;
					}
				});
				if(flag){
					alert("员工id不存在");
				}
			});
		});
	</script>
	</head>
	<body>
		<h2>添加员工</h2>
		<div id="box1">
		ID:<input type="text" name="id" value="" /> 姓名:<input type="text" name="name" value="" />邮箱:<input type="text" name="email" value="" /> 工资:<input type="text" name="salary" value="" /> <input type="button" name="test" id="add" value="添加" />
		</div>
		<hr/>
		<table id="" border="1">
			<tr>
				<th><input type="checkbox" name="test" value="" id="all"/></th>
				<th>ID</th>
				<th>姓名</th>
				<th>邮箱</th>
				<th>工资</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="test" value="" /></td>
				<td>1</td>
				<td>宋江</td>
				<td>sj@163.com</td>
				<td>12000</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="test" value="" /></td>
				<td>2</td>
				<td>武松</td>
				<td>ws@163.com</td>
				<td>10500</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="test" value="" /></td>
				<td>3</td>
				<td>孙二娘</td>
				<td>sen@163.com</td>
				<td>11000</td>
			</tr>
		</table>
		<h4><a href="#" id="del">删除选中</a></h4>
		<hr/>
		<div id="box2">
		ID:<input type="text" name="id" value="" /> 姓名:<input type="text" name="name" value="" />邮箱:<input type="text" name="email" value="" /> 工资:<input type="text" name="salary" value="" /> <input type="button" name="test" id="upd" value="修改" />
		<div>
	</body>
</html>

mysql概述
1.数据库概述
概念：存储数据的仓库
数据库的发展：层次式数据库（类似二叉树）、网格式数据库（类似网状树）、关系型数据库
付费：
oracle sqlserver
开源：
mysql
2.数据库存储数据的结构
mysql的安装配置：多加了防火墙和多人连接的勾选和环境变量的自动配置
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

sql语言指令访问数据库：
mysql -u root -p然后输入密码
退出数据库：
exit;
quit;
数据库表中的一行成为一条记录
数据库中的列也叫字段或域

数据库的操作：
1.创建数据库
2.创建表

mysql常用的数据类型
字符类型：
varchar(20)
varchar 存储数据时只占用数据本身的长度，不会将全部字段长度占用
速度相对char慢，要判断数据长度
char(20)
char 存储数据时，不论数据本身有多长，都会占用字段本身的长度
char在读取固定的长度，速度相对varchar快
大数据类型：
blod（图片） text（文本小说）
数值型：
tinyint smallint int bigint（默认id） float double
逻辑型：
bit 1 0
日期型：
date（年月日） time（时分秒） datetime timestamp（时间戳）（最新时间）
定义主键约束：
primary key:不允许为空，不能重复
删除主键：alter table tablename drop primary key；
主键自动增长：auto_increment
定义唯一约束：
unique
例如：name varchar(20) unique
定义非空约束
not null
例如：salary double not null
外键约束

查看表结构
查看表结构：desc tabName
查看当前的所有表：show tables
修改表：
使用alter table语句追加、修改或删除语句

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例：

1.数据库
		1.1创建数据库
		    create database mydb2;
		1.2查看数据库
			show databases;
		查看数据库配置信息路径：(C:\ProgramData\MySQL\MySQL Server 5.6\Data\)
		show global variables like "%datadir%";
		1.3练习
		创建gbk字符集的数据库
		create database mydb3 character set gbk;
		创建utf8字符集的数据库，且校对规则为utf8_bin
		create database mydb4 character set utf8 collate utf8_bin;
		创建mydb5数据库，如果他不存在的话
		create database if not exists mydb5;
		1.4查看数据库的创建语句
		show create database mydb2;
		1.5删除数据库
		drop database mydb2;
		1.6修改数据库
		alter database mydb2 character set gbk;
		1.7选择数据库
		不同的数据库会出现相同名称的表格,所以要先选中这个数据库再去创建这个表
		use mydb2;
		//查看当前使用的数据库
		select database();

2.表操作
    2.1创建表
    create table user(
		id int,
		name char(10),
		password varchar(20),
		birthday date
    );
	//2.2展示当前数据库的表单
	主键：一个表格一般情况下都会设置一个主键，表格中存储主键会提高查询效率
	（如果一个字段被 auto_increment修饰，则这个字段一定是主键字段）
	show tables；
	//2.3案例:员工表employee(包含主键)
	create table employee(
		id int primary key auto_increment,
		name varchar(10),
		gender varchar(2),
		birthday date,
		entry_date date,
		job varchar(20),
		salary double,
		resume text
	);
	//2.4查看表结构
	desc employee;
	//2.5查看创建表的语句
	show create table employee;
	2.7修改表
	练习：在上面员工表的基本上增加一个image列
	alter table employee add image blob;
	修改job列，使其长度为60
	alter table employee modify job varchar(60);
	删除gender列
	alter table employee drop gender;
	表名改为user
	rename table employee to emp;
	修改表的字符集为utf8
	alter table emp character set gbk;
	列名name改为username
	alter table emp change name username varchar(20);
	//2.8删除表
	drop table emp;
快乐咸鱼Y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python Web开发记录 Day5：jQuery（JavaScript库）
流苏的博客
03-01 1015
Python Web开发记录 Day5：jQuery（JavaScript库）
Python Web开发记录 Day6：MySQL（关系型数据库）
流苏的博客
03-05 960
Python Web开发记录 Day6：MySQL（关系型数据库）。
python-web开发[14]之MySQL
Jasminexjf的博客
10-22 541
python-web开发系列文章
Web--jQuery（二）、MySQL安装与介绍
想拯救发际线的博客
08-21 131
一、jQuery 1、事件： 基本绑定方法 格式：$('el').事件类型() on方法 常用的事件： click mouseover mouseout mousemove focus blur change submit 当表单提...
Day55 web框架 入门 Django
Tao.的博客
08-30 336
web框架 django入门
web day09(easymall项目)
yygyj的博客
01-17 238
dd
asp.net mysql jquery_Asp.Net Core使用NLog+Mysql的几个小问题
weixin_33508272的博客
01-26 71
项目中使用NLog记录日志，很好用，之前一直放在文本文件中，准备放到db中，方便查询。项目使用了Mysql，所以日志也放到Mysql上，安装NLog不用说，接着你需要安装Mysql.Data安装包：Install-Package MySql.Data接着打开你的NLog，新增一个target：name="mysqlDb"dbProvider="MySql.Data.MySqlClient.MySq...
c mysql web开发实例教程_小白7天入门PHP Web开发 - Day 6[上]（MySql）个人博客实例讲解用户数据的存储...
weixin_42512723的博客
02-06 118
《小白7天入门PHP Web开发》系列文章，面向单纯善良的完全不懂Web开发编程的入门速成课程，小白们如果感兴趣可以研读此系列文章，也可以连线提问。各路大神有何指教还请指点一二。希望各路大神手下留情，注意维护自己的身份和形象。拜谢各位。上一篇文章 我们了解使用JQuery AJAX与后端进行异步页面无刷新的交互，提升用户体验和后端性能，以及前后端分离的基础理解。既然有交互，尤其有数据交互时，那数据...
javaweb jQuery+jsp+servlet+mysql 完成简单的登录注册
qq_38557784的博客
03-29 2635
登录注册案例:1、注册：需要根据用户名查询数据库，已有的用户不能再进行注册 2、注册：用户名密码不能为空 3、注册成功返回登录页面 4、登录界面 用户名 密码不能为空 主要代码： Register.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <met
mysql启动与web
11-01
在项目开发中，`day13_pm.zip`可能是一个关于项目管理或Web开发过程中的第13天的课程材料，包含了相关的源代码、笔记或其他学习资源。这些材料可能涵盖如何集成MySQL到Web应用中，如何优化查询性能，或者如何使用...
web8至11资料
10-18
2. "day10" - 同样，第10天的材料可能涵盖了不同的主题，例如JavaScript中的函数、面向对象编程或者jQuery库的使用。 3. "day08资料" - 这可能代表Web8阶段的学习资料，可能包括HTML和CSS的基础知识，或者是...
day02-廖盛.zip
03-07
在开发这样的系统时，开发者需要熟悉Web开发技术，如PHP、Python、Java等后端语言，以及前端的HTML、CSS和JavaScript，还要了解如何与数据库（如MySQL、MongoDB）进行交互，以及如何集成第三方API，如地图服务、支付...
web-coursemannage.7z
06-03
4. **SQL文件**: 这个项目中包含了SQL文件，意味着项目使用了关系型数据库管理系统（如MySQL或Oracle）来存储课程数据。SQL文件通常用于创建数据库结构、插入初始数据或者执行其他数据库操作。在这个项目中，可能...
portfolio-website_day-6
03-06
【标题】"portfolio-website_day-6"是一个...综上，"portfolio-website_day-6"项目体现了Web开发者在构建个人作品集网站时的一天工作流程，涵盖了从设计、编码到测试和部署的多个环节，展示了Web开发的全面性和复杂性。
Flash-制作旋转动画教程.doc
07-23
flash
小波去噪的Matlab仿真程序，对一维序列进行去噪
最新发布
07-23
本程序包含一个简单示例，利用Matlab代码对一维时间序列进行噪声去除，主要过程调用了Matlab自带的函数。小波分析的有关知识：Donoho提出的小波阀值去噪的基本思想是将信号通过小波变换（采用Mallat算法）后，信号产生的小波系数含有信号的重要信息，将信号经小波分解后小波系数较大，噪声的小波系数较小，并且噪声的小波系数要小于信号的小波系数，通过选取一个合适的阀值，大于阀值的小波系数被认为是有信号产生的，应予以保留，小于阀值的则认为是噪声产生的，置为零从而达到去噪的目的。
ThinkPHP短视频系统关注点赞任务平台系统源码美化整修最终版[可封装双端APP]
07-23
拇指赚ThinkPHP短视频系统关注点赞任务平台系统源码[可封装双端APP] 易支付 微信支付宝官方支付 提现秒到账微信零钱 Thinkphp框架 对接第三方支付paysapi易支付微信支付宝官方支付提现秒到账微信零钱 源码内附详细安装说明
GooFlow工作流引擎压缩包
07-23
《GooFlow——Web流程设计实现详解》 在数字化时代，高效的工作流程设计与管理是提升企业运营效率的关键。GooFlow作为一个强大的在线流程设计工具，以其简洁的界面和丰富的功能，深受用户喜爱。本文将深入探讨GooFlow在Web流程设计中的实现，以及其与jQuery库的结合应用。 我们来看GooFlow的核心特性。GooFlow提供了一个直观的拖放界面，允许用户轻松创建和编辑流程图。文件"Gooflow.js"是这一核心功能的实现载体，它包含了一系列用于绘制和操作流程图的函数。通过这些函数，开发者可以定制化地构建出各种复杂的业务流程，满足不同行业的定制需求。 在Web开发中，jQuery库扮演了重要角色。"jquery.min.js"是轻量级的JavaScript库，简化了DOM操作、事件处理和Ajax交互。在GooFlow中，jQuery被用来优化用户交互体验，例如，通过jQuery选择器快速定位页面元素，动态响应用户的点击、拖动等操作，使得流程设计过程更加流畅。 "defaul.css"是GooFlow的样式文件，它定义了流程图的显示样式，包括节点形状、线条样式、背景
day_04MySQL多表操作与关联查询
MySQL多表操作是指在MySQL数据库中，通过使用多个表进行数据存储和查询的操作。MySQL多表操作是数据库设计和查询的核心部分，它可以帮助我们更好地组织和管理数据，并实现复杂的查询需求。 在实际应用中，我们经常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值