jQuery2

最新推荐文章于 2023-07-07 14:28:52 发布

w_cyj

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量90

点赞数

分类专栏： js 文章标签： jquery

本文链接：https://blog.csdn.net/w_cyj/article/details/107962121

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

jQuery2

动画

hide：隐藏
show：显示
toggle：切换
slidedown:向下切
slideup: 向上切下拉菜单效果
fadeIn:逐渐显示
fadeOut“逐渐消失
fadeTo:透明到多少

animate:

 $(document).on("click",function(e){
            $("div").animate({
                left:e.clientX-25,
                top:e.clientY-25,
                width:100,
                height:100//变到指定位置
            },500)
        })

jQuery插件

1.遍历jQuery对象，必须用this返回

重构宽度

  $.fn.widths=function(w){
           if(w===undefined) return         
           parseFloat(this.css("width"));
           w=parseFloat(w)
           if(isNaN(w)) return;
           this.css({
               width:w+"px"
           })
        }

重构颜色

 $.fn.bgc=function(color){
            if(color===undefined) return this.css("backgroundColor");
            this.css("backgroundColor",color);
            return this;
        }

2.使用$each，可以不用this返回

$each的封装

 $.extend({
            eachs:function(list,fn){//要遍历的对象，函数
                switch(list.constructor){
                    case Array://数组
                    case jQuery://jQuery对象
                    case HTMLCollection://需要数组遍历
                    case NodeList:
                    for(var i=0;i<list.length;i++){
                        fn(i,list[i]);//遍历先放index后放item
                    }
                    break;
                    case Object://遍历对象用for in
                        for(var prop in list){
                            fn(prop,list[prop]);
                        }
                    break;
                    
                    case Set:// set没有key值
                        for(var value of list){
                            fn(value,value);
                        }
                    break;
                    case Map:
                         for(var value of list){
                            fn(value[0],value[1]);
                        }
                    break;
                }
            }
        })

3.自执行函数：轮播图

轮播图
 (function () {
            $.fn.carousel = function () {
                var index = 0;
                var num = 0;
                this.width(900).height(300).css({
                    position: "relative",
                    margin: "auto",
                    overflow:"hidden"
                });
                this.children(".imgCon").width(1800).height(300).css({
                        position: "absolute",
                        left: 0
                    }).children().width(900).height(300).eq(0)
                    //设置所有图片CSS样式，第一个设置为块元素
                    .css({
                        display: "block"//块元素
                    }).siblings().css("display", "none");//剩余的设为none
                var dotList = this.children(".dotList");
                dotList.css({
                    listStyle: "none",
                    cursor: "pointer",//光标呈现为指示链接的指针(一只手)
                    margin: 0,
                    padding: 0,
                    position: "absolute",
                    bottom: 20
                }).children().css({
                    width: 15,
                    height: 15,
                    borderRadius: 15,
                    border: "1px solid #FF0000",
                    marginLeft: 10,
                    float: "left"
                }).on("click", function () {
                    Array.from(dotList.children()).forEach((item, index1) => {
                        if (this == item) {
                            index = index1;
                            $("this").set(index);
                        };
                    });
                });
                $(".dotList").children().eq(0).css({//小圆点第一个元素
                    "backgroundColor": "rgba(255,0,0,0.4)",
                    "marginLeft": "0px"
                });
                dotList.css("left", (900 - dotList.width()) / 2);//小圆点位置
                this.children(".leftBn").css({
                    display: "block",
                    cursor: "pointer",
                    fontSize: 60,
                    height: 60,
                    top:-40,
                    bottom:0,
                    margin:'auto',
                    left: 10,
                    lineHeight: "60px",
                    position: "absolute",
                    color: "white",
                    backgroudColor: "rgba(0,0,0,0.1)"
                }).on("click", function () {
                    index--;//点击向左移动
                    if (index < 0) index = $(".imgCon").children().length - 1;
                    $("this").set(index);

                })
                this.children(".rightBn").css({
                    display: "block",
                    cursor: "pointer",
                    fontSize: 60,
                    height: 60,
                    top:-40,
                    bottom:0,
                    margin:'auto',
                    position: "absolute",
                    color: "white",
                    right: 10,
                    backgroudColor: "rgba(0,0,0,0.1)"
                }).on("click", function () {
                    index++;//点击向右移动
                    if (index > 5) index = 0;
                    $("this").set(index);
                })
            }
        })();

        $.fn.set = function (index) {
            $(".dotList").children().eq(index).css({
                "backgroundColor": "rgba(255,0,0,0.4)"
            }).siblings().css("backgroundColor", "rgba(0,0,0,0)");
            $(".imgCon").children().eq(index)
                .css({
                    display: "block",
                }).siblings().css("display", "none");
        }
        $(".carousel").carousel();

jQuery的Ajax

最顶层

$.getJSON();

 $.getJSON("./config.json",function(data){
            console.log(data);
        })// 加载json

$.getScript();

$.getScript("./a.js",function(){
            obj.c();
        }) // 加载js

中间层

$(“div”).load();

//加载本地文件
$("div").load("http://localhost:4006",{user:"cyj",age:23});//返回结果直接放div中

$(document).load("http://localhost:4006",{user:"cyj",age:23},function(data){
            console.log(data);
        })
        
        
  //加载页面
   $("div").load("./2、jQuery插件.html")
   
    $(document).load("./a.js",function(data){
            var script=document.createElement("script");
            script.innerHTML=data;
            document.body.appendChild(script);
            obj.c();
        })
        
         $(document).load("./config.json",function(data){
            console.log(JSON.parse(data));//将data转为对象
        })

$.get();

 /*  $.get("http://localhost:4006?user=cyj&age=23",function(data){
            console.log(data);
        }); */
       /*  $.get("http://localhost:4006","user=cyj&age=23",function(data,success,xhr){
            // console.log(data,success,xhr);
        }); */
     // 通过GET方式请求服务

$.post()


       /*  $.post("http://localhost:4006",{user:"cyj",age:23},function(data){
            console.log(data);
        })
        // 通过POST方式请求服务

最底层

$.ajax();

//POST
$.ajax({
            url:"http://localhost:4006",
            type:"POST",
            data:{user:"xietian",age:30},
            success:function(data){
                console.log(data);
            }
        })
  
  //GET     jsonp写法
  $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=cyj
     &json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback",
            type:"GET",
            dataType:"jsonp",
        })

        function callback(data){
            console.log(data);
        }

PS:如果想获取更多的知识视频，加QQ好友10398975免费送给大家

w_cyj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery2

jQuery2动画hide：隐藏show：显示toggle：切换slidedown:向下切slideup: 向上切下拉菜单效果fadeIn:逐渐显示fadeOut“逐渐消失fadeTo:透明到多少animate: $(document).on("click",function(e){ $("div").animate({ left:e.clientX-25,
复制链接

扫一扫

专栏目录