web实训知识点——0517

最新推荐文章于 2019-05-18 18:21:10 发布

zytnice

最新推荐文章于 2019-05-18 18:21:10 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/zytnice/article/details/90312140

版权

回调函数：

load方法：

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

例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
             $("#button3").click(function(){
                $("#div1").load("demo.txt #p1",function(responseTxt,statusTxt){
                    if(statusTxt="success") {
                        alert("成功")

                    }
                    if(statusTxt="error"){
                        alert("失败")
                    }
                })

            })
  </script>
</head>
<body>
<div id="div1" style="background-color: rgb(204,204,153);width: 500px;height: 500px;overflow: scroll"></div>
<button id="button3">获取外部信息有回调函数</button>
</body>
</html>

AJAXde的get（）和post（）方法：主要用于通过HTTP GET 或POST请求
GET:从服务器里面请求数据
POST：向指定的资源提交要处理的数据，POST也可以从服务器获取数据，并且常用于连同请求一起发送数据，不会缓存（cookie）数据
AJAX--get（）方法，语法：$("selector").get(uel,callback)
url--必须参数 callback--可选参数
eg：使用get（）方法从服务器上的一个文件获取数据

例二：

get方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
             $("#button4").click(function(){
                $.get("demo.php",function(data,status){
                    alert("数据："+data+"\n状态"+status)
                })
            })
  </script>
</head>
<body>
<div id="div1" style="background-color: rgb(204,204,153);width: 500px;height: 500px;overflow: scroll"></div>
<button id="button4">发送HTTPget请求并获取返回的结果</button>
</body>
</html>

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

css样式轮播图：

方法一：通过css的animation以及@Keyframes属性实现
首先学习css3当中的animation以及@Keyframes
@Keyframes规则：用于创建动画，在@Keyframes当中规定某个css样式，就能创建当前样式逐渐变成新样式的动画效果。
浏览器支持：IE浏览器（10），Firefox，Opera支持animation以及@Keyframes规则
Chrome，Safari需要加前缀“-webkit-”
注：IE9以及更早的版本不支持animation以及@Keyframes规则
用@Keyframes规则创建动画时，需要将其（函数名）绑定到某个选择器，否则不会产生动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #screen{
            height: 9999px;
            width: 9999px;
            animation: myFirst 8s;
        }
        #screen img{
            float: left;
        }
        #main{
            height:200px ;
            width:200px;
            overflow: hidden;
        }
        @keyframes myFirst {
            25%{transform: translateX(0px)}
            50%{transform: translateX(-300px)}
            75%{transform: translateX(-600px)}
            100%{transform: translateX(-900px)}
        }


    </style>
</head>
<body>
<div id="main">
    <div id="screen">
        <img src="../blog/images/list_1.jpg" height="200" width="300px">
        <img src="../blog/images/list_1.jpg" height="200" width="300px">
        <img src="../blog/images/list_1.jpg" height="200" width="300px">
        <img src="../blog/images/list_1.jpg" height="200" width="300px">
    </div>
</div>
</body>
</html>

zytnice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实训知识点——0517

回调函数：load方法：在load（）方法中callback是可选参数，callback（回调函数）规定当load方法完成后所需要执行的回调函数，callback回调函数的参数设置responseTxt：包含回调成功后的返回结果内容（响应内容）statusTxt：回调状态首先用load（）方法完成后显示一个提示框，如果load方法执行成功，则显示“外部内容加载成功”如果失败，则显...
复制链接

扫一扫