WEB页面设计实训课堂笔记06DYL

最新推荐文章于 2019-09-25 10:55:11 发布

XUEXIWEIYUAN'

最新推荐文章于 2019-09-25 10:55:11 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/weixin_44762370/article/details/90238815

版权

JQuery AJAX学习

课堂练习及相关代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){//入口函数
            $("#div1").mouseover(function(){
                url="demo1";
                $("#div1").load(url)//ajax加载函数
            })
            $("#div1").mouseout(function(){
                $("#div1").html("");
            })
            //1、如下是获取外部文本
            $("#button1").click(function(){
                url="demo1";
                $("#div1").load(url)
            })
            //2、如下是获取指定外部文本信息
            $("#button2").click(function(){
                $("#div1").load("demo1 #p1")
            })

//            在load()方法中callback是可选的参数，callback（回调函数）规定当load方法完成后所需要执行的
//            回调函数，callback回调函数的参数设置
//            responseTxt:包含回调成功后的返回结果内容(响应类型)
//            statusTxt:回调状态
//            eg:首先load()方法完成后显示一个提示框，如果load()方法换行成功，则显示“外部内容加载成功”
//            如果失败，显示“错误信息”
//            node:成功-“success” 失败-“error”

            //3、如下是获取外部信息有无回调函数
            $("#button3").click(function(){
                $("#div1").load("demo1",function(responseTxt,statusTxt){
                    if(statusTxt == "success"){
                        alert("外部内容加载成功")
                    }
                    if(statusTxt == "error"){
                        alert("错误信息")
                    }
                })
            })

        

            //url--必选参数， callback--可选参数
            //eg：使用get()方法从服务器上的一个文件中获取数据

            //4、如下是获取数据状态
            $("#button4").click(function(){
                jQuery.get("demo.php",function(data,status){
                    alert("数据："+data+"\n状态："+status)
                })
            })

            //$ == jQuery-全局变量
            //总结：
            //get()同样是jQuery的AJAX的函数，他的作用是把返回的数据交给用户处理，是全局函数
            //load的实现几乎等同于get的实现，在AJAX获取机制上没什么区别
            //load方法的另一个和get的重要区别：load可以指定要插入文档的某个部分
        })
    </script>
</head>
<body>
<div  id="div1" style="background-color:rgb(204,204,153);width:300px;height:500px;"></div>
<button id="button1">获取外部文本</button>
<button id="button2">获取指定外部文本信息</button>
<button id="button3">获取外部信息有无回调函数</button>
<button id="button4">获取数据状态</button>
</body>
</html>

demo.php

<?php
    echo 'this is text from an external php file'
?>

demo1

123
<p  id="p1">12345678</p>

运行情况

获取外部文本

获取指定外部文本信息

获取外部信息有无回调函数

获取数据状态

一、AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

二、应用案例：谷歌地图、优酷视频、人人网等

1.jQuery-AJAX load()方法

*jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。
* get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数
*
* load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。
* load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。

2.JQuery---AJAX 的get()和post()方法:

主要用于通过HTTP GET 或 POST请求
* 从服务器里面请求数据。
* GET: 从指定的资源请求数据，GET基本上用于从服务器获取数据
* POST: 向指定的资源提交要处理的数据，POST也可以从服务器获取数据，并且
* 常用于连同请求一起发送数据。不会缓存(cookie)数据

语法

$(selector).load(URL.data.callback)
必须的URL参数规定加载的地址
可选的data参数规定与请求一同发送的查询字符串（键值对集合）

图片轮播学习

1、通过CSS3的animation属性以及 @keyframes规则实现。首先学习 CSS3当中的@keyframes和animation
<1>@keyframes规则---用于创建动画，在@keyframes中规定某个CSS样式，就能创建,由当前样式逐渐变成新样式的动画效果。
<2>浏览器支持：Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation属性以及 @keyframes规则、chrome、Safari 需要加前缀 "-webkit-"
* IE9 以及更早的版本，不支持 animation属性以及 @keyframes规则
练习一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*第一种表达方式*/
        @keyframes myFirstAnimate{
            from{background: #4bffba;}
            /*to{background: red;}*/
        }
        /*第二种表达方式*/
        @keyframes mySecondAnimate{
            0%{background: #4bffba;}
            /*50%{background: red;}*/
            /*100%{background: black;}*/
        }
        #div1{
            animation: myFirstAnimate 5s;
            height: 100px;
            width: 100px;
        }
        #div2{
            animation: mySecondAnimate 5s;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<hr/>
<div id="div2"></div>
</body>
</html>

实现效果：

练习二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #screen{
            animation: myfirst 8s;
            height:9999px;
            width: 9999px;

        }
        #screen img{
            float: left;
        }
        #main{
            height: 300px;
            width: 200px;
            overflow: hidden;
        }
        @keyframes myfirst{
            25%{transform: translateX(0px)}
            30%{transform: translateX(-300px)}
            50%{transform: translateX(-300px)}
            55%{transform: translateX(-600px)}
            75%{transform: translateX(-600px)}
            80%{transform: translateX(-900px)}
            100%{transform: translateX(-900px)}
        }
    </style>
</head>
<body>
<div id="main">
    <div id="screen">
        <img src="images/list_1.jpg" height="200px" width="300px"/>
        <img src="images/list_2.jpg" height="200px" width="300px"/>
        <img src="images/list_3.jpg" height="200px" width="300px"/>
        <img src="images/list_4.jpg" height="200px" width="300px"/>
    </div>
</div>
</body>
</html>

效果实现：

→→→