jQuery 是一个快速、简洁的 JavaScript 库
轻量级。核心文件只有几十 KB，不会影响页面的加载速度跨浏览器兼容链式编程、隐式迭代对事件、样式、动画支持，简化了 DOM 操作支持插件扩展开发免费、开源入口函数：加载完 DOM 再执行 js 代码
// 第一种写法 $(documnet).ready(function() { }) // 第二种写法 $(function() { })DOM对象：用原生 JS 获取的对象就是 DOM 对象 jQuery对象：用 jQuery 方式获取的对象就是 jQuery 对象，本质上是利用$对 DOM 对象包装后产生的对象（伪数组形式存储） jQuery 对象只能使用 jQuery 方法，DOM 对象只能使用原生的 JavaScript 属性和方法
// DOM对象转换为jQuery对象 var div = document.querySelector('div'); $(div); // jQuery对象转换为DOM对象 $('div')[0]; $('div').get(0);ID选择器：$("#id") 全选选择器：$('*') 类选择器：$("class") 标签选择器：$("div") 并集选择器：$("div,p,li") 交集选择器：$("li.current") 子代选择器：$("ul>li") 后代选择器：$("ul li") 筛选选择器： $('li:first')：获取第一个元素 $('li:last')：获取最后一个元素 $('li:eq(2)')：获取索引号为2的元素 $('li:odd')：获取索引号为奇数的元素 $('li:even')：获取索引号为偶数的元素
筛选方法：
// 查找父级 $("li").parent(); // 相当于$("ul>li") $("ul").children("li"); // 相当于$("ul li") $("ul").find("li"); // 查找兄弟节点，不包括本身 $(".first").siblings("li"); // 查找当前元素之后所有的同级元素 $(".first").nextAll(); // 查找当前元素之前所有的同级元素 $(".first").prevAll(); // 检查当前元素是否含有某个类 $("div").hasClass("first"); // 相当于$("li:eq(2)") $("li").eq(2);jQuery使用css()方法修改简单元素样式
// 参数只写属性名，返回属性值 $("div").css("color"); // 设置样式，可以通过对象的方式修改多个样式 $("div").css("color", "pink"); $("div").css({ "width": 200, "heigth": 300 })添加类、删除类、切换类
$("div").adClass("current"); $("div").removeClass("current"); $("div").toggleClass("currrent");显示隐藏效果：
show(speed,easing,fn) 显示 hide(speed,easing,fn) 隐藏 toggle(speed,easing,fn) 切换
参数都可以省略speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒值easting：用来指定切换效果，默认swing，可用linearfn：回调函数，在动画完成时执行的函数，每个元素执行一次滑动效果：
slideDown(speed,easing,fn) sllideUp(speed,easing,fn) slideToggle(speed,easing,fn)
参数都可以省略speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒值easting：用来指定切换效果，默认swing，可用linearfn：回调函数，在动画完成时执行的函数，每个元素执行一次事件切换：
hover([over,]out)
over：鼠标移到元素上要触发（相当于mouseenter）out：鼠标移出元素要触发（相当于mouseleave） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 100px; height: 30px; border: 1px solid #333; text-align: center; line-height: 30px; color: #ffaa00; } ul { display: none; margin: 130 auto; width: 100px; } li { list-style: none; display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #ccc; } </style> </head> <body> <div>微博</div> <ul> <li>我的</li> <li>私信</li> <li>@</li> </ul> </body> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { /** $("div").hover(function() { $("ul").slideDown(200); }, function() { $("ul").slideUp(200); }) */ $("div").hover(function() { $("ul").stop().slideToggle(200); }) }) </script> </html>动画队列：
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行 停止排队：stop()，必须写在动画的前面
淡入淡出效果：
fadeIn(speed, easing, fn) fadeOut(speed, easing, fn) fadeToggle(speed, easing, fn) fadeTo(时间, 透明度)
参数都可以省略speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒值easting：用来指定切换效果，默认swing，可用linearfn：回调函数，在动画完成时执行的函数，每个元素执行一次自定义动画：
animate(params, speed, easing, fn)
params：想要更改的样式属性，以对象的形式传递。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。其余参数省略。speed：三种预定速度之一的字符串（slow，normal，fast）或表示动画时长的毫秒值easting：用来指定切换效果，默认swing，可用linearfn：回调函数，在动画完成时执行的函数，每个元素执行一次设置或者获取元素固有属性：prop() 设置或者获取元素自定义属性：attr()
// 获取属性值 $('a').prop('href'); // 设置属性值 $('a').prop("href", "https://www.baidu.com/");数据缓存：data()
// 该数据存储在元素的内存里面 $("span").data("name", "Tom"); console.log($("span").data("name"); // Tomhtml()：获取设置元素内容 text()：获取设置元素文本内容 val()：获取设置表单值
遍历元素：
jQuery 隐式迭代是对同一类元素做了同样的的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。
$("div").each(function(index, domEle) {})
each()方法遍历匹配的每一额元素，主要用 DOM 处理里面回调函数有两个参数：index是每个元素的索引号，domEle是每个 DOM 元素对象，不是 jQuery 对象如果要使用 jQuery 方法，需要将 domEle转换为 jQuery 对象$.each(object, function(index, element) {})
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组、对象回调函数的两个参数：index是每个元素的索引号，element遍历内容创建元素：
$("<li></li>")：动态创建一个li标签
添加元素：
内部添加： element.append() 把内容放到匹配元素内部的最后面 element.prepend() 把内容放到匹配元素内部的最前面
外部添加： element.after() 把内容放到匹配元素外部的后面 element.before() 把内容放到匹配元素外部的前面
<body> <ul> <li>原先的li<li> </ul> <script> $(function() { var li = $("<li>新创建的li</li>"); $("ul").append(li); $("ul").prepend(li); var div = $("<div>新建的div</div>"); $("ul").after(div); $("ul").before(div); }) </script> </body>删除元素： element.remove()：删除匹配的元素 element.empty()：删除匹配的元素集合中所有的子节点 element.html("")：删除匹配的元素集合中所有的子节点
width()，height()：获取匹配元素的宽度和高度，只计算width和height innerWidth()，innerHeight()：获取匹配元素宽度和高度，包括padding outerWidth()，outerHeight()：获取匹配元素宽度和高度，包括padding、border outerWidth(true)，outerHeight(true)：获取匹配元素宽度和高度，包括padding、border、margin
offset()：设置或者返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有两个属性left、top：offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离可以设置元素的偏移：offset({ttop:10, left:10})position()：用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准。只能获取，不能设置。
scrollTop()，scrollLeft()：设置或获取元素被卷去的头部和左侧
element.on(events, [selector], fn)：在匹配元素上绑定一个或多个事件的事件处理函数
events：一个或多个用空格分隔事件类型selector：元素的子元素选择器fn：回调函数，即绑定在元素身上的侦听函数 $(function() { // 单个事件注册 $('div').click(function() { $(this).css("color", "pink"); }) // 事件处理on $("span").on({ mouseenter: function() { $(this).css("color", "red"); }, click: function() { $(this).css("color", "blue"); ] }) // on可以用于事件委托 $("ul").on("click", "li", function() { alert(11); }) })off()：可以移除通过on()方法添加的事件处理函数，如果不传递参数，则解绑所有的事件；需要解绑哪个事件，就传递哪个事件。 one()：绑定事件，只触发一次 trigger()：自动触发事件
// 自动触发事件 $(function() { $("div").on("click", function() { alert(11); }) // 1. $("div").click(); //2. $("div").trigger("click"); // 3.不会触发元素的默认行为 $("div").triggerHandler("click"); })element.on("click", function(event) {})
阻止默认行为：event.preventDefault()或者return false阻止冒泡：event.stopPropagation()$.extend([deep], target, object1, [objectN])
deep：如果设为true，则为深拷贝，默认为false,浅拷贝target：要拷贝的目标对象object1：待拷贝到第一个对象的对象 $(function() { var targetObj = {}; var obj = { name: 'Tom', age: 18 } $.extend(targetObj, obj); // 会覆盖targetObj里面原来的数据 })深拷贝和浅拷贝：
数据分为基本数据类型和复杂数据类型。基本数据类型直接存储在栈（stack），复杂数据类型是该对象在栈中的引用，真实数据放在堆内存中，即复杂数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。 浅拷贝只复制了指向某个对象的指针，而不是复制对象本身，新旧对象还是共享同一块堆内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享堆内存，修改新对象不会影响旧对象。
jQuery插件库 jQuery之家 全屏滚动 全屏滚动（中文版）
