持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
还记得刚刚开始学习前端时，刚入门的便是原生的JavaScript以及jQuery，但是实际工作以后，纷纷用起了简单易用的框架，jQuery的知识点也只有面试时会想起它，今天突然有感，决定对jQuery的知识点做一个盘点，也希望自己能够不忘初心，保持对前端的热爱。
1.jQuery概念及使用思想
jQuery：封装了DOM、事件、ajax，但是有的东西没有封装，意味着有的东西还是不能简化：数据类型转换、ES对象的API、循环、定时器...
- 引入jqueryjs
- 使用选择器获取元素
- 得到的元素进行操作
2.jQuery简化DOM操作
（1）通过关系获取元素：
父：$("xx").parent();
祖先：$("xx").parents();
儿子：$("xx").children();
前一个兄弟：$("xx").prev();
后一个兄弟：$("xx").next();
除了自己外的其他兄弟：$("xx").siblings();
（2）操作元素：
A、操作内容：
$("xx").html() - 类似于innerHTML - 能够识别标签
获取：`$("xx").html();`//多个元素只会获取到第一个的内容
设置：`$("xx").html("HTML")`//但是可以直接设置所有元素的内容
$("xx").text() - 类似于innerText - 不能识别标签
获取：`$("xx").text();`//多个元素会获取到所有元素内容并拼接成字符串
设置：`$("xx").text("纯文本")`//但是可以直接设置所有元素的内容
$("input").val() - 类似于value - 获取设置input的value值
获取：`$("input").val();`//多个元素只会获取到第一个的内容
设置：`$("input").val("value")`//但是可以直接设置所有元素的内容
B、操作属性：
*$("xx").attr(); - 类似getAttribute/setAttribute
获取：$("xx").attr("属性名");
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名");
C 操作样式
$("xx").attr("class","")
$("xx").attr("style","") - 也可以设置样式
a 专门操作class
追加：$("xx").addClass("class");
删除：$("xx").removeClass();//注意：没有传参，删全部
指定传参，删指定
切换：$("xx").toggleClass("d1");
注意：切换：在有d1和没有d1之间进行切换，不会影响到别的 class
b 直接的样式操作
jq操作的基本是内联也不是样式表，而是当前生效的样式<br>
获取：<br>
`$("xx").css("css属性名");`<br>
设置：
```js
$("xx").css({
"css属性名":"属性值",
...
})
```
D、创建元素：
语法： {i}'>${变量}`)
由于是模板字符串，任何一个位置都可以放置变量
E、渲染&删除
渲染：
插入内部 - 儿子 父.append(新) - 后插
父.prepend(新) - 前插
插入外部 - 兄弟
兄.after(新) - 后插
兄.before(新) - 前插
删除：
$("").remove();
F、克隆：
父.append($("").clone(true))
3.事件：用户触发或浏览器自动触发的
（1）绑定事件：$("").bind("事件名",callback)
简写：$("").click(callback)
（2）click、submit、change、mouseover|mouseenter（不会触发冒泡）、mouseout|mouseleave（不会触发冒泡）、mousemove、focus、blur、load、resize、input
（3）鼠标：mousedown、mouseup
（4）H5新特性：老IE不支持：已有新特性：语义化标签、音频视频、新的表单特性、webStorage、拖拽事件
（5）键盘事件：
keydown：任何按键都会触发，按下和按住都会触发
keypress：只有字母和数字回车空格会触发，按下和按住都会触发
keyup：任何按键都会触发，松开的时候会触发
4.JQ动画
（1）预定义动画：
a 隐藏和显示：
$("").show(time,callback) - 显示
$("").hide(time,callback) - 隐藏
time - 如果没有传递time参数，瞬间显示和隐藏
- 如果添加了时间参数，具有动画：同时改变高度和宽度 以及透明度的方式
callback - 回调函数：动画结束后你还想做什么操作！
$("").toggle(time,callback) = show+hide
b 动效果：改变元素的高度
$("").slideDown(time,callback) - 显示
$("").slideUp(time,callback) - 隐藏
time - 就算没有传入时间，依然具有动画只不过有点快
callback - 回调函数：动画结束后你还想做什么操作！
$("").slideToggle(time,callback) = slideDown+slideUp
c 入淡出：改变元素的透明度
$("").fadeIn(time,callback) - 显示
$("").fadeOut(time,callback) - 隐藏
time - 就算没有传入时间，依然具有动画只不过有点快
callback - 回调函数：动画结束后你还想做什么操作！
$("").fadeToggle(time,callback) = fadeIn+fadeOut
（2）自定义动画
a并发动画：
$("").animate({
"css属性名":"css属性值",
...
},time,callback)
b排队动画：
$("").animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback).animate({
"css属性名":"css属性值",
},time,callback)
问题：排队动画，一定会有先后顺序
c停止动画：stop()
扩展：
var bool=$("").is(":animated");//有动画为true，无动画为false
var bool=!$("").is(":animated")//和上面相反
var bool=$("").is(":hidden");//隐藏为true，显示为false
5.jquery UI
插件/组件库，基于jquery的开元网页用户界面代码库提供了 HTML/CSS/JS
如何使用：
（1）打开百度，搜索jqueryUI中文网
（2）下载jqueryUI的包
a引入jqueryUI.css
b引入jquery.js
c引入jqueryUI.js
必须保证此顺序
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2/themes/base/jquery-ui.css"/>
<script src="jquery-ui-1.10.2/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.10.2/ui/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
6.ajax封装
jquery：封装了3个部分：DOM 事件ajax
（1）*第一层：最复杂
$.ajax({//配置信息：
"url":"xx.php",//连接的服务器端文件
"type":"GET/POST",//可以省略，默认为GET
"data":"key=value&key=value...",//请求消息
"dataType":"HTML/XML/JSON/JSONP",
"jsonp":"重命名",//默认叫做callback=?、可以换成你想要的名字
"success":data=>{//只有成功的时候会执行
data=>xhr.responseText
}
})
（2）第二层：更简化
a $("").load("url","data",callback)
缺点：1、无法设置请求类型：GET/POST，只能是GET
2、会把获取到的数据放到页面上替换页面内容
3、不能帮我脱衣服
*b $.get("url","data"=>callback,"JSON");
*c $.post("url","data"=>callback,"JSON");
（3）第三层： - 特殊用法（跨域）
$.getScript("xx.js") - 异步获取js的技术
跨域：在浏览器中具有同源策略：协议、域名、端口号都是相 同的情况才能访问自己的东西， 只要这三者：协议、域名、端口号有一个不同就叫跨域了，不允许访问！ 解决跨域：
前端：
$.getJSON("url?callback=?","data",callback)
PHP：
echo $_GET["callback"]."(".JSON_encode($arr).")";
7scroll事件 - 滚动事件
$(window/document).scroll(()=>{
$(window/document).scrollTop();//获取距离页面顶部有多远
$("xx").offset().top;//获取xx距离页面顶部有多远
})