实训笔记2019518wangzhuoc

最新推荐文章于 2024-02-17 15:59:07 发布

qq_26170225

最新推荐文章于 2024-02-17 15:59:07 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/qq_26170225/article/details/90319269

版权

本周学到了ajax方法

以下为ajax案例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			}
		</style>
	<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#div1").mouseover(function(){
				url = "demo.text"
				$("#div1").load(url)//ajax加载函数
			})
			$("#div1").mouseout(function(){
				$("#div1").html("")//ajax加载函数
		})
		$("#div1").mouseover(function(){
			url = "demo.text"
			$("#div1").load(url)//ajax加载函数
		})
		$("#button").click(function(){
			url = "demo.text"
			$("#div1").load(url)//ajax加载函数
		})
		//获取id"P1"的元素
		$("#button2").click(function(){
			url = "demo.text"
			$("#div1").load("demo.text #p1", function(responestxt,statusTxt){
				if (statuTxt ='success'){
				alert("外部显示成功")
				}
				if (statuTxt ='Error'){
				alert("外部显示成功")
				}
			})	
			})
						//在文件名后面 拼接元素的id名字即可
				//在load()方法中callback是可选参数.callback(回调函数)规定当load方法完成后所需执行的回调函数
		//responestxt:包含回调成功后的返回结果内容(响应内容)
		//statusTxt:回调状态
		//eg:首先load()方法完成后显示一个提示框,如果load方法执行成功,
		<style type="text/css">
			#div1{
				 width: 400px;
				 height: 400px;
		//如果失败,显示"错误信息"
		//node:成功"success"失败"error"
// 		jquery-ajax 的get()和post()方法:主要用于通过http get 或 post请求,
// 		从服务器单元请求数据
//         get:从指定的资源请求数据,get基本上用于从服务器获取数据.
// 		post:向指定的资源提交要处理的数据,post也可以从服务器获取数据  
        // 常用于连通请求一起发送数据,不会缓存(cookie)数据
		
		//ajax->get()方法,语法:$("selector").get(url，callback)
		//url——必须参数,callback可选参数
		//eg:使用get()方法 从服务器上的一个文件中获取数据
		$("#button3").click(function(){
			$.get("demo.php",function(data,status){
				alert("数据"+data+"\n状态："+status) 
		})
		
// 		$ == jquery全局函数
// 		总结:
// 		query ajax中的load方法将返回的书库放在指定的元素中,不是全局函数.$1
// 		get()同样是jquery的函数,他的作用把返回的数据交给用户处理,是全局函数
// 		load的实现几乎等同于get的实现.在ajax获取机制上没有区别.
        // load方法的另外一个和get的重要区别:load可以指定要插入文档的指定部分.
		
		//图片轮播
		//方法1:通过css3的animate以及keyframs属性实现
		//首先学习css3当中的@keyframes和animate
		//@keyframes规则用于创建动画,在@keyframes中规定某个css样式.就能创建由当前样式逐渐变成新样式的动画效果.
		//支持主流浏览器
		// chrome.safari需要加前缀"-webkit-" ie9以及更早版本不支持animate属性
		//@keyframes语法:
// 		            @keyframes 函数名{
// 						内容
// 					}
// eg:-webkit@keyframes firestanimate{
// 	from(background:yeelow),
// 	to(background:red),
// }
//css3动画
// 用animate规则创建动画时,需要将其绑定到某个选择器,否则不会产生动画效果

		})
	</script>
	</head>    
	<body>
		<div id="div1" style="background-color: aquamarine;">
			
		</div>
		<button type="button" id="button1">显示</button>
		<button type="button" id="button2">弹出框</button>
		<button type="button" id="button3">animete</button>
	</body>
	</html>

jquery调用方法：1.在软件内创建html文件。和笔记文件 js引用文件 demo文件
2.引用jquery
3.写出入口函数：￥（doucument）。ready（function（）{

}）

qq_26170225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训笔记2019518wangzhuoc

本周学到了ajax方法以下为ajax案例：<html> <head> <meta charset="utf-8"> <title></title> } </style> <script src="jquery-1.8.3.min.js" type="text/javascript" ch...
复制链接

扫一扫