jQuery的概念
jQuery(javaSccript Query),是js的一个框架，本质上仍然是js.
jQuery的特点
支持各种主流的浏览器；使用特别简单；拥有便捷的插件扩展机制和丰富的插件
jQuery的使用
引入jQuery文件
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">
</script>
$(document).ready(function(){})://初始化函数，当网页中dom元素（不包含图片、视频资源）全部加载完毕后，立即执行；
onload:JavaScript，初始化函数，当网页中的dom元素（关联图片，视频，资源）全部加载完毕后，立即执行
jquery初始化函数可以简化为：
$(function(){…})
dom对象
dom模型：将HTML等文档结构的标签语言看成dom模型。其中dom结点有三种类型：
元素结点：html，ul…p
属性结点：title，src，alt
文本结点：文本结点
dom对象：以上三种类型的具体对象就称为dom对象。
使用层面：凡事javaScript能够直接操作的对象就是dom对象
列如：
var title=document.getElementById("myTitle");//通过js获取到的title对象就是一个dom对象（就是<p>对象）
jquery对象：凡事jquery能够直接操作的对象，就是jquery对象；
列如：
var $title=$("#myTitle");//通过jquery获取到的对象就是一个jquery对象
同样一个元素既可以成为一个dom对象，有可以成为一个jQuery对象
注意：dom对象只适用于js的各种语法（函数，属性）；jQuery对象只适用于jquery的各种语法（函数、属性）。dom对象和jquery对象各自独立。
例如：
title是dom对象，因此可以使用js属性或方法title.innerHTML
$title是jquery对象，因此可以使用jquery属性和方法，$title.html
jquery对象和dom对象的转换：
dom对象转为jquery对象：jquery工厂，$ (dom 对象)；
jquery对象转为dom对象:
①数组：jquery对象[0]
②集合：jquery对象.get(0)
jquery对象默认是一个数组或集合；dom对象默认是一个单独的对象
jQuery的选择器
基本选择器
标签选择器：$ (“标签名”)
类选择器：$ (.class值)
id选择器：#（"#id值"）
交集选择器：(同时存在)，连续直接写$(".class值#id值")；不能出现歧义
并集选择器：逗号 $(".class值，id值")
全局选择器：选中全部的元素 $("*")
层次选择器
相邻选择器：$ (“选择器1+选择器2”)[只取后面的一个]
同辈选择器：$ (“选择器1~选择器2”)
后代选择器：$ (“选择器1 选择器2”)
子代选择器：$ (“选择器1>选择器2”)
属性选择器[ …]
$("[属性名]")
$("[class]")：选中所有元素中有class属性的元素
$("[属性名=属性值]")： $("[class=xxx]")：
$("[class^a]")：class以a开头的元素
$("[class $ =a]")：class以a结尾的元素
$("[class*=a]")：class有a的元素
过滤选择器
基本过滤选择器：（从0 开始）
：first:最开头的哪一个
:last:最后一个
:even:偶数
:odd:奇数
:eq(index):第index个
:gt(index):>index的全部元素
:lt(index):<index的全部元素
:not(选择器)：除了…以外
:header：选中所有的标题元素 h1,h2…
:focus：获取焦点元素
可见性选择器
：visible:选取所有可见性元素
：hidden:选取所有不可见的元素
jQuery 事件
js事件：onxxx();
onclick();写在< script >内，< ready>外
jquery事件:没有on
click();
ready（）；
ready（function(){
$(选择器).事件类型（function(){}
});
});
window事件：ready（）；
鼠标事件:
click():单击事件
mousedown：当按下鼠标按钮时运行脚本
mousemove：当鼠标指针移动时运行脚本
mouseout：当鼠标指针移出元素时运行脚本
mouseover：当鼠标指针移至元素之上时运行脚本
mouseup：当松开鼠标按钮时运行脚本
键盘事件：
keydown：当按下按键时运行脚本
keypress：当按下并松开按键时运行脚本（按键被压）
keyup：当松开按键时运行脚本
表单事件：
focus():获取焦点
blur9）：失去焦点
颜色值：可以使用英语单词或者#6位十六进制 #000000:黑色；#ffffff:白色；
如果6位是两两相同的，则可以写成3位如：#aabbcc可写为：#abc
绑定事件与移除事件
$ (…).click(function(){…});
绑定事件：
$ (…).bind(事件名，[数据]，函数)；
$ (…).bind(click，function(){…})；
批量绑定：$ (…bind({“事件名”：函数，“事件名”：函数，…,“事件名”：函数})；
移除事件：
$ (…).Unbind(“事件名”)；
复合事件
hover(f1,f2):切换使用mouserover()和mouseout();
toggle(f1,f2,f3,…,fn)(版本问题，jquery1.9以前支持);
多个click()事件，toggle（）还有其他含义（隐藏域显示）
显示效果：（隐藏域显示）
形式：
①hide([速度],[回调函数]):隐藏
②show():显示
③toggle():切换隐藏域显示
淡入淡出（透明度）：
fadeIn():淡入 显示
fadeOut():淡出 隐藏
控制高度
slideDown():下拉显示
slideUp()：上拉隐藏
操作dom:
①样式操作
i.设置css()
jquery对象.css(“属性名”，“属性值”)；
jquery对象.css({“属性名”：“属性值”， “属性名”：“属性值”,…,“属性名”：“属性值”});
ii.追加或移除样式class:
addClass(“x”);
addClass(“xxx”);
removeClass(“X”);
removeClass(“xx”);
removeClass();移除全部样式
toggleClass(“xxx”):切换追加与移除
②内容操作
html():获取值，获取的是元素的内容，包含了元素内部的各种标签
html(xx):先渲染，后显示
text():获取值，值获取文本值
text（xxx）:不进行渲染，将值原样显示
val（）：获取value值
val（xxx）:设置value值
③节点操作与属性操作
i.节点操作
a.查询节点
b.创建节点：$ ()
$ (选择器)：获取节点
$(DOM对象)：转换
$(html字符串)
c.插入节点
d.替换节点
$ X.replaceWith($ Y):用$ Y替换$ X
replaceAll();
e.删除结点
remove()：彻底删除
detach()：将节点删除，但关联的事件、数据不会删除（不推荐使用）
empty():只删除内容
f.克隆结点
clone(true | flase)
④属性操作
attr(“属性名”)：获取属性值
attr(“属性名”，“属性值”)：设置属性值
att({"属性名：“属性值”，“属性名：“属性值”，…,“属性名：“属性值”})
删除属性值
removeAttr(“属性值”):
⑤获取集合与遍历集合：
子节点集合：$(…).childen(“li”)
后代集合：（不推荐使用，影响性能） $(…).find(“li”)
同辈集合：
next（）：后一个
prev（）：前一个
siblings():同辈，左、右
前辈：
parent():父辈
parents（）：祖先
过滤集合：
i.很多方法的（）就是一个过滤选择器
ii…filter（“选择器…”）
遍历集合：
$(”…”).each(function(a.element){
});
CSS-dom操作:
height(500) ;
width(500)
offset()：偏移量（左上角的点）,left top
offset(function(n,oldOffset){ … })
offsetParent()：获取 （已定位）的最近的祖先元素
已定位：元素position属性(默认static)被设置为了relative absolute 或fixed
scrollLet()
scrollTop()
表单校验
表单校验，可以减轻对服务端的访问次数
a.获取要校验的元素值(选择器)用户名、密码
b.通过 字符串处理方法、或者 正则表达式等手段 进行校验
“[email protected]”.indexOf("@") !=-1
c.触发校验的方法或事件（校验时机）
blur()：失去焦点时触发
submit()：当点击表单的 “提交
submit”按钮时 触发
οnblur=“xxx()”
οnsubmit=“xx()”
submit()或onsubmit的返回值 会决定表单是否跳转，如果返回true则正常跳转；如果返回false 则终止条件
在校验时建议的写法：
if(…不合理的情况) alert() ; return false ;
if(…不合理的情况) alert() ; return false ;
if(…不合理的情况) alert() ; return false ;
if(…不合理的情况) alert() ; return false ;
return true ;
正则表达式
正则表达式：用于定义规则
email=“aaa” ;
正则表达式.test( email);
使用：
手写的正则表达式规则.test(校验的值) -> true|false
正则表达式 误区：有些时候完全没必要使用
var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
