大坑
千万不要写箭头函数代替function（）的写法
$("p").on("click", function(){
alert( $(this).text() ); // 指向当前触发click事件的元素p的文本
});
// 如果我们将function写成箭头函数
$("p").on("click", () => {
alert( $(this).text() ); // 此时this指向的就是document
});
一、寻找元素
（1）选择器
基本选择器、层级选择器、属性选择器 与CSS类似，这里不再细说文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
- 1.基本选择器
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
- 2.层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
eg:
$("p > .ex1 ") // p元素的class=ex1的子元素
- 3.过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
// 从0开始
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
- 3.2内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
- 3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
- 3.4属性过滤选择器（适用于自定义属性）
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
eg:
$("div[class='ex1']") // class属性值为ex1的div 元素
$("div[ex='ex1']") // ex属性值为ex1的div 元素
- 3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
- 4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
（2）筛选器
- 过滤
$("p").eq(0) //当前操作中第N个jQuery对象,类似索引
$('li').first() //第一个元素
$('li').last() //最后一个元素
$(this).hasClass("test") //元素是否含有某个特定的类,返回布尔值
$('li').has('ul') //包含特定后代的元素
- 查找
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,子子孙孙
$("p").next()    //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
二、jQuery HTML / CSS 方法
(1) 属性操作
- 基本属性操作
//
//当该方法用于返回属性值，则返回第一个匹配元素的值。
$("img").attr("src");        //返回文档中所有图像的src属性值
//当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
$("img").attr("src","test.jpg"); //设置所有图像的src属性
$("img").removeAttr("src");   //将文档中所有的img的src属性删除（多个）
//prop()、removeProp() 方法attr()、removeAttr()用法和特性一样
$("input[type='checkbox']").prop("checked", true); //选中复选框(返回第一个匹配元素的值。)
$("img").removeProp("src");    //删除img的src属性v
提示：如需检索 HTML 属性，请使用 attr() 方法代替。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
提示：如需移除属性，请使用 removeProp() 方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
(2) CSS类
<script>
$("p").addClass("selected");   //为所有p元素加上 'selected' 类
$("p").addClass("selected1 selected2"); // 给所有p加上selected1和selected2类（中间用空格隔开）
$("p").removeClass("selected"); //从p元素中删除 'selected' 类
$("p").addClass("selected1 selected2"); // 移除所有p元素上的selected1和selected2类（中间用空格隔开）
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
//多个类，同上
(3) HTML代码/文本/值
// 当该方法用于返回内容时，则返回(第一个)匹配元素的内容。
$('p').html();            //返回p元素的html内容(匹配第一个)
// 当该方法用于设置内容时，则重写所有匹配元素的内容。
$("p").html("Hello <b>nick</b>!"); //设置p元素的html内容
提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html() 方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
//特性同html
$("input").val();          //获取文本框中的值(匹配第一个)
$("input").val("nick");      //设置文本框中的内容
注意：val() 方法通常与 HTML 表单元素一起使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
// 当该方法用于返回内容时，则返回**(所有)**匹配元素的文本内容（会删除 HTML 标记）。
$('p').text();            //返回p元素的文本内容(匹配所有！！！！！)
// 返回的是字符串形式
// 当该方法用于设置内容时，则重写所有匹配元素的内容。
$("p").text("nick");        //设置p元素的文本内容
提示：如只需设置或返回被选元素的文本内容(不包括HTML标记)，请使用 text() 方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
(唯一一个，用于返回内容时，是匹配所有的元素) ! ! ! ! ! ! ! ! ! ! ! !! ! ! !!
(4) CSS操作 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
- 样式
//
$("p").css("color"); //访问查看p元素的color属性(匹配第一个)
$("p").css("color","red"); //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
- 位置
$('p').offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260}(匹配第一个)
$('p').offset().top // 122
$('p').offset().left // 260
$('p').offset({top: 10, left:10}); // 给所有元素p添加“display:relaative,top:10px,left:10px”的样式(匹配所有)
$("p").position() //元素相对父元素的偏移,对可见元素有效(匹配第一个)，Object {top: 117, left: 250}
$("p").position().top // 117
$("p").position().left // 250
$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop('100') //设置滚轮滑的高度为100
提示：当滚动条位于最顶部-scrollTop(最左边-scrollLeft)时，位置是 0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
- 尺寸**********************************************************
// (1) 当下面方法用于返回值时， 则返回（第一个匹配）元素的高度。
// (2) 当下面方法用于设置值时，则设置所有匹配元素的高度。
//
$("p").height(); //获取p元素的高度(仅内容)
$("p").width(); //获取p元素的宽度
$("p").height(30); //设置所有p元素高度为30px
$("p").width(30); //设置所有p元素宽度为30px
$("p:first").innerHeight() //获取第一个匹配元素内部区域高度(内容 + padding)
$("p:first").innerWidth() //获取第一个匹配元素内部区域宽度(内容 + padding)
$("p:first").outerHeight() //匹配元素外部高度(内容 + padding + border)
$("p:first").outerWidth() //匹配元素外部宽度(内容 + padding + border)
$("p:first").outerHeight(true) //为true时包括边距(内容 + padding + border + margin)
border，margin，padding别忘了是两边都有，算的时候记得乘2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
（5）文档处理
- 内部插入
//
$("p").append("<b>nick</b>"); //每个p元素内的尾部追加内容
$("p").appendTo("div"); // 将所有p元素（匹配的值）移动到所有的div元素内的尾部（注意，匹配的p元素是直接移动的，原本的位置都没有了）
$("p").prepend("<b>Hello</b>"); //每个p元素内的头部追加内容
$("p").prependTo("div");   //将所有p元素（匹配的值）移动到所有的div元素内的头部
- 外部插入
//
$("p").after("<b>nick</b>"); //每个p元素同级之后插入内容
$("p").before("<b>nick</b>"); //在每个p元素同级之前插入内容
// 下面的其实就是反过来
$("p").insertAfter("#test"); //所有p元素（匹配的值）插入到id为test元素的后面
$("p").insertBefore("#test"); //所有p元素（匹配的值）插入到id为test元素的前面
- 替换
$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的元素替换成指定的HTML或DOM元素
// 下面同上
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
- 删除
//
$("p").empty(); //删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove(); //删除所有匹配的元素,包括本身
$("p").detach(); //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
- 复制
$("p").clone();   //克隆元素并选中克隆的副本
$("p").clone(true); //布尔值指事件处理函数是否会被复制
clone() 方法生成被选元素的副本，包含子节点、文本和属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
$("p").clone().appendTo("body"); // 这个和上面的appendTo例子不同就在于，把匹配的p元素复制一份，添加到body内的尾部，而不是之前的移动到尾部
三、jQuery 事件方法
详细看这里文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
（1）页面载入
当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
ready() 方法规定当 ready 事件发生时执行的代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
提示：ready() 方法不应该与 一起使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
$(document).ready(function(){
do something...
});
//简写
$(function($) {
do something...
});
(2) 页面处理
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
//on() 方法在被选元素及子元素上添加一个或多个事件处理程序。绑定多个用{}。
$("p").on("click", function(){
alert( $(this).text() );
});
// 绑定多个事件
$('div').on({
'click': function() {
console.log($(this).text());
},
'mouseout': function() {
console.log(`${$(this).text()}移出了！`);
}
});
$("p").one( "click", fun...) // 主要区别：one 绑定一个一次性的事件处理函数
$("p").off( "click" ) //解绑一个事件
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
提示：如需移除事件处理程序，请使用 off() 方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
(3)事件
$("p").click();   //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素及其子元素上方时触发事件
$("p").mouseenter() //当鼠标指针位于元素上方时触发事件(与mouseover有区别！)
$("p").mouseout()  //当鼠标指针从元素及其子元素上移开时触发事件
$("p").mouseleave()  //当鼠标指针从元素上移开时触发事件(与mouseout有区别！)
区别：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
- 区别一（mouseenter和mouseover）
- mouseenter 事件只有在鼠标指针进入被选元素时被触发
- mouseover 事件在鼠标指针进入任意子元素时也会被触发
- 区别二（）
- mouseleave：只有在鼠标指针离开被选元素时被触发
- mouseout：在鼠标指针离开被选元素或任意子元素时都会被触发
// 与 keydown 事件相关的事件顺序：keydown -> keypress -> keyup
//当键盘或按钮被按下时触发事件 (window可以换成别的元素，例如input)
$(window).keydown()
//keypress 事件与 keydown (window可以换成别的元素) 事件类似。当按钮被按下时发生该事件(区别看下面)
$(window).keypress()
$("input").keyup() //当按钮被松开时触发事件
// 请使用 event.which 属性来返回哪个键被按下（keydown）或者松开（keyup）
$("input").keydown(function(event){ // keyup同理
$("div").html("Key: " + event.which);
});
// delete : 8
// enter: 13
// 空格: 32
注意一：keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
// scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
$(window).scroll() //当用户滚动时触发事件(window可以换成别的元素)
$(window).resize() //当调整浏览器窗口的大小时触发事件
// 当元素的值改变时发生 change 事件（仅适用于表单字段）
$("input[type='text']").change() //当元素的值发生改变时触发事件
- 当用于 select 元素时，change 事件会在选择某个选项时发生。
- 当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。而且初始化的时候要设置value属性值(即使为'')
// 当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
(4) (event object) 对象
所有的事件函数都可以传入event参数方便处理事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法：
event.pageX   //事件发生时，鼠标距离网页左上角的水平距离
event.pageY   //事件发生时，鼠标距离网页左上角的垂直距离
event.type   //事件的类型
event.which   //按下了哪一个键
event.data   //在事件对象上绑定数据，然后传入事件处理函数
event.target  //性返回哪个 DOM 元素触发了事件。
//阻止事件的默认行为(比如点击链接，会自动打开新页面\当点击提交按钮时阻止对表单的提交\)
event.preventDefault()  
event.stopPropagation() //停止事件向上层元素冒泡
提示：请使用event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了stopPropagation方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
四、jQuery 效果 方法
(1) 基本
//
$("p").show()     //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast")
$("p").show(1000); //也可为设置毫秒
// 当隐藏/显示元素时，如何使用 callback 参数。
$("p").show(1000,function(){
alert("Show()方法已完成!");
});
// hide() 和 show() 用法相同
$("p").hide()     //隐藏显示的元素
$("p").toggle();    //toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
(2) 滑动-相当于以滑动的方式实现show()和hide()、toggle()
- slideDown(): 以滑动方式显示元素
- slideUp():以滑动方式隐藏元素
- slideToggle():以滑动方式切换slideDown(),slideUp()
speed（("slow","normal","fast"，毫秒数），callback参数和show(),hide()方法一样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
$("p").slideDown("900"); //用900毫秒时间将段落滑下
$("p").slideUp("900");  //用900毫秒时间将段落滑上
$("p").slideToggle("900"); //用900毫秒时间将段落滑上，滑下
(3) 淡入淡出-相当于以淡入淡出的方式实现show()和hide()、toggle()
speed（("slow","normal","fast"，毫秒数），callback参数和show(),hide()方法一样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
$("p").fadeIn("900");    //用900毫秒时间将段落淡入
$("p").fadeOut("900");    //用900毫秒时间将段落淡出
$("p").fadeToggle("900");  //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒时间将段落的透明度调整到0.6
(4) animate() 方法-执行 CSS 属性集的自定义动画
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
提示：请使用 "+=" 或 "-=" 来创建相对动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
注意： 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。
$("button").click(function(){
$("#box").animate({height:"300px"});
});
$(".btn1").click(function(){
$("body").animate({
backgroundPositionX:"+=100px",
backgroundPositionY:"+=200px"
});
});
更多例子见这里 $.trim(str)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html
五、jQuery 杂项方法
$.trim(str)   //去除字符串两端的空格
$("li").each(function(){ // 输出每个 <li> 元素的文本
alert($(this).text())
});   
$.inArray( "John", arr ) //返回值John在数组arr中的索引位置，不存在返回-1
$.grep()   //返回数组中符合某种标准的元素
$.extend() //将多个对象，合并到第一个对象
$.makeArray() //将对象转化为数组
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction() //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() //判断浏览器是否支持某个特性作者：thomaszhou
链接：https://juejin.im/post/5ac46d5551882555627d804a
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/3168.html