jQuery学习——jQuery AJAX 及图片轮播

最新推荐文章于 2023-03-08 20:54:30 发布

balabalapd

最新推荐文章于 2023-03-08 20:54:30 发布

阅读量791

点赞数 1

本文链接：https://blog.csdn.net/WLkkjm/article/details/90033860

版权

本文详细介绍了jQuery的AJAX操作，包括load()方法的使用，以及AJAX的get()和post()方法，强调了load方法与get方法的区别。同时，文章还讲解了如何使用CSS3的animation属性和@keyframes规则实现图片轮播，提供了示例代码和浏览器兼容性说明。

摘要由CSDN通过智能技术生成

一、jQuery AJAX

1.什么是AJAX

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

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

2.jQuery-AJAX load()方法

<1>从服务器加载数据，并把数据放入我们指定的元素中

<2>语法

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

3.自动获取练习

<1>获取外部文本

●代码如下：

demo1.txt内容：

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.txt";
                $("#div1").load(url)
            })
            $("#div1").mouseout(function(){
                $("#div1").html("");
            })
            //1、如下是获取外部文本
            $("#button1").click(function(){
                url="demo1.txt";
                $("#div1").load(url)
            })
        })
    </script>
</head>
<body>
<div  id="div1" style="background-color:rgb(204,204,153);width:200px;height:100px;"></div>
<button id="button1">获取外部文本</button>
</body>
</html>

●代码实现：

点击“获取外部文本”

<2>获取指定外部文本信息

●代码如下：

demo1.txt内容：

最低0.47元/天解锁文章

balabalapd

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习——jQuery AJAX 及图片轮播

一、jQuery AJAX1.什么是AJAX <1>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。 <2>应用案例：谷歌地图、优酷视频、人人网等2.jQuery-AJAX l...
复制链接

扫一扫