1.animate 实现动画效果的JavaScript脚本:
<script type="text/javascript">
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=30px',
'+=30px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
});
</script>
2.JSON数据格式的解析:
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data)
{
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
3.getScript脚本的使用方法:
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("http://www.imooc.com/data/sport_f.js",function() {
$this.attr("disabled", "true");
});
})
});
</script>
4.get方式加载的JavaScript:
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function(data){
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}, "json");
})
});
</script>
5.post方式加载的JavaScript 方法:
</script> <script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("http://www.imooc.com/data/check_f.php" ,function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
6.JavaScript资料的序列化:
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
})
</script>
7.JavaScript aJax加载服务器数据的方法:
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType:"text",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
8.Ajax设置全局变量:
<script type="text/javascript">
$(function () {
?
?
?
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
9.AJax startload 和stopload的使用方法:
<script type="text/javascript">
$(function () {
$("divload").ajaxStart(function(){
$(this).html("正在请求数据...");
});
$("divload").ajaxStop(function(){
$(this).html("数据请求完成!");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}
});
})
});
</script>