1.animate 实现动画效果的JavaScript脚本: 

<script type="text/javascript">
        $(function () {
            $("span").animate({
                left: "+=100px"
            }, 3000, function () {
                $(this).animate({
                    height: '+=30px',
                    width: '+=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>

 

posted on 2014-09-20 20:03  yuyezhulan  阅读(175)  评论(0编辑  收藏  举报