jquery
jquery概念
jQuery是一个js类库，类库：其实就是一个js文件，别人提供的对象（属性和方法）：压缩版（正式上线项目）和未压缩的源代码版
-
目的：简化js - DOM、事件、ajax
-
版本：
1.11.3 - 2.xx版本以上就不再支持老IE，做了向上兼容，1.11.3版本也能使用到最新的特性
2.xx
3.xx
-
常识题：jQuery有的人称呼叫做js库，而有的人称呼叫做js框架
那些称呼jQuery是一个库的人都是不够了解：jQuery由4个方面组成
- jquery.js - 库：简化了js，大部分人只知道这一部分
- jQuery.ui - 提供了页面的组件（组成页面一部分的部件） - 过时
- jQuery.mobile - 移动端开发，不会学习，现在更流行uniapp
- Qunit - 测试人员（不需要会代码，英语好）用于测试javascript的工具
曾经jQuery是全球最火的一个js库
现在三大框架：vue、react、angluar
目前市场上流传的库大概有8000+，没有办法全部学习：需要通过某个库，来学习库的特点（简化：越简单越轻松）
jQuery的使用步骤
- 引入jQuery.js文件
- 使用jQuery的API去获取元素
- 使用jQuery的API去操作元素
jQuery如何获取元素
-
工厂函数：因为这个工厂可以做很多操作
语法：
$(); 或者 jQuery(); -
作用：
- 查找元素
-
语法：var 元素=$("jQuery选择器") - jQuery选择器是基于css选择器，但是比css选择器更加的强大，jQuery选择器不需要任何记忆：查询网址：www.w3school.com.cn/jquery/jque…
-
返回值：使用jQuery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作
-
jq找到的元素的特点：
- 隐式迭代 - 不用循环，直接做操作
- 具有链式操作 - 可以不断的使用.一步接一步的做下去
- jq元素 和 dom元素 两者方法不换乱用，只能自己用自己的
-
转换：
jq -> dom：$("选择器")[i]- 只要加上下标就会变为DOM元素，千万不要对jq加下标，更不要循环 -
将dom -> jq：$(dom元素) - 有用：e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法
-
为什么一个方法可以实现多个操作
-
function $(){
arguments - 重载：判断传入的实参的不同执行不同的操作
}
-
通过 节点之间的 关系：
- 父：$("xx").parent()
- 子：$("xx").children()
- 前一个兄弟：$("xx").prev();
- 后一个兄弟：$("xx").next();
- 除了自己的其他兄弟：$("xx").siblings();
jQuery查找元素，返回值：jquery集合，可以直接做操作，切忌不要循环
- 操作元素
-
内容：
-
html() - 底层就是dom的innerHTML - 能够识别标签
获取：$("xx").html();
设置：$("xx").html("新内容");
-
text() - 底层就是dom的innerText - 只能书写纯文本
获取：$("xx").text();
设置：$("xx").text("新内容");
-
val() - 底层就是dom的value - 单标签input、select&option
获取：$("xx").val();
设置：$("xx").val("新内容");
-
-
属性：
-
attr() - 底层就是dom的getAttribute/setAttribute - 自定义属性也可以操作
获取：$("xx").attr("属性名")
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名")
专门提供了操作class的API：
-
追加class：
$("xx").addClass("追加的class值") -
删除class：
$("xx").removeClass();（没传参数，清空所有class，传递实参，删除你传递的class） -
切换class：有此class和没有此class之间进行切换，
$("xx").toggleClass("active");
-
-
-
样式：
-
css() - 设置时依然是内联样式（优先级高，不会影响到其他元素），获取时不关注内联/内部/外部样式表，只管当前生效的
获取：
$("xx").css("属性名");设置：
$("xx").css({ "属性名":"属性值", ... });
-
-
创建&渲染
-
创建：
var elem=$(<开始标签 属性名='{内容}</结束标签>) -
渲染：
父亲.append(elem);//后面，儿子父亲.prepend(elem);//前面，儿子兄弟.after(elem);//后面，兄弟兄弟.before(elem);//前面，兄弟 -
一句话创建并且渲染：父亲.append({属性值}'>${内容}</结束标签>`));
-
-
删除：
$("xx").remove(); -
克隆：
$("xx").clone(); -
获取元素下标：
$("xx").index();
jquery事件
-
事件：用户触发 或 浏览器自动触发：
绑定：
$("xx").bind("事件名",callback);简化：
$("xx").事件名(callback);
面试题：原生JS中 window.onload 和 JQ中$(document).ready(callback) 有什么区别
1、window.onload：等待所有的资源（html、css、js、图片、视频、音频）加载完毕后，最后执行，而且一个页面只能使用一次
2、$(document).ready(callback)：等待DOM树加载完毕就会执行，理论上比上者效率更高，而且一个页面可以反复使用
简写：1、$(document).ready(()=>{})
2、$().ready(()=>{})
3、$(()=>{})
-
原来学过的事件：click、dblclick、mouseover/mouseenter（移入，不会触发冒泡）、mouseout/mouseleave（移出，不会触发冒泡）、mousemove、change、blur、focus、submit、input（只要用户输入就会触发）、contextmenu、resize、keydown
-
未学过的事件：
-
mousedown(鼠标按下)、mouseup(鼠标松开)
-
keydown、keypress、keyup - 键盘事件：
语法：
$(window).键盘事件(callback);keydown：按下和按住都会触发，任何按键都支持 - 最适合用于做（游戏开发）
keypress：按下和按住都会触发，支持数字+字母+回车+空格
keyup：松开时才触发，任何按键都支持 - 劲舞、炫舞、QQ音速，比手速
键盘键码：
e.keyCode; -
scroll - 滚动监听事件：
-
绑定事件：$(window).scroll(()=>{
1、$(window).scrollTop();//获取当前滚动条距离页面顶部有多远
2、$("xx").offset().top;//获取某个元素距离页面顶部有多远
3、越往下滚，出现数据越多
})
event事件对象：jQuery没有任何的简化操作
JQ动画
-
预定义动画：3组：9个
-
隐藏和显示：
隐藏：$("xx").hide(执行时间,callback) 显示：$("xx").show(执行时间,callback) 特殊：1、如果没有传递任何参数，瞬间的隐藏和显示 如果传递了时间参数，会具有动画（同时修改宽高度、透明度） 2、callback是动画执行完毕才会执行的代码操作 3、组合用法：自带判断操作： $("xx").toggle(执行时间,callback) === show+hide -
滑动效果：
隐藏：$("xx").slideUp(执行时间,callback) 显示：$("xx").slideDown(执行时间,callback) 特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改高度） 2、callback是动画执行完毕才会执行的代码操作 3、组合用法：自带判断操作： $("xx").slideToggle(执行时间,callback) === slideDown+slideUp -
淡入淡出： 淡出/隐藏：("xx").fadeIn(执行时间,callback) 特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改透明度） 2、callback是动画执行完毕才会执行的代码操作 3、组合用法：自带判断操作：$("xx").fadeToggle(执行时间,callback) === fadeIn+fadeOut
-
-
自定义动画：
- 并发动画：所有的动画一起执行
$("xx").animate({
"css属性名":"css属性值",
...
},执行时间,callback)
- 排队动画：一个动画做完在做下一个
$("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)
-
特殊：
- animate方法不支持颜色、transform转换的动画 - 明天就有jQuery.ui.js提供增强animate方法
- 动画会排队，如果快速的触发动画，怎么排队上很多很多的动画慢慢执行，不希望看到这个效果： stop();
-
扩展：
-
判断某个元素的有没有动画：
if(!$("xx").is(":animated")){没有动画的元素才执行} -
if(!$("xx").is(":hidden")){没有隐藏的元素才执行}
-
jQueryUI
jQueryUI：组件/插件库：提供了HTML/CSS/JS，程序员想要使用只需要引入然后梭代码
组件：组成网页一部分的部件
插件：插件就是组件，插件带有js功能
- 一切插件的使用步骤：
1、下载
2、引入：
<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.0.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.0.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.0.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
3、挑选自己喜欢的效果 - 然后梭：
个人推荐：
1、选项卡/标签页/tabs
2、菜单
3、手风琴/折叠面板
4、自动完成/模糊搜索
5、特效 - 增强toggle("特效名称",duration,callback)+hide+show
6、拖放
4、根据你的设计图修改css - 如果你修改了没有成功只有一个可能，优先级不够
5、根据数据库拿回来的数据渲染页面 - 记得把模板删掉
- 日期选择器：底层date对象
- 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,
})
})
2. laydate.js：
- 优点：非常简单，还很漂亮
- 缺点：作者太穷了，已经下架了
- 别记任何东西，学会看文档
- 无敌的插件库
- 打开百度搜索：jQuery插件库（一个账号一天只能下载两次）
