jQquery要知道的

一、★面试题：为什么有的人称呼jQuery叫做框架，又有的人称呼jQuery叫做类库呢？

 因为大部分人不知道jQuery其实由4部分组成：
            1、jQuery.js - 专门简化js开发 - 大部分人只知道jquery的这部分
            2、jQuery.mobile.js - 专门针对移动端开发的 - 现在有更棒的混合开发框架：uniapp
            3、jQuery.ui.js - 专门针对UI开发 - - 现在有更棒的：Bootstrap/element/vant
            4、Qunit - 专门给测试人员（英文好）用于测试js的软件

二、 使用jQuery，方便程序员开发js，简化js（1、简化核心DOM操作 2、简化了绑定事件 3、简化了ajax）

1、固定步骤

        1、在HTML页面引入jquery-1.11.3.js文件
        2、*使用jQuery提供的选择器去获取元素
        3、*使用jQuery提供的API去操作元素

2、工厂函数：

1、查找元素：$("jq选择器");
 2、DOM元素转为JQ对象：$(this/target);
3、创建元素：$(`<标签>${变量}</标签>`);

         底层原理：重载：arguments，根据传入的实参的不同可以进行判断执行不同的操作

 3、操作元素

   1）、内容：html/text/val()- 类似于原生js中innerHTML，可以识别标签//- 类似于原生js中innerText，不可以识别标签//类似于原生JS中value，专门为input、option准备的
    获取：$("xx").html/text/val();
    设置：$("xx").html/text/val("内容");

   2）、属性：attr()- 类似于原生JS中核心DOM的get/setAttribute，能操作自定义属性
    获取：$("xx").attr("属性名")
    设置：$("xx").attr("属性名","属性值")
    删除：$("xx").removeAttr("属性名"); - 完全等效于removeAttribute将整个属性节点删干净

   3）、样式：
    1、操作class来控制样式
        追加：$("xx").addClass("新class");//追加并不是替换
        删除：$("xx").removeClass();//特殊：传参：会删除指定的class//不传参：清空所有的class
        切换：$("xx").toggleClass("xxx");//在有此class和没有此class之间进行切换，不会影响到其他的class

4、直接操作样式：一次方法可以修改多个样式

 获取：$("xx").css("属性名"); -- 不管是内联、内部、外部只获取当前生效的，一次只能获取一个属性值
       设置：$("xx").css({//配置信息
            "css属性名":"属性值",
            ...
              })

  6、渲染页面：

1）创建元素：工厂函数第三个功能：$(`<标签 属性名="${变量}">${内容}</标签>`)渲染页面：

2）渲染页面：
          *$("父元素").append(新);//里面，当最后一个儿子
            $("父元素").prepend(新);//里面，当第一个儿子
            $("父元素").after(新);//外面，当后一个兄弟
            $("父元素").before(新);//外面，当前一个兄弟

   5、克隆：$("xx").clone(true);- 加true的意思是为了赋予js生命

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

三、JQ如何绑定事件：

 1、事件：load/click/change/mousemove/mouseover/mouseenter（没有冒泡）/mouseout/mouseleave（没有冒泡）/focus/blur/input/resize/submit/contextmenu/keydown

2、JQ绑定事件：

$("xx").bind("事件名",callback);
简写：$("xx").事件名(callback);

3、面试题：原生JS中window.onload 和 jQuery中的$(document).ready(callback) 有什么区别?

1、window.onload：这里面的内容需要等待所有资源（图片、css、js、视频、音频、小图标、DOM树）加载完毕，才会执行，最后才执行，一个页面只能用一次
2、$(document).ready(callback)：这里面的内容只需要等待DOM树加载完毕就会执行，效率更高，一个页面可以使用多个

3、简写：1）$(document).ready(callback)
              2）$().ready(callback)
              3）$(()=>{});//工厂函数的第四个功能

 4、★★滚动监听事件：

$("xx").scroll(()=>{
                1）得到滚动条当前的位置：$(window).scrollTop();

                2）xx元素距离页面的顶部/左侧有多远：$("xx").offset().top/left;
 })

5、键盘事件：

keydown：任何按键可触发，按下和按住都可以
keypress：字母、数字、回车、空格可触发，按下和按住都可以
keyup：任何按键可触发，只有松开键盘才出发

6、 JQ动画：

1）预定义动画

①隐藏和显示：$("xx").toggle(time,callback) === show+hide;//宽度高度透明度都会同时变化
②上下滑动效果： $("xx").slideToggle(time,callback) === slideDown+slideUp;//高度变化
③淡入淡出效果：$("xx").fadeToggle(time,callback) === fadeIn+fadeOut;//透明度变化

④特殊：1、如果没有传递任何实参时，是不具有动画的，瞬间的显示和隐藏，以后不用自己在写display:none/block;
         2、如果传递了实参，具有动画效果
         3、回调函数：而是动画执行完毕后才会执行的操作 - 以后你动画完毕了还想干什么

2）自定义动画：

      ① 并发
            $("xx").animate({},time,callback)

       ② 排队
            $("xx").animate({},time,callback).animate({},time,callback).animate({},time,callback)

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

3） 特殊：

           ①animate不支持颜色的操作和转换的操作
            ②停止动画：stop()

7、判断img动画执行完毕后才允许再次点击
        if(!$("img").is(":animated")){
            //没有动画时才可以执行
        }

8、判断img是没有隐藏的状态才可以执行
        if(!$("img").is(":hidden")){
            //没有隐藏的图片才可以执行
        }