jQuery（学习笔记）不定期更新~
作者：互联网
下载地址
https://jquery.com/
https://cdn.jsdelivr.net/npm/jquery@3.6.0/
jQuery API 中文文档
https://jquery.cuishifeng.cn/
简介
jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程
jQuery 的入口函数
层级选择器
筛选选择器
筛选选择器（重点）
属性选择器
$("div[id]") // 选择所有含有id属性的div元素
$("input[name='newsletter']") // 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") // 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") // 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") // 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") // 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") // 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man结尾的元素
返回指定的祖先元素 parents()
可以返回指定的祖先元素
例：$(".four").parents(".one");
选择器 :checked
匹配所有选中的被选中元素(复选框、单选框等)
例：$("input:checked")
元素固有属性值 prop()
就是元素本身自带的属性，比如 <a> 元素里面的 href
获取属性
prop("属性");
设置属性
prop("属性", "属性值");
元素自定义属性值 attr()
比如给 div 添加 index = "1"
获取属性
attr("属性");
设置属性
attr("属性", "属性值");
数据缓存 data()
data([key],[value])
key:存储的数据名
value:将要存储的任意数据
可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
添加数据
data("name", "value");
获取数据
data("name");
内容文本值
普通元素内容 html()
html() // 获取元素的内容
html("内容") // 设置元素的内容
普通元素文本内容 text()
text() // 获取元素文本的内容
text("文本内容") // 设置元素文本的内容
表单内容 val()
val() // 获取表单的内容
val("内容") // 设置表单的内容
链式编程
节省代码量，看起来更优雅
例：$(this).css('color', 'red').sibling().css('color', '');
多个事件绑定 on() 绑定一个或多个事件的事件处理函数 可以给未来动态生成的元素绑定事件 语法：on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型，如"click"或"keydown" selector:元素的子元素选择器 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:回调函数 绑定多个事件
jQuery 设置CSS样式 1.参数只写属性名，则是返回属性值 $(this).css('color'); 2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css('属性', '值'); 例：$('div').css('background-color', 'skyblue'); 3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 $(this).css({'color': 'red', 'font-size': '20px'}); 设置类样式 添加类 $('div').addClass('current'); 移除类 $('div').removeClass('current'); 切换类 $('div').toggleClass('current'); jQuery 得到当前元素的索引号 $(this).index(); hover 事件 hover([over,]out) over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
延时 delay() delay(duration) duration：延时时间，单位：毫秒 例：$('#foo').slideUp(300).delay(800).fadeIn(400); 显示隐藏效果 显示 show([speed,[easing],[fn]]) 隐藏 hide([speed,[easing],[fn]]) 切换 toggle([speed],[easing],[fn]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 滑动效果 向下滑动 slideDown([speed],[easing],[fn]) 向上滑动 slideUp([speed,[easing],[fn]]) 滑动切换 slideToggle([speed],[easing],[fn]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 淡入淡出效果 淡入 fadeIn([speed],[easing],[fn]) 淡出 fadeOut([speed],[easing],[fn]) 切换 fadeToggle([speed,[easing],[fn]]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 修改透明度 fadeTo([[speed],opacity,[easing],[fn]]) speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) opacity:一个0至1之间表示透明度的数字 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 自定义动画 animate animate(params,[speed],[easing],[fn]) params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字符串("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing" fn:在动画完成时执行的函数，每个元素执行一次 $("div").animate({ width: "90%", height: "100%", fontSize: "10px" }, 1000); 因为动画是给元素做的，如果要给文档做动画，转换一下 body 和 html 即可 $("body, html").animate({ scrollTop: 0 }, 1000); 停止动画 stop();
遍历元素 each 语法1 $("div").each(function(index, domEle) {}); index 是每个元素的索引号，domEle 是每个DOM元素对象 要想使用jQuery方法，需要给DOM元素转换为jQuery对象 $(domEle) 语法2 $.each(object, function(index, element) {}); $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 index 是每个元素的索引号，element 遍历内容 创建元素 例：$("<li></li>"); var li = $("<li>内容</li>"); 添加元素 $("ul").append(li); // 内部添加，放到指定元素内部的最后面 $("ul").prepend(li); // 内部添加，放到指定元素内部的最前面 $("ul").after(li); // 外部添加，放到指定元素的后面 $("ul").before(li); // 外部添加，放到指定元素的前面 删除元素 $("ul").remove(); // 删除元素，包括本身 $("ul").empty(); // 删除元素里面的子节点 $("ul").html(""); // 清空元素里面的子节点 jQuery 尺寸 以下参数为空，则是获取相应值，返回的是数字型 如果参数为数字，则是修改相应值。参数可以不写单位
jQuery 位置
offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有2个属性 left、top。 offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文梐左侧的距离
可以设置元素的偏移：offset({top:10, left:30});
position() 获取元素偏移
position() 方法用于返回被选元素相当于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
$("div").scrollTop(); // 获取元素被卷去的头部
$("document").scrollTop(300); // 设置文档头部被卷去的距离
多库共存 1.如果 $ 符号冲突，我们就使用 jQuery 例：jQuery.each(); 2.让 jQuery 释放对 $ 的控制权，让用户自己定义 例：var test = $.noConflict(); 然后再使用 test.each();
// 第一种
$(function() {
// 此处是页面 DOM 加载完成的入口（推荐）
});
// 第二种
$(document).ready(function() {
// 此处是页面 DOM 加载完成的入口
});
jQuery 的顶级对象 $
$是 jQuery的别称，在代码中可以使用 jQuery代替$，但一般为了方便，通常都直接使用$
$是 jQuery的顶级对象，相当于原生 JavaScript中的 window。把元素利用$包装成 jQuery对象,就可以调用 jQuery的方法
jQuery 对象和 DOM 对象的互相转换
DOM 对象转换为 jQuery 对象：$(DOM对象)
var mydiv = document.querySelector('div');
$(mydiv);
jQuery 对象转换为 DOM 对象
$('div')[index]; // index是索引号
$('div').get(index); // index是索引号
$('div')[0];
$('div').get(0);
jQuery 基础选择器
$("选择器") // 选择器直接写CSS选择器即可，但是要加引号
层级选择器
筛选选择器
筛选选择器（重点）
属性选择器
$("div[id]") // 选择所有含有id属性的div元素
$("input[name='newsletter']") // 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") // 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") // 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") // 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") // 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") // 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man结尾的元素
返回指定的祖先元素 parents()
可以返回指定的祖先元素
例：$(".four").parents(".one");
选择器 :checked
匹配所有选中的被选中元素(复选框、单选框等)
例：$("input:checked")
元素固有属性值 prop()
就是元素本身自带的属性，比如 <a> 元素里面的 href
获取属性
prop("属性");
设置属性
prop("属性", "属性值");
元素自定义属性值 attr()
比如给 div 添加 index = "1"
获取属性
attr("属性");
设置属性
attr("属性", "属性值");
数据缓存 data()
data([key],[value])
key:存储的数据名
value:将要存储的任意数据
可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
添加数据
data("name", "value");
获取数据
data("name");
内容文本值
普通元素内容 html()
html() // 获取元素的内容
html("内容") // 设置元素的内容
普通元素文本内容 text()
text() // 获取元素文本的内容
text("文本内容") // 设置元素文本的内容
表单内容 val()
val() // 获取表单的内容
val("内容") // 设置表单的内容
链式编程
节省代码量，看起来更优雅
例：$(this).css('color', 'red').sibling().css('color', '');
多个事件绑定 on() 绑定一个或多个事件的事件处理函数 可以给未来动态生成的元素绑定事件 语法：on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型，如"click"或"keydown" selector:元素的子元素选择器 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:回调函数 绑定多个事件
$("div").on({
mouseover: function() {},
mouseout: function() {},
click: function() {}
});
如果事件处理函数相同
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
});
事件委派
把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$('ul').on('click', 'li', function() {
alert('hello world!');
});
解绑事件 off()
$("p").off() // 解绑p元素所有事件函数
$("p").off("click") // 解绑p元素上面的点击事件
$("ul").off("click", "li") // 解绑事件委托
只触发一次事件 one()
$("p").one("click", function() {});
自动触发事件 trigger()
element.click() // 第一种简写形式
element.trigger("click") // 第二种自动触发模式
element.triggerHandler("click") // 第三种自动触发模式，不会触发默认事件
事件对象
element.on(events, [selector], function(event) {});
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()
对象拷贝
$.extend([deep], target, object1, [objectN])
deep:如果设为true为深拷贝，默认为false 浅拷贝
target:待修改对象
object1:待拷贝的第一个对象
objectN:待拷贝的第N个对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象
深拷贝，完全克隆，修改目标对象不会影响被拷贝的对象
jQuery 设置CSS样式 1.参数只写属性名，则是返回属性值 $(this).css('color'); 2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css('属性', '值'); 例：$('div').css('background-color', 'skyblue'); 3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 $(this).css({'color': 'red', 'font-size': '20px'}); 设置类样式 添加类 $('div').addClass('current'); 移除类 $('div').removeClass('current'); 切换类 $('div').toggleClass('current'); jQuery 得到当前元素的索引号 $(this).index(); hover 事件 hover([over,]out) over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
延时 delay() delay(duration) duration：延时时间，单位：毫秒 例：$('#foo').slideUp(300).delay(800).fadeIn(400); 显示隐藏效果 显示 show([speed,[easing],[fn]]) 隐藏 hide([speed,[easing],[fn]]) 切换 toggle([speed],[easing],[fn]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 滑动效果 向下滑动 slideDown([speed],[easing],[fn]) 向上滑动 slideUp([speed,[easing],[fn]]) 滑动切换 slideToggle([speed],[easing],[fn]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 淡入淡出效果 淡入 fadeIn([speed],[easing],[fn]) 淡出 fadeOut([speed],[easing],[fn]) 切换 fadeToggle([speed,[easing],[fn]]) 参数都可以省略 speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 修改透明度 fadeTo([[speed],opacity,[easing],[fn]]) speed:三种预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值(如：1000) opacity:一个0至1之间表示透明度的数字 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次 自定义动画 animate animate(params,[speed],[easing],[fn]) params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字符串("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing" fn:在动画完成时执行的函数，每个元素执行一次 $("div").animate({ width: "90%", height: "100%", fontSize: "10px" }, 1000); 因为动画是给元素做的，如果要给文档做动画，转换一下 body 和 html 即可 $("body, html").animate({ scrollTop: 0 }, 1000); 停止动画 stop();
遍历元素 each 语法1 $("div").each(function(index, domEle) {}); index 是每个元素的索引号，domEle 是每个DOM元素对象 要想使用jQuery方法，需要给DOM元素转换为jQuery对象 $(domEle) 语法2 $.each(object, function(index, element) {}); $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 index 是每个元素的索引号，element 遍历内容 创建元素 例：$("<li></li>"); var li = $("<li>内容</li>"); 添加元素 $("ul").append(li); // 内部添加，放到指定元素内部的最后面 $("ul").prepend(li); // 内部添加，放到指定元素内部的最前面 $("ul").after(li); // 外部添加，放到指定元素的后面 $("ul").before(li); // 外部添加，放到指定元素的前面 删除元素 $("ul").remove(); // 删除元素，包括本身 $("ul").empty(); // 删除元素里面的子节点 $("ul").html(""); // 清空元素里面的子节点 jQuery 尺寸 以下参数为空，则是获取相应值，返回的是数字型 如果参数为数字，则是修改相应值。参数可以不写单位
jQuery 位置
offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有2个属性 left、top。 offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文梐左侧的距离
可以设置元素的偏移：offset({top:10, left:30});
position() 获取元素偏移
position() 方法用于返回被选元素相当于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
$("div").scrollTop(); // 获取元素被卷去的头部
$("document").scrollTop(300); // 设置文档头部被卷去的距离
多库共存 1.如果 $ 符号冲突，我们就使用 jQuery 例：jQuery.each(); 2.让 jQuery 释放对 $ 的控制权，让用户自己定义 例：var test = $.noConflict(); 然后再使用 test.each();
标签：jQuery,不定期,元素,笔记,easing,div,fn,属性 来源： https://www.cnblogs.com/sweet-potatos/p/15246029.html