34-JQuery-Day04

最新推荐文章于 2024-08-30 20:29:15 发布

哥，你好猛

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量110

点赞数

分类专栏：前端三件套+jQuery 文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/wy1511861159/article/details/120054787

版权

前端三件套+jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery-Day04

第一节：jQuery的动画（了解）

1.show()展示
2.hide()隐藏
3.toggle();

4.fadeIn(time,匀速与非匀速,回调函数)  淡入
5.fadeOut() 淡出
6.fadeTo(time,透明度,匀速与非匀速,回调函数)

7.sideDown() 向下滑动
8.sideUp()向上滑动

setInterval(function(){
    $(".div1").animate({"width":width+"px"},2,function(){
        width +=2;
    });
},2);

第二节：AJAX

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

什么叫做异步请求：页面在渲染的时候可能需要某些其他网络资源，我们可以不用等待资源请求完毕后再往下执行，而是可以直接往下。

局部刷新：使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

基本的语法：

$.ajax({settings})

注意：settings是已配置参数，是一个json对象

常见setting参数：

1、url–请求地址

2、type–请求方式（get,post）

3、data—请求的参数 ,封装成对应请求的参数格式（1.json对象 2.表格.serialize()）

4、dataType–返回的数据类型（xml,json）

5、success–请求成功进行回调

6、error–请求失败进行回调

$(function () {
   ajax();
});
function ajax() {
    $.ajax({
        url:"js/indexmsg.json",
        data:"id:11",
        dataType:"json",
        async: false,
        success:function (data) {
            context(data);
        }
    });
};

补充：

在谷歌浏览器中调试请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XgX1KiW-1630548110573)(https://i.loli.net/2021/08/27/mt3LJwjYxpXWalv.png)]

常见的状态码：

1、404–请求地址未找到

2、200–请求成功

3、500–服务器内部错误。（服务端报错–JAVA程序）

<script type="text/javascript">
    $(function(){
    initFunction();
});

function initFunction(){

    $("input[type='button']").click(function(){
        var formData = $("form").serialize();
        $.ajax({
            url:"01",
            type:"post",
            data:formData,//序列化表单--将表单中数据提取出来
            dataType:"json",
            success:function(){
                alert("请求成功");
            }
        })
    })
}
</script>
</head>
<body>
    <form >
    用户名：<input type="text" name="uname" value=""/>
        昵称：<input type="text" name="nickName" value=""/>
            <input type="button" value="提交"/>
                </form>
</body>

//页面初始化是渲染
$(function(){
    requestLi();
});

function requestLi(){
    //请求服务端数据
    $.ajax({
        url:"js/city.json",
        dataType:"json",//自动转JSON数组
        async:true,
        data:{"id":12},
        success:function(data){
            initUl(data);
        }
    })
    //我们通过直接请求一个JSON数据模拟
}

function initUl(data){
    for(var i = 0 ;i<data.length;i++){
        //将数据追加至UL
        //拼HTML元素
        $("ul").append("<li>"+data[i].city+"</li>");
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8m7tLrc-1630548110575)(https://i.loli.net/2021/08/27/SW8EYzDBdFOHfUg.png)]

第三节：正则表达式

正则表达式，又称规则表达式**。**（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式其实就是一串文本，指定一系列的规则。

应用：数据检索（爬虫）数据替换（聊天）数据格式的校验（前端页面）

注意：在任何语言中都可以写正则表示

在JS中写正则表达式语法：

var 变量名 = new RegExp(/规则/)；

var 变量名 = / 规则/；

let val = $(".username").val();
    let reg = new RegExp(/^1[3456789]\d{9}$/);
    let b = reg.test(val);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gYhlEHks-1630548110576)(https://i.loli.net/2021/08/27/ht3LfMUgP1QJTYq.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zW3IE8Lo-1630548110579)(https://i.loli.net/2021/08/27/iXl6LwS42G5tm8k.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6D3p6oS4-1630548110580)(https://i.loli.net/2021/08/27/X89qIPOTcj4knd7.png)]

片转存中…(img-gYhlEHks-1630548110576)]

[外链图片转存中…(img-zW3IE8Lo-1630548110579)]

[外链图片转存中…(img-6D3p6oS4-1630548110580)]

[外链图片转存中…(img-GyL3pSCQ-1630548110581)]

哥，你好猛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
34-JQuery-Day04

JQuery-Day04第一节：jQuery的动画（了解）1.show()展示2.hide()隐藏3.toggle();4.fadeIn(time,匀速与非匀速,回调函数) 淡入5.fadeOut() 淡出6.fadeTo(time,透明度,匀速与非匀速,回调函数)7.sideDown() 向下滑动8.sideUp()向上滑动setInterval(function(){ $(".div1").animate({"width":width+"px"},2,function
复制链接

扫一扫

专栏目录