本身自己擅长vue3方面中后台管理和数据可视化及移动端方向项目，结果突然让你迭代上古时代jQuery项目，结果是肝起来，go！go！go！

选择器

//里面选择器直接写 CSS 选择器即可，但是要加引号 
$("选择器")   

基础选择器

名称	用法	描述
ID选择器	$("#id"")	获取指定ID的元素
全选选择器	$('*')	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$(""li.current")	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li");	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器

名称	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

元素调用选择器

元素调用	使用方法来筛选元素
$("选择器") .first()	元素集合中的第一个
$("选择器") .last()	元素集合中最后一个
$("选择器") .next()	下一个兄弟元素
$("选择器") .prev()	上一个兄弟元素
$("选择器") .nextAll()	后面所有的兄弟元素
$("选择器") .prevAll()	前面所有的兄弟元素
$("选择器") .parent()	父元素
$("选择器") .parents()	所有祖宗元素
$("选择器") .eq(数字)	指定下标的元素
$("选择器") .find(选择器)	后代中指定的元素
$("选择器") .siblings()	所有的兄弟元素
$("选择器") .children()	所有的子元素
$("选择器") .end()	回到链式操作的上一个对象

层级选择器

语法	用法	说明
parent()	$("li").parent();	查找父级
parents()	$("li").parents();	查找祖父
children(selector)	$("“ul" ).children("li")	相当于$("ul>li")，最近一级（亲儿子)
find(selector)	$("ul" ).find("li" );	相当于$("ul li""),后代选择器
siblings(selector)	$( ".first" ).siblings(""li");	查找兄弟节点，不包括自己本身
nextAll( [expr])	$(".first" ).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last" ).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(""li").eq(2);	相当于$("li:eq(2)" ) , index从0开始

表单选择器

语法	匹配表单元素
$(":input")	所有表单元素
$(":text")	单行文本框
$(":password")	单行密码框
$(":radio")	单选按钮
$(":checkbox")	多选按钮
$(":submit")	提交按钮
$(":reset")	重置按钮
$(":image")	图片按钮
$(":button")	普通按钮
$(":file")	文件上传按钮
$(":hidden")	隐藏域（匹配页面中所有dispaly:none的标签）

表单对象选择器

语法	选择表单对象元素
$("input:enabled")	所有可用表单
$("input:disbaled")	首页禁用表单
$("input:checked")	所有选中的表单
$("option:selected")	被选中的下拉框

链式编程

$('选择器').事件名(回调函数).事件名(回调函数)

样式操作

操作css方法

// 1.参数只写属性名，则是返回属性值
let 变量 = $(选择器).css('属性名');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(选择器).css(属性名, 属性值);

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(选择器).css(
    { 
    "属性名1":"属性值1",
    "属性名2":"属性值2"
    }
);

设置样式方法

// 添加类
$("选择器").addClass("类名");

//删除类
$("选择器").removeClass("类名");

//切换类
$("选择器").toggleClass("类名");

//判断类名，返回布尔值
$("选择器").hasClass("类名");

效果

//显示隐藏：
show() / hide() / toggle() ;
//划入画出：
slideDown() / slideUp() / slideToggle() ; 
//淡入淡出：
fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 
//自定义动画：
animate() ;

显示隐藏

//显示
$("选择器").show()
$("选择器").show([speed,[easing],[fn]])
//隐藏
$("选择器").hide()
$("选择器").hide([speed,[easing],[fn]])
//切换
$("选择器").toggle()
$("选择器").toggle([speed,[easing],[fn]])

• 参数都可以省略， 无动画直接显示。
• speed：三种预定速度之一的字符串(slow,normal, or fast)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是swing，可用参数linear。
• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

滑入滑出或展开收起

//下滑效果，展开
$("选择器").slideDown()
$("选择器").slideDown([speed,[easing],[fn]])
//上滑效果，收起
$("选择器").slideUp()
$("选择器").slideUp([speed,[easing],[fn]])
//切换滑动效果，展开收起切换效果
$("选择器").slideToggle()
$("选择器").slideToggle([speed,[easing],[fn]])

• 参数都可以省略， 无动画直接显示。
• speed：三种预定速度之一的字符串(slow,normal, or fast)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是swing，可用参数linear。
• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

淡入淡出

//淡入效果
$("选择器").fadeIn()
$("选择器").fadeIn([speed,[easing],[fn]])
//淡出效果
$("选择器").fadeOut()
$("选择器").fadeOut([speed,[easing],[fn]])
//切换淡入淡出效果
$("选择器").fadeToggle()
$("选择器").fadeToggle([speed,[easing],[fn]])
//渐进方式调整到指定的不透明度
$("选择器").fadeTo()
$("选择器").fadeTo([[speed],opacity,[easing],[fn]])

• 参数都可以省略， 无动画直接显示。
• speed：三种预定速度之一的字符串(slow,normal, or fast)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是swing，可用参数linear。
• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
• opacity 透明度必须写，取值 0~1 之间。

自定义动画

//下滑效果
$("选择器").animate()
$("选择器").animate(params,[speed],[easing],[fn])

• params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
• speed：三种预定速度之一的字符串(slow,normal, or fast)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是swing，可用参数linear。
• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

停止动画

// 停止当前动画
$('选择器').stop()

// 清空队列 在动画当前状态停止
$('选择器').stop(true)

// 清空队列 直接到当前动画的结束状态
$('选择器').stop(true,true)

• stop() 方法用于停止动画或效果。
• 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

属性操作

• val()

  //取值
  $("选择器").val()
  //赋值
  $("选择器").val('值')
  

• prop()

  //所谓元素固有属性就是元素本身自带的属性
  
  //获取属性语法
  $("选择器").prop('属性')
  
  //设置属性语法
  $("选择器").prop('属性', '属性值')
  
  //删除属性
  $("选择器").removeProp('属性值')
  

• attr()

  //用户自己给元素添加的属性，我们称为自定义属性。
  
  //获取属性语法
  $("选择器").attr('属性') // 类似原生 getAttribute()
  
  //设置属性语法
  $("选择器").attr('属性', '属性值') // 类似原生 setAttribute()
  
  //删除属性语法
  $("选择器").removeAttr('属性')
  

• data()

  //在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除
  
  //附加数据语法
  $("选择器").data('name','value') // 向被选元素附加数据
  
  //获取数据语法
  $("选择器").date('name') // 向被选元素获取数据
  
  //删除数据语法
  $("选择器").removeData('name') 
  

文本属性

• 普通元素内容

  // 获取元素的内容
  $("选择器").html() 
  
  // 设置元素的内容
  $("选择器").html('内容')
  

• 普通元素文本内容

  // 获取元素的文本内容
  $("选择器").text() 
  
  // 设置元素的文本内容
  $("选择器").text('文本内容') 
  

• 表单的值

  /// 获取表单的值
  $("选择器").val() 
  
  // 设置表单的值
  $("选择器").val('内容')
  

元素操作

遍历元素

• 选择器

  $("div").each(function (index, domEle) { 
      //逻辑语句 
  }）
  

  • each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
  • 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
  • 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

• $语法

  $.each(object，function (index, element) { 
         //逻辑语句 
  }）
  

  • $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
  • 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

• 查找方法

  //父元素
  $("选择器").parent()
  
  //子元素 
  $("选择器").children()
  
  //兄弟元素
  $("选择器").siblings()
  
  // 后代元素
  $("选择器").find('选择器')
  
  

元素增删改

• 创建元素

  $('<li></li>');
  

• 添加元素

  //内部添加
  //内部后面添加
  $("选择器").append('内容')
  //内部前面添
  $("选择器").prepend('内容')
  
  //外部添加
  //内容放入目标元素后面
  $("选择器").after('内容') 
  //把内容放入目标元素前面
  $("选择器").before('内容') 
  

  • 内部添加元素，生成之后，它们是父子关系。
  • 外部添加元素，生成之后，他们是兄弟关系。

• 删除元素

  // 删除匹配的元素（本身）
  $("选择器").remove()
  
  // 删除匹配的元素集合中所有的子节点
  $("选择器").empty()
  
  // 清空匹配的元素内容
  $("选择器").html('') 
  

  • remove 删除元素本身。
  • empt() 和 html('') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

• 替换

  //用a替换掉选择器内容
  $("选择器").replaceWith(a)
  
  //用 选择器内容 替换掉所有 b
  $("选择器").replaceAll(b)
  

元素操作

//元素的个数
$("选择器").length

尺寸操作

语法	用法
width() / height()	取得匹配元素宽度和高度值只算width / height
innerWidth()/ innerHieght()	取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含 padding . border
outerWidth(true)/ outerHeight(true)	取得匹配元素宽度和高度值包含 padding . borde、margin

• 以上参数为空，则是获取相应值，返回的是数字型。

• 如果参数为数字，则是修改相应值。

• 参数可以不必写单位。

  $('选择器').width() // 内容宽度
  $('选择器').height() // 内容高度
  $('选择器').innerWidth() // 内容宽度 + 内边距
  $('选择器').innerHeight() // 内容高度 + 内边距
  $('选择器').outerWidth() // 内容宽度 + 内边距 + 边框
  $('选择器').outerHeight() // 内容高度 + 内边距 + 边框
  $('选择器').outerWidth(true) // 内容宽度 + 内边距 + 边框 + 外边距
  $('选择器').outerHeight(true) // 内容高度 + 内边距 + 边框 + 外边距
  

位置操作

• offset()

  • 设置或获取元素偏移

  • 参照html标签

  • 设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

  • 该方法有2个属性 left、top 。

    • offset().top 用于获取距离文档顶部的距离，
    • offset().left 用于获取距离文档左侧的距离。

  • 会把外边距margin计算进去

  • 设置元素的偏移,代码演示

    $("选择器").offset({ top: 10, left: 30 });
    

• position()

  • 获取元素偏移
  • 参照离他最近有定位的祖先元素
  • 返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 该方法有2个属性 left、top。
    • position().top 用于获取距离定位父级顶部的距离，
    • position().left 用于获取距离定位父级左侧的距离。
  • 该方法只能获取。
  • 以外边距margin为边界,不计算margin

• scrollTop()/scrollLeft() 滚动距离

  • 设置或获取元素被卷去的头部和左侧
  • scrollTop() 方法设置或返回被选元素被卷去的头部。
  • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

事件

事件注册

$("选择器").事件(function(){
    
})

//代码演示
$(“div”).click(function(){ 
    //事件处理程序 
})

事件处理

• on()

  • 基本信息

    $("选择器").on(events,[selector],fn)
    

    • events:一个或多个用空格分隔的事件类型，如click或keydown 。
    • selector: 元素的子元素选择器 。
    • fn:回调函数 即绑定在元素身上的侦听函数。

  • 多个事件处理程序

    $("选择器").on({
        事件1: function(){}, 
        事件2: function(){},
        事件3: function(){}
    });
    $("选择器").on(“事件1 事件2”, function() {
        //处理程序内容
    });
    

  • 事件委派操作

    //把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
    $('选择器').on('事件', '元素', function() {
     //处理程序内容
    });
    

  • 动态绑定事件

    //动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
    $('div').on('click','p', function(){
     alert("俺可以给动态生成的元素绑定事件")
    });
    //相当于
    $("div").append($("<p>我是动态创建的p</p>"));
    

• off()

  • 移除通过 on() 方法添加的事件处理程序。

  • // 解绑选择器所有事件处理程序
    $("选择器").off() 
    
    // 解绑选择器上面的点击事件 后面的 foo 是侦听函数名
    $("选择器").off( "click") 
    
    // 解绑事件委托
    $("选择器").off("click", "li"); 
    

    如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

• one()

  //注册一次性事件
  $("选择器").one('事件名', function(){})
  

事件阻止

$("选择器").on(events,[selector],function(event) {
    //阻止默认行为：event.preventDefault() 或者 return false 
    //阻止冒泡： event.stopPropagation() 
})

事件对象

$("选择器").on(events,[selector],function(event) {
	event.pageX 事件发生时，鼠标距离网页左上角的水平距离
	event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
	event.type 事件的类型（比如click）
	event.which 按下了哪一个键
	event.data 在事件对象上绑定数据，然后传入事件处理函数
	event.target 事件针对的网页元素
	event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
	event.stopPropagation() 停止事件向上层元素冒泡
})

事件切换

• trigger()

  • 自动触发事件

  • // 简写形式
    $("选择器").click() 
    
    //自动触发模式
    $("选择器").trigger("type") 
    
    //自动化触发模式
    $("选择器").triggerHandler(type) //triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
    
    //自动触发点击事件，不需要鼠标点击,代码演示
    $("选择器").on("click", function () {
     alert("hi~");
    });
    $("选择器").trigger("click"); 
    

• hover()

  • 事件切换

  $("选择器").hover([over,]out)
  // 其中over和out为两个函数
  

  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

其他事件

$("选择器").blur() 表单元素失去焦点。
$("选择器").change() 表单元素的值发生变化
$("选择器").click() 鼠标单击
$("选择器").dblclick() 鼠标双击
$("选择器").focus() 表单元素获得焦点
$("选择器").focusin() 子元素获得焦点
$("选择器").focusout() 子元素失去焦点
$("选择器").hover() 同时为mouseenter和mouseleave事件指定处理函数
$("选择器").keydown() 按下键盘（长时间按键，只返回一个事件）
$("选择器").keypress() 按下键盘（长时间按键，将返回多个事件）
$("选择器").keyup() 松开键盘
$("选择器").load() 元素加载完毕
$("选择器").mousedown() 按下鼠标
$("选择器").mouseenter() 鼠标进入（进入子元素不触发）
$("选择器").mouseleave() 鼠标离开（离开子元素不触发）
$("选择器").mousemove() 鼠标在元素内部移动
$("选择器").mouseout() 鼠标离开（离开子元素也触发）
$("选择器").mouseover() 鼠标进入（进入子元素也触发）
$("选择器").mouseup() 松开鼠标
$("选择器").ready() DOM加载完成
$("选择器").resize() 浏览器窗口的大小发生改变
$("选择器").scroll() 滚动条的位置发生变化
$("选择器").select() 用户选中文本框中的内容
$("选择器").submit() 用户递交表单
$("选择器").toggle() 根据鼠标点击的次数，依次运行多个函数
$("选择器").unload() 用户离开页面

高级方法案例

对象拷贝

$.extend([deep], target, object1, [objectN])

• deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
• target: 要拷贝的目标对象
• object1:待拷贝到第一个对象的对象。
• objectN:待拷贝到第N个对象的对象。
• 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
• 深拷贝，前面加true，

工具函数

$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象，合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。

插件扩展

基础语法

//语法1
$.fn.插件名 = function(参数){
    //逻辑语句
}
//语法2
$.fn.extend({
    "插件名": function(参数){
       //逻辑语句
    }
}));

//演示
$.fn.changeStyle = function(colorStr){
    this.css("color",colorStr);
}

链式插件

//语法
$.fn.插件名 = function(参数){
     return this;
}

立即执行函数

• 防止$符号污染的jQuery插件

• 避免受JavaScript库变量影响，让变量影响，让变量只属于这个立即执行函数的作用域

(function($){
     $.fn.插件名 = function(参数){
         //逻辑语句
         return this;
     }
})(jQuery);

多个插件

(function($){
    $.fn.extend({
        "插件1": function(参数){
           //逻辑语句
        },
        "插件2": function(参数){
            //逻辑语句
        },
        "插件3": function(参数){
            //逻辑语句
        }
    });
})(jQuery);