<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script> //1.在webstorm的相同文件夹下创建 index.html文件、和demo1.txt文件、jquery1.8.3包
$(document).ready(function(){ //入口函数
$("#div1").mouseover(function(){
url = "demo1.txt"
$("#div1").load(url) //ajax加载函数
})
$("#div1").mouseout(function(){
$("#div1").html(" ")
})
$("#button1").click(function(){
url = "demo1.txt"
$("#div1").load(url)
}) //获取id="p1"的元素内容，然后加载到指定的div里面
$("#button2").click(function(){
$("#div1").load("demo1.txt #p1")//在文件名后面，拼接一个该元素的id即可
})
//在load()方法中callback是可选的参数，callback(回调函数)规定当load方法完成后所需要执行的
//回调函数。callback回调函数的参数设置:
// responseTxt：包含回调成功后的返回结果内容(响应类容)
//statusTxt：回调状态
//eg: 首先load()方法完成后显示一个提示框，如果load方法执行成功，则显示"外部内容加载成功"
//如果失败，显示'错误信息'
//node ： 成功 ----"success" 失败-----‘error’
$("#button3").click(function(){
$("#div1").load("demo1.txt",function(responseTxt,statusTxt){
if(statusTxt =='success'){
alert("外部内容加载成功")
}
if(statusTxt =='error'){
alert('错误信息')
}
})
})
/*JQuery---AJAX 的get()和post()方法: 主要用于通过HTTP GET 或 POST请求
* 从服务器里面请求数据。
* GET: 从指定的资源请求数据，GET基本上用于从服务器获取数据
* POST: 向指定的资源提交要处理的数据，POST也可以从服务器获取数据，并且
* 常用于连同请求一起发送数据。不会缓存(cookie)数据。
* */
//ajax---> get()方法， 语法： $("selector").get(url,callback)
// url ---必须参数， callback----可选参数
//eg: 使用get()方法从服务器上的一个文件中获取数据
$("#button4").click(function(){
jQuery.get("demo.php",function(data,status){
alert("数据："+data+"\n状态："+status)
})
})
/* $ === JQuery--全局函数
总结：
* jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。
* get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数
*
* load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。
* load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。
* */
//图片轮播
//方法一： 通过Jquery的新形式实现。 })
</script>
</head><body>
<div id="div1" style="background-color: rgb(204,204,153);
width: 200px;height:400px;overflow: scroll"></div>
<button id="button1">获取外部信息</button>
<button id="button2">获取指定外部信息</button>
<button id="button3">获取外部信息有回调函数</button>
<button id="button4">发送HTTP get请求并获取返回结果</button>
</body>
</html>//方法二: 通过CSS3的animation属性以及 @keyframes规则实现
/*首先学习 CSS3当中的@keyframes和animation
*
* @keyframes规则---用于创建动画，在@keyframes中规定某个CSS样式，就能创建
* 由当前样式逐渐变成新样式的动画效果。
*
* 浏览器支持：
* Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation属性以及 @keyframes规则
*
* chrome、Safari 需要加前缀 "-webkit-"
* 注： IE9 以及更早的版本，不支持 animation属性以及 @keyframes规则
*
*
* @keyframes 语法：
* @keyframes 函数名(自定义){
* 内容
* }
*eg：
* @keyframes firstAnimation{
* from {background: yellow;}
* to{ background: red;}
* }
*
* // safari和chrome
* @-webkit-keyframes firstAnimation{
* from {background: yellow;}
* to{ background: red;}
* }
* */ //CSS3 动画
/*
* 用@keyframes规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果。
*
*
* */
slide Window（滑动窗口）
jQuery动画总结：
show（），hide（），toggle（），slideUp（），slideDown（），slideToggle（），animate（）
jQuery的淡出淡入
<div>
<ul>
<li><a href="#">首页</a></li>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页实战</a></li>
<li><a href="#">服务端技术</a></li>
<li><a href="#">Python开发</a></li>
</ul>
</li>
<li class="navmenu"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">交流学习</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div><script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
//$(this).children("ul").css({display:'block'})
})
})
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").hide();
//$(this).children("ul").css({display:'none'})
})
})
</script>jQuery尺寸：
px em （css盒子模型）
width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
通过jQuery获取元素的宽高：
<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸</button><script>
$(document).ready(function(){
$('button').click(function(){
var txt=" "
txt +="div的宽度是："+$("#div1").width()+"px"+"<br>"
txt +="div的长度是："+$("#div1").height()+"px"+"<br>"
txt +="div的宽度，包括内边距"+$("#div1").innerWidth()+"px"+"<br>"
txt +="div的长度，包括内边距"+$("#div1").innerHeight()+"px"+"<br>"
txt +="div的宽度，包括内边距和边框"+$("#div1").outerWidth()+"px"+"<br>"
txt +="div的长度，包括内边距和边框"+$("#div1").outerHeight()+"px"+"<br>"
txt +="div的宽度，包括内边距和外边距"+$("#div1").outerWidth(true)+"px"+"<br>"
txt +="div的长度，包括内边距和外边距"+$("#div1").outerHeight(true)+"px"+"<br>"
$("#div1").html(txt)
})
})
</script>图片动画放大流程说明：
1.首先搭建HTML，分析页面可知，一个大的div里面嵌套一个<img>标签和图片标题，图片标题用<div>包括。
2.搭建css样式
分析样式可知，现在主要有3种样式，p_list,<img>,p_Alt这三种样式。
3.编写jQuery代码
首先，需要获取p_list类,且获取p_list是多个对象数组，我们不知道具体操作哪一个p_list需要用到jQuery当中的each函数来遍历
each（）：以每一个匹配的元素作为上下文来执行一个函数。相当于，each可以帮助我们获取第一个p_list，然后操作一系列作用
注意：如果你想得到jQuery对象，可以使用$(this)函数
append（）：向每个匹配的元素内部追加内容
prependTo（）：把所有匹配的元素前置到另一个。指定的元素元素集合中。
eg：
$("<div class='p_Img'>").append(img)，在我们p_Img当中添加img元素。
//相当于
<div class='p_Img'>
<img src="">
</div>
解释：
$(A).append(B):将元素B添加到A当中
$(A).appendTo(B):将A元素添加到B当中
$("<div class='p_Img'>").append(img).prependTo($this)
首先我们通过$("<div class='p_Img'>")创建了一个div：<div class="p_Img'></div>
用于保存改变后的图片。然后，我们通过 $("<div class='p_Img'>").append(img)
将img元素添加到了p_Img当中，相当于：
<div class='p_Img'>
<img src="">
</div>
最后通过.prependTo($this)，我们将
<div class='p_Img'>
<img src="">
</div>
添加到p_list当中，相当于
<div class='p_list'>
<div class='p_Img'>
<img src=""></div>
</div>点击放大的动画有哪些
1.首先p_list长宽放大，以及边框放大
2.图片回到正常尺寸
3.p_Alt图片标题出现
4.关闭按钮出现
5.点击放大按钮消失
5020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
