jQuery博客

 2、使用jQuery提供的API去获取元素：
    1、使用工厂函数直接写入选择器：
        $("选择器") 或者 jQuery("选择器");

    2、通过节点的关系获取元素：
        父：$("xx").parent();
        子：$("xx").children();
        前一个兄弟：$("xx").prev();
        后一个兄弟：$("xx").next();
        其他兄弟：$("xx").siblings();

  3、使用jQuery提供的API去操作元素
    1、内容
         html()/text()/val()
         获取：$("xx").api();
         设置：$("xx").api("内容");

    2、属性：
         attr();
         获取：$("xx").attr("属性名");
         设置：$("xx").attr("属性名","属性值");
         删除：$("xx").removeAttr("属性名");

         追加class：$("xx").addClass("active");
         删除class：$("xx").removeClass();
         切换class：$("xx").toggleClass("d2");

    3、样式：
         css();
         获取：$("xx").css("属性名"); - 获取的是当前生效的样式
         设置：$("xx").css({"属性名":"属性值",...})

    4、创建元素并且渲染页面
        创建：var elem=$(`<开始标签 属性名='${变量}'>${变量}</结束标签>`);

        渲染：父.append(elem);

        删除：$("xx").remove();

        克隆：var 新元素=$("xx").clone(true);

    5、获取元素的下标：$("xx").index();

JQ动画：
   1、预定义动画：3组：9个
    1、隐藏和显示：
       隐藏：$("xx").hide(执行时间,callback)
       显示：$("xx").show(执行时间,callback)
       特殊：1、如果没有传递任何参数，瞬间的隐藏和显示
            如果传递了时间参数，会具有动画（同时修改宽高度、透明度）
          2、callback是动画执行完毕才会执行的代码操作
         3、组合用法：自带判断操作：
            $("xx").toggle(执行时间,callback) === show+hide

    2、滑动效果：
       隐藏：$("xx").slideUp(执行时间,callback)
       显示：$("xx").slideDown(执行时间,callback)
       特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改高度）
          2、callback是动画执行完毕才会执行的代码操作
         3、组合用法：自带判断操作：
            $("xx").slideToggle(执行时间,callback) === slideDown+slideUp

    3、淡入淡出：
       淡出/隐藏：$("xx").fadeOut(执行时间,callback)
       淡入/显示：$("xx").fadeIn(执行时间,callback)
       特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改透明度）
          2、callback是动画执行完毕才会执行的代码操作
         3、组合用法：自带判断操作：
            $("xx").fadeToggle(执行时间,callback) === fadeIn+fadeOut

   2、自定义动画：
    1、并发动画：所有的动画一起执行
        $("xx").animate({
            "css属性名":"css属性值",
            ...
        },执行时间,callback)

    2、排队动画：一个动画做完在做下一个
        $("xx").animate({
            "css属性名":"css属性值",
        },执行时间,callback).animate({
            "css属性名":"css属性值",
        },执行时间,callback).animate({
            "css属性名":"css属性值",
        },执行时间,callback).animate({
            "css属性名":"css属性值",
        },执行时间,callback).animate({
            "css属性名":"css属性值",
        },执行时间,callback).animate({
            "css属性名":"css属性值",
        },执行时间,callback)

 新事件：
    1、鼠标按下：mousedown  鼠标松开：mouseup
    
    2、键盘事件：keydown（键盘按下和按住，全部按键）、keypress（键盘按下和按住，数字、字母、回车、空格）、
             keyup（键盘松开，全部按键）

    3、滚动监听：
        $(window).scroll(()=>{
            1、滚动条的位置：$(window).scrollTop();

            2、元素距离顶部/左侧的位置：$("xx").offset().top/left;
        })

2、动画：
   $("xx").toggle(duration,callback) = show + hide;
    
   $("xx").slideToggle(duration,callback) = slideDown + slideUp;

   $("xx").fadeToggle(duration,callback) = fadeIn + fadeOut;

   $("xx").stop().animate({
    "css属性名":"css属性值",
    ...
   },duration,callback)

   判断xx有没有动画
    if(!$("xx").is(":animated")){
        //此元素没有动画才能执行里面的操作
    }

日期选择器：底层date对象
   1、wdatepick.js文件
    优点：非常简单
    缺点：样式比较老化
            $("input").focus(function(){
                WdatePicker({//配置信息
                    el:this,
                    isShowToday: false,
                    isShowClear: false,
                    isShowOK: false,//以上三个都是开关，如果三个都关起来了，则会隐藏掉快速选择按钮
                    lang: "eng",
//                    skin: "twoer",
                    dateFmt: "yyyy年MM月dd日 HH:mm:ss",//年月日时分秒的字母大小写是固定的
                    minDate: "%y-%M-%d",
                    maxDate: "%y-%M-{%d+7}",//只能购买从今天开始往后7天的车票
                    readOnly: true,
                })
            })