day26jquery以及ajax

最新推荐文章于 2022-06-11 16:23:13 发布
最新推荐文章于 2022-06-11 16:23:13 发布
阅读量133 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38068491/article/details/83934164
版权

1.$===jQuery

2.size():获取当前元素序列个数。等同于length属性;

   for (var i = 0; i < li.size(); i++) {}

案例：京东轮播图淡入淡出

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        ul,ol{ list-style: none;}

        .wrapper{

            width: 670px;

            height: 240px;

            margin: 100px auto;

            overflow: hidden;

            position: relative;

        }

        ul{

            position:relative;

        }

        ul li{

            position:absolute;

            top:0;

            left:0;

        }

        ol{

            position: absolute;

            right: 0;

            bottom: 10px;

            width: 190px;

        }

        ol li{

            float: left;

            width: 20px;

            height: 20px;

            margin: 0 5px;

            text-align: center;

            border-radius: 50%;

            cursor: default;

            background-color: #abc;

        }

        ol li.current{

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul id="box">

            <li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>

            <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>

            <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>

            <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>

            <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>

            <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>

        </ul>

        <ol style="z-index: 10;" id="uu">

            <li class="current">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ol>

    </div>

</body>

</html>

<script src="../js/jquery.min.js"></script>

<script type="text/javascript">

    

    var li = $("#box li");

    var oli = $("#uu li");

    var index = 0;

    

    setInterval(autoPlay,1000);

    

    function autoPlay(){

        if(index == li.size()-1){

            index = 0;

        }else{

            index++;

        }

        li.eq(index).fadeIn().siblings().fadeOut();

        oli.eq(index).addClass("current").siblings().removeClass("current");

    }

</script>    

3.列队动画：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #box{

                width: 100px;

                height: 100px;

                background: red;

            }

        </style>

    </head>

    <body>

        <div id="box">

        </div>

    </body>

</html>

<script src="js/jquery.min.js"></script>

<script type="text/javascript">

    /*$("div").show(1000,function(){

        $(this).fadeOut(1000,function(){

            $(this).fadeIn(1000,function(){

                $(this).hide(1000);

            });

        }

    });*/

    $("div").show(1000).fadeOut(2000).fadeIn(2000).hide(1000);//一般这样写

</script>

4.对象.animate(样式对象，时间毫秒数,linear/swing,callBack)

    linear:匀速

    swing：变速，先慢，中间快，后面慢。

    callBack:回调 函数，当前动画执行完毕后执行。

    $("#box").animate({

        width : "500px",

        height:300,

        opacity:0.2

    },2000,"swing");

5.

    stop()：停止当前动画，继续下面的动画

    stop(true):停止当前元素的所有动画。

    stop(true,true):停止当前元素的所有动画,当前动画强制到达目标位置。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #box{

                width: 100px;

                height: 100px;

                background: red;

                position: absolute;

                top: 100px;

            }

            #box1{

                width: 100px;

                height: 100px;

                background: yellow;

                position: absolute;

                top: 150px;

            }

        </style>

    </head>

    <body>

        <div id="box">

            

        </div>

        <button id="start">开始</button>

        <button id="stop">停止</button>

        <!--<div id="box1">

        </div>-->

    </body>

</html>

<script src="js/jquery.min.js"></script>

<script type="text/javascript">

    //语法

    /*$("#box").animate({

        width : "500px",

        height:300,

        opacity:0.2

    },2000,"swing");*/

//列队动画

1） /*$("#box").animate({

        width : "500px"

    },function(){

        $(this).animate({

            height:300

        },function(){

            $(this).animate({

                opacity:0.2

            })

        })

    });*/

    2）//$("#box").animate({width:300}).animate({height:300}).animate({opacity:0.2}); 

//一般这样写

3）/*$("#box").animate({width:300})

    $("#box").animate({height:300})

    $("#box").animate({opacity:0.2});*/

//    stop

    $("#start").click(function(){

        $("#box").animate({left:300},1000).animate({width:300},1000).animate({height:300},1000).animate({opacity:0.2},1000);

    });

    

//    $("#stop").click(function(){

//        $("#box").stop();

//    });

//    $("#stop").click(function(){

//        $("#box").stop(true);

//    });

    $("#stop").click(function(){

        $("#box").stop(true,true);

    });

</script>

6.queue();插入队列。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            div{

                width: 100px;

                height: 100px;

                background: red;

            }

            #box1{

                width: 100px;

                height: 100px;

                background: yellow;

            }

        </style>

    </head>

    <body>

        <div id="box"></div>

        <div id="box1"></div>

    </body>

</html>

<script src="js/jquery.min.js"></script>

<script type="text/javascript">

    /*$("#box").animate({

        width:500

    },1000,function(){//回调函数在animate方法的里面

        $("#box1").css("background","blue");

    })*/

    /*$("#box").animate({

        width:500

    }).queue(function(next){//这个回调函数在animate方法的外面

        $("#box1").css("background","blue");

        next();//可以使下面的动画继续操作

    }).hide(1000);*/

    /*$("#box").animate({

        width:500

    }).queue(function(){

        $("#box1").css("background","blue");

        $(this).dequeue();//可以使下面的动画继续操作，这个方法一般不用，因为他是低版本的jquery里面的方法

    }).hide(1000);*/

</script>

7.hover(fn1,fn2);伪类  案例是手风琴效果   

    fn1:鼠标移入回调

    fn2:鼠标移出回调

     li.hover(function(){

        $(this).animate({width:800}).siblings().animate({width:100});

    },function(){

        li.animate({width:240});

    });

案例：手风琴效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        ul{list-style: none}

        *{margin:0; padding:0;}

        div{

            width: 1160px;

            height: 400px;

            margin:50px auto;

            border:1px solid red;

            overflow: hidden;

        }

        div li {

            width: 240px;

            height: 400px;

            float: left;

        }

        div ul {

            width: 1300px;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

</body>

</html>

<script src="../js/jquery.js"></script>

<script type="text/javascript">

    var li = $("li");

    for (var i = 0; i < li.size(); i++) {

        var img = `<img src="images/${i+1}.jpg"/>`;

        li.eq(i).html(img);

    }

    li.hover(function(){

        $(this).animate({width:800}).siblings().animate({width:100});

    },function(){

        li.animate({width:240});

    });

</script>

案例：图片的翻转

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            div{

                width: 300px;

                height: 150px;

                border: 1px solid black;

                margin: 100px auto;

                position: relative;

            }

            img{

                width: 300px;

                height: 150px;

                position: absolute;

                left: 0px;

                top:0;

            }

            p{

                width: 300px;

                height: 0px;

                position: absolute;

                left: 0px;

                top:75px;

                background: red;

                line-height: 150px;

                text-align: center;

                font-size: 50px;

                display: none;

            }

        </style>

    </head>

    <body>

        <div>

            <img src="small_bg3.png"/>

            <p>背面</p>

        </div>

    </body>

</html>

<script src="../../jquery.js">

    

</script>

<script type="text/javascript">

    $("div").hover(function(){

        

        $("img").animate({

            height:0,

            top:75

        },1000,function(){

            

            $(this).hide();

            $("p").show().animate({

                

                height:150,

                top:0

            },1000)

            

        })

        

    },function(){

        $("p").animate({

            height:0,

            top:75

        },1000,function(){

            $(this).hide();

            $("img").show().animate({

                height:150,

                top:0

            },1000);

        });

    });

</script>

8.语法：事件绑定，相当于js中的事件监听

1.bind("事件","data",function(e){

        e.data

  })

1）$("button").bind("click",function(){

$("#box").html("哈哈哈");

})

2）$("button").bind("click","我积极",function(e){

$("#box").html(e.data);

 })

3）$("button").bind({

         click:function(){

             $("#box").html("哈哈哈");

         },

         mouseover:function(){

             $("#box").html("我先来的");

         }

         

    })

2、.unbind("事件"),解除某个事件的绑定。

document.mousemove(function(){

    });

    document.mouseup(function(){

        document.unbind("mousemove");

    })

案例：bind实现拖拽

<!DOCTYPE html>

<html>

    <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #box{

                 width: 100px;

                 height: 100px;

                 background: red;

                 position: absolute;

             }

             

         </style>

    </head>

    <body>

         <div id="box">

             

         </div>

    </body>

</html>

<script src="../jquery.js">    

</script>

<script type="text/javascript">

    $("div").bind("mousedown",function(e){//事件绑定

         var x=e.offsetX;

         var y=e.offsetY;

         $(document).bind({

             mousemove:function(e){

                 l=e.pageX-x;

                 t=e.pageY-y;

                 var maxL=$(window).width()-$("div").width();//获取屏幕的宽高

                 var maxT=$(window).height()-$("div").height();

             l=l<0?0:(l>maxL?maxL:l);

             t=t<0?0:(l>maxT?maxT:t);

             $("div").css({

                 left:l,

                 top:t

             });

             return false;

             },

             mouseup:function(){

                  $(this).unbind("mousemove");// 事件解绑

             }

         })

    })

</script>

9.mouseover和mouseenter的区别

   有两个盒子时，小盒子在大盒子里面。

   mouseover事件：鼠标移入大盒子会触发事件，再移入小盒子也会触发事件。

  mouseenter事件：鼠标移入大盒子会触发事件，再移入小盒子不会触发事件

例子：

<!DOCTYPE html>

<html>

    <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             

             #box{

                 width: 300px;

                 height: 300px;

                 background: red;

             }

             #content{

                 width: 100px;

                 height: 100px;

                 background: yellow;

             }

         </style>

         

    </head>

    <body>

         

         <div id="box">

             <div id="content"></div>

         </div>

         

    </body>

</html>

<script src="../jquery.js"></script>

<script type="text/javascript">

    

    /*$("#box").mouseover(function(){

         alert("1");

    })*/

    $("#box").mouseenter(function(){

         alert("1");

    })

</script>

10.事件委托

1).delegate（"li","click",function(){}）//事件委托

   $("ul").undelegate（）//解除事件委托

2）.on("click","li",function(){})//事件委托

      $("ul").off()//解除事件委托

（注意：可以混合解除事件委托，比如用delegate委托，可以用off解除）

案例：电商网站五星评级

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul{

                width: 300px;

                margin: 200px 200px;

                list-style: none;

                padding: 0px;

                font-size: 50px;

            }

            li{

                float: left;

                width: 60px;

                text-align: center;

                color: red;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>☆</li>

            <li>☆</li>

            <li>☆</li>

            <li>☆</li>

            <li>☆</li>

        </ul>

    </body>

</html>

<script src="../../jquery.js"></script>

<script type="text/javascript">

    var wjxEmpty = "☆";

    var wjxFull = "★";

    $("ul").delegate("li","mouseenter",function(){

        $(this).html(wjxFull).prevAll().html(wjxFull).end().nextAll().html(wjxEmpty);

    });

    $("ul").delegate("li","mouseleave",function(){

        $("li").html(wjxEmpty);

        $(".clickOver").html(wjxFull).prevAll().html(wjxFull);

    });

    $("ul").delegate("li","click",function(){

        $(this).addClass("clickOver").siblings().removeClass("clickOver");

    });

</script>

11.one方法（此方法只执行一次）

    $(document).one("click",function(){

         alert("hehhe1");

    })

12.scrollTop（）方法

    没有值，就是获取页面滚走的距离

    有参数就是设置页面滚走的距离

   $(window).scroll(function(){

   console.log($("body,html").scrollTop());//页面滚走的距离         //IE浏览器 //谷歌浏览器

  })

    $("body,html").scrollTop(500)//设置页面滚走的距离

13.offset方法和position方法

    1） 距离屏幕顶部或者左边的距离，就算相邻父级元素有定位，也是到屏幕顶部或者左边的距离，包括父元素padding，border

    console.log($("#content").offset().left);

    console.log($("#content").offset().top);

    2）a.有父元素就是到父元素顶部的距离，不包括父元素的边框；

       b.本元素有定位，那么就是定位时的距离，不包括父元素边框。

      c.本元素没有定位，如果有父元素，那就是父元素padding值，没有就是0.不包括边框

    console.log($("#content").position().left);

    console.log($("#content").position().top);

14.ajax异步请求之load

   load是一个post请求

   可以用来加载页面，（“header”).load("header.html");

   好处：就是减少连接，提高性能

   $(this).load("index.php",       {uname:"tom"},function(res,type){

            console.log(type);//type判读断是post请求，还是get请求，res后台返回过来的值

        })

15.ajax请求的格式：

1）$.get("index.php",{uname:"tom",age:23},function(res,type,obj){

        alert(res,type,obj.status,obj.readyState);

    })

2） $.post("index.php",{uname:"tom",age:23},function(res,type,obj){

        console.log(res,type,obj.status,obj.readyState);

    })

   3） $.ajax({

        type:"post",

        url:"index.php",

        data:{

            uname:"tom",

            age:23

        },

        success:function(){

            console.log(res);

        },

        erro:function(err){

            console.log(err);

        }

    })

        

qq_38068491
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery的ajax发送FormData的方式
01-23
url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { console.log(data); }, processData : false, contentType : false }); }); [removed] </body> </html>
JQuery+Ajax
qq_48642210的博客
03-07 649
jQuery 什么是jQuery？ jQuery是一款JavaScript库，query的用途是来做查询 使用jQuery让我们的对html文档遍历和操作，事件处理、动画以及Ajax变得简单（write less,do more） jQuery的使用 下载jQuery库 下载地址：https://jquery.com/download/ 引入jQuery库 <script src="https://code.jquery.com/jquery-3.6.0.min.js"><
Ajax和JQuery结合
hax1435501085的博客
04-11 185
Ajax 1. ajax是什么? “Asynchronous Javascript And XML”（异步JavaScript和XML）， 并不是新的技术，只是把原有的技术，整合到一起而已; 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑定和调用。 2. 有什么作用 咱们的...
Day03jquery框架对于ajax的封装
ZZZ___bj的博客
01-02 511
$.ajax({ method:get|post, // 异步请求的提交方式,若不写，默认get方式 url:"/ajax/check", //提交的路径，如：/ajax/check 若是get则后直接跟参数/ajax/check?name=123&password=123 data:"name=123&password=123", //若是p
Day19_Jquery及其AJax，Json数据示例
Dxkr_CB的博客
06-11 78
Day19_Jquery及其AJax，Json数据示例
Day10_JQuery&Ajax（MarkDown版）
qq_40233706的博客
09-03 467
Day10_JQuery&Ajax 全天目标 1.了解JQuery的基本概念 2.通过入门案例掌握JQuery的使用步骤 3.理解JQuery对象和JS对象区别与转换 4.掌握JQuery的基本选择器 5.掌握JQuery的属性选择器 6.掌握JQuery的常用DOM操作 7.理解JQuery遍历 8.理解JQuery绑定事件 9.理解JQuery事件切换 10.了解Ajax的概念 11....
day20_JQuery基础.zip
02-20
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装...
java_ajax_JQuery_day02.pdf
05-08
java_ajax_JQuery_day02.pdf
java_ajax_JQuery_day05.pdf
05-08
java_ajax_JQuery_day05.pdf
java_ajax_JQuery_day04.pdf
05-08
java_ajax_JQuery_day04.pdf
node-v14.17.3-darwin-x64.tar.xz
04-22
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
c语言UDP传输系统源码.rar
04-22
c语言UDP传输系统源码.rar
node-v16.2.0-darwin-x64.tar.xz
最新发布
04-22
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于matlab多目标遗传算法matlab程序.rar
04-22
基于matlab多目标遗传算法matlab程序.rar
MCSkinn (我的世界）皮肤制作工具
04-22
软件可以给需要制作自己喜爱的MC皮肤的玩家来自己制作皮肤，快来下载吧！
数据可视化-Pyecharts绘制饼图
04-22
数据可视化-Pyecharts绘制饼图
操作系统基础知识.zip
04-22
操作系统是计算机系统中至关重要的组成部分，它作为计算机硬件与软件之间的桥梁，负责管理和控制计算机的硬件和软件资源，确保它们得到合理的分配和使用。操作系统不仅影响计算机的性能，还决定了用户界面的友好程度以及计算机系统的安全性和稳定性。因此，深入理解和掌握操作系统的知识对于计算机专业人士来说至关重要。
欧母龙PLC例程源码小车控制程序
04-22
欧母龙PLC例程源码小车控制程序提取方式是百度网盘分享地址
么么哒.mp3
04-22
么么哒.mp3
使用jquery根据选择时间控件的值生成对应的星座
06-06
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> 请选择出生日期： <div id="constellation"></div> $(function() { $('#birthday').on('change', function() { const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值