自用 jQuery 基础

jQuery

一、认识

是一个大型的开源类库，封装的都是 DOM 相关的操作

特点：

 + 选择器
 + 链式编程
 + 隐式迭代

优点：全兼容

使用方法：

1. 下载一个 jQuery.js 文件 https://jquery.com
2. 在页面引入

+ 直接引入 jQuery.js 

3. 开始使用

 + jQuery.js 中有  window. jQuery  =  window.$ =  jQuery 
 + 调用 jQuery 时，使用名字是   $  或者   jQuery

4. 关于$ ()

 + $('选择器'):获取元素
 + $('DOM结构'):把 DOM 结构转化为 jQuery 元素集合
 + $('html结构字符串'):创建节点
 + $(function(){}):jQuery 的入口函数

二、 jQuery获取元素

1. 基本选择器

 + $('选择器')
   css 里面的选择器，符合 CSS 语法
   不管用什么选择器获取到的一定是个 jQuery 的元素集合

2. 特殊选择器

 +  $('选择器 : first') 第一个选择器
 +  $('选择器 : last')  最后一个选择器
 +  $('选择器 : eq(索引)')获取索引的第几个
 +  $('选择器 : odd')获取索引的奇数个
 +  $('选择器 : even') 获取索引的偶数个

3. jQuery 的筛选器

语法：$('选择器').first()
	目的：为了链式编程  
  + 普通选择
    first() 获取到选择器内的第一个
    last() 获取到选择器内的最后一个
    eq(索引) 获取到选择器内的索引第几个
  + 兄弟关系
	siblings() 获取到所有的兄弟元素，不包括自己
    next() 获取下一个兄弟元素
    nextAll() 获取到后面的所有的兄弟元素
    nextAll('选择器') 获取到后面的所有的兄弟元素中类名是选择器名字
    nextUntil() 获取到后面的所有的兄弟元素
    nextUntil('选择器') 获取到后面的所有的兄弟元素直到选择器名字为止，不包含选择器
    prev() 获取到上一个兄弟元素
    prevAll() 获取到前面的所有的兄弟元素
    prevAll('选择器') 获取到前面的所有的兄弟元素中类名是选择器名字
    prevUntil() 获取到前面的所有的兄弟元素
    prevUntil('选择器') 获取到前面的所有的兄弟元素直到选择器名字为止，不包含选择器
  + 向父级关系
	parent() 获取到父元素
   	parents() 逐层获取到所有的结构父级，直到 html 为止 
    parents('选择器') 获取到逐层的父级结构中满足选择器名字的元素
    parentsUntil() 逐层获取到所有的结构父级，直到 html 为止 
    parentsUntil('选择器') 逐层获取到所有的结构父级，直到 选择器元素 为止
  + 后代元素
	find('选择器') 查找所有后代元素中符合选择器要求的元素
    index() 返回值：是该元素在其 html 结构（兄弟关系）中的索引位置

三、jQuery操作 css 样式

 + 获取 css 样式
	$('选择器').css('样式名')
	返回值: 该样式的值
 + 设置 css 样式
	$('选择器').css('样式名'，'样式值')
	作用: 给该元素设置该样式的值
 + 批量设置样式
    $('选择器').css({
        样式名:样式值 ,
        样式名:样式值 ,
        样式名:样式值 ,
        样式名:样式值
    })
    样式与样式之间用 逗号 隔开

四、jQuery操作元素类名

 + 添加类名
	$('选择器').addClass('类名')	

 + 删除类名
	$('选择器').removeClass('类名')	

 + 切换类名
	$('选择器').toggleClass('类名')	
	作用：如果原来有此类名，就删除此类名，原来没有此类名，就加上此类名

五、jQuery事件绑定

1. on() 方法

 +  $('选择器').on(事件类型，事件处理函数)
 + 	$('选择器').on(事件类型，选择器，事件处理函数)
 	  => 用来实现事件委托
 	  => 元素集合身上绑定事件，但只有满足选择器要求的元素身上才触发事件
 + 	$('选择器').on(事件类型，复杂数据类型，事件处理函数)
 	  => 复杂数据类型是给事件处理函数传递的参数
 	  => 在事件处理函数内通过 时间对象.data 获取
 +	$('选择器').on(事件类型，选择器，数据，事件处理函数)
	  => 事件委托和传递数据
 + 	$('选择器').on(事件类型1:事件处理函数1,事件类型2:事件处理函数2...)
	  => 批量绑定事件
	  => 不能进行事件委托和传递数据

2. one() 方法

 + 和 on 方法使用方法一模一样
 + 但 one() 事件只能触发一次

3. off() 方法

 + $('选择器').off(事件类型)
	  => 把该事件类型的所有事件处理函数全部取消
 + $('选择器').off(事件类型，事件处理函数)
	  => 把该事件类型的某一个事件处理函数取消

4. trigger() 方法

 + $('选择器').trigger(事件类型)
 	  => 直接触发事件

5. 常用事件函数

 + 	$('选择器').事件类型(事件处理函数)
 + 	$('选择器').事件类型(数据,事件处理函数)

6. 唯一的特殊事件

 + hover 事件
	$('选择器').hover(函数1,函数2)
   		=> 函数1 在鼠标移入的时候触发
 		=> 函数2 在鼠标移出的时候触发
 		=> 只写一个函数，移入移出都触发此函数

六、jQuery操作元素属性

1. attr() 和 removeAttr() 一般操作自定义属性

 + attr() 获取
	 =>  $('选择器').attr('属性名') 
	 =>  返回值:获取到对应属性的值
	 =>  不能获取到prop()设置的自定义属性的值
 + attr() 设置
	 =>  $('选择器').attr('属性名',属性值) 
	 =>  设置对应属性的值
 + removeAttr() 
	 =>  $('选择器').removAttr('属性名') 
	 =>  删除该元素内的所有元素的某一个属性，但是不能删除prop()设置的自定义属性的值

2. prop() 和 removeProp() 一般操作原生属性

 + attr() 获取
	 =>  $('选择器').prop('属性名') 
	 =>  返回值:获取到对应原生属性的值,不能获取到自定义属性，除非这个自定义属性由prop()设置的
 + prop() 设置
	 =>  $('选择器').prop('属性名',属性值) 
	 =>  设置对应属性的值，如果是自定义属性，不会显示在标签身上
 + removeProp() 
	 =>  $('选择器').removProp('属性名') 
	 =>  不能删除原生属性，只能删除自定义属性

七、jQuery操作元素内容

1. html() 等价于 innerHTML

 + html() 获取
	$('选择器').html()
	  => 获取到该元素的所有内容，以字符串的形式返回
 + html() 设置
	$('选择器').html('内容')
	  => 设置该元素的所有内容，完全翻盖式的设置

2. text() 等价于 innerText

 + text() 获取
	$('选择器').text()
	  => 获取到该元素的 文本内容，以字符串的形式返回
 + text() 设置
	$('选择器').text('内容')
	  => 设置该元素的所有内容，完全翻盖式的设置

3. val() 等价于 value

 + val() 获取
	$('选择器').val()
	  => 获取到该表单的 value 值
 + val() 设置
	$('选择器').val('内容')
	  => 设置该表单的 value 值，完全翻盖式的设置

4. 追加内容的方法

先获取到开始的内容，在加上新的内容，在给元素设置总的内容

八、jQuery获取元素尺寸

1. width() 和 height()

    + $('选择器').width() 
    + $('选择器').height() 
   	 => 得到元素的 内容 区域
   

2. innerWidth() 和 innerHeight()

    + $('选择器').innerWidth() 
    + $('选择器').innerHeight() 
   	  => 得到元素的 内容 + padding 区域
   

3. outerWidtn() 和 outerHeight()

    + $('选择器').outerWidtn()
    + $('选择器').outerHeight()
   	  => 得到元素的 内容 + padding + border 区域
   

4. outerWidtn( true ) 和 outerHeight( true )

    + $('选择器').outerWidtn( true )
    + $('选择器').outerHeight( true )
   	 => 得到元素的 内容 + padding + border + margin 区域
   

5. offset( )

    + $('选择器').offset()
   	  => 获取元素相对于左上角屏幕的偏移量
   	  => 返回值:是一个对象数据类型{ top:xxx,left:xxx }
    + $('选择器').offset({ top:xxx,left:xxx })
   	  => 绝对设置 元素 相对于页面左上角的距离
   

6. position()

    + $('选择器').position()
   	  => 只能读取元素的绝对定位位置
   	  => 返回值:是一个对象数据类型{ top:xxx,left:xxx }
   

九、jQuery操作元素节点

1.创建元素节点

 + $('html结构字符串')  如： $('<div></div>')

2.插入元素节点

内部插入 - 父子关系的插入
 + append()
	语法：父节点.append(子节点)
	作用：把该子节点插入到父节点的最后面的位置
 + appendTo()
	语法：子节点.appendTo(父节点)
	作用：把该子节点插入到父节点的最后面的位置
 + prepend()
	语法：父节点.prepend(子节点)
    作用：该子节点插入到父节点的最前面的位置
 + prependTo()
	语法：子节点.prependTo(父节点)
    作用：该子节点插入到父节点的最前面的位置
外部插入 - 兄弟关系的插入
 + insertBefore()
	语法：要插入的节点.insertBefore(已存在的节点)
	作用：把 要插入的节点 放在 已存在的节点 的上一个兄弟元素的位置
 + before()
	语法：已存在的节点.insertBefore(要插入的节点)
	作用：把 要插入的节点 放在 已存在的节点 的上一个兄弟元素的位置
 + insertAfter()
	语法：要插入的节点.insertAfter(已存在的节点)
	作用：把 要插入的节点 放在 已存在的节点 的下一个兄弟元素的位置
 + after()
	语法：已存在的节点.insertAfter(要插入的节点)
	作用：把 要插入的节点 放在 已存在的节点 的下一个兄弟元素的位置

3.删除节点

 + remove() 把自己删除
	语法：$('选择器').remove()
 + empty() 把自己变成空标签，删除全部的后代元素
	语法：$('选择器').empty()

4.替换节点

+ replaceAll() 
	语法：换上节点.replaceAll(换下的节点)
 + replaceWith()
	语法：换下节点.replaceAll(换上的节点)

5.克隆节点

+ clone()
	语法：节点.clone(参数1,参数2)  
	参数1：表示是否克隆该元素本身的事件，选填，默认是false 
	参数2：表示是否克隆该元素后代的事件，选填，默认跟随参数1
		=> 当参数1 为 false时，参数2 没有意义

十、jQuery的动画

1.基础动画

 + show() 显示
 	 $('选择器').show(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速运动等
		参数3：运动结束的回调函数
 + hide() 隐藏
  	$('选择器').hide(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速运动等
		参数3：运动结束的回调函数
+ toggle() 切换
	$('选择器').toggle(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速运动等
		参数3：运动结束的回调函数

2.折叠动画

 + slideDown() 下拉显示
  	$('选择器').slideDown(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速运动等
		参数3：运动结束的回调函数
 + slideUp() 上拉隐藏
  	$('选择器').slideUp(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速运动等
		参数3：运动结束的回调函数
 + slideToggle() 切换显示和隐藏
  	$('选择器').slideToggle(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速运动等
		参数3：运动结束的回调函数

3.淡入淡出动画

 + fadeIn() 淡入
  	$('选择器').fadeIn(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速等
		参数3：运动结束的回调函数
 + fadeOut() 淡出
  	$('选择器').fadeOut(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速等
		参数3：运动结束的回调函数
 + fadeToggle() 切换
  	$('选择器').fadeToggle(参数1,参数2,参数3)  
		参数1：运动时间，单位是 ms
		参数2：运动曲线，linear 匀速等
		参数3：运动结束的回调函数
 + fadeTo()
  	$('选择器').fadeTo(参数1,参数2,参数3,参数4)  
		参数1：运动时间，单位是 ms
		参数2：指定透明度
		参数3：运动曲线，linear 匀速等
		参数4：运动结束的回调函数

4.综合动画(运动函数)

​ 什么样式都能运动，但是 颜色变化 和 2D到3D 变化 不能实现

 + animate()
  	$('选择器').animate(参数1,参数2,参数3,参数4)
		参数1：对象数据类型，运动的样式
		参数2：运动的时间，单位 ms
		参数3：运动曲线，linear 匀速等
		参数4：运动结束的回调函数
	

5.运动结束

​ 当给一个元素添加动画时，都会在前面书写一次运动结束函数

 + stop() 动画直接停止当前位置
	 $('选择器').stop()
 + finish() 动画直接去到动画结束位置
	 $('选择器').finish()

十一、jQuery 发送 ajax 请求

1. 发送 ajax 请求

语法: $.ajax({ 本次请求的配置参数 })
 	url: 必填，表示请求的地址
    method: 选填，表示请求的方式，默认是GET
    data: 选填，表示携带给后面的参数，默认是 空字符串
    async: 选填，表示是否一部，默认是 true
    dataType: 选填，表示是否解析后端返回的数据，默认是 不解析
    success:  选填，表示成功的回调函数function()
    error: 选填，表示请求失败、解析失败的函数 function(xhr,err,info){
        	xhr: jquery 封装的 ajax 对象
        	err: 错误信息
       	 	info: 错误信息的描述
       	}
	timeout: 选填，表示请求超过这个时间还没得到响应就返回请求失败，单位 ms ，默认没有
    cache: 选填，表示是否缓存，默认是 true 缓存，只缓存 GET 缓存   
    context: 选填，表示回调函数内的 this 指向
    headers: 选填，默认没有，里面书写请求头内容，值是一个对象数据类型

2. 专门发送 GET 请求的方法

$.get(请求地址，携带参数，成功的回调，是否解析结果)

3. 发送 jsonp请求

语法: $.ajax() 
	+ 必须把 dataType 写成 jsonp
	+ cache 选项默认是 false
	+ jsonp: 表示给后端传递回调函数名的字段，默认是 callback
	+ jsonpcallback: 表示函数名，默认是 jquery 自己组装的名字

4. jQuery 内的全局 ajax 生命周期函数

 请求开始
	+ 语法: $(window).ajaxStart(function(){})
	+ 时机: 同一个作用域下的第一个 ajax 发送的时候执行
 发送之前
	+ 语法: $(window).ajaxSend(function(){})
	+ 时机: 会在每一个请求发送出去( xhr.send() )之前执行
 成功之后
	+ 语法: $(window).ajaxSuccess(function(){})
	+ 时机: 会在每一个请求成功之后执行
 失败之后
 	+ 语法: $(window).ajaxError(function(){})
	+ 时机: 会在每一个请求失败之后执行
 完成之后
 	+ 语法: $(window).ajaxComplete(function(){})
	+ 时机: 会在每一个请求完成之后执行，不管成功与否
 请求结束
 	+ 语法: $(window).ajaxStop(function(){})
	+ 时机: 同一个作用域下的最后一个 ajax 完成以后执行

十二、 jQuery 实现深浅拷贝

1. 浅拷贝

 + $.extend(对象1,对象2,对象3)
	 把 对象2 及后面的内容进行 浅 拷贝到 对象1 中

2. 深拷贝

 + $.extend(true,对象1,对象2,对象3)
	 把 对象2 及后面的内容进行 深 拷贝到 对象1 中

十三、 jQuery 的多库并存

当我们引入了别的框架插件等第三方内容也是使用 $ 和 jQuery 名字时

应该将 jQuery 引入在最后面

通过 jQuery 的 语法来还原 $ 和 jQuery

1. 还原 $

作用：让出 $ 这个变量的控制权
语法： $.noConflict()

2. 还原 $ 和 jQuery

作用：让出 $ 和 jQuery 变量的控制权
语法： $.noConflict(true)

3.定义新的控制权

直接定义一个参数接受  $.noConflict() 的返回值
如： $$ = $.noConflict() 此时 $$ 就是新的控制权

十四、 jQuery 的入口函数

语法: $(window).ready(function(){})
注意:会在页面的 DOM 结构加载完毕后执行
简写: $(function(){})

十五、 jQuery 的扩展机制

1. jQuery 自己本身的方法

不需要依赖 DOM 来执行的方法  $.xxx()
扩展语法: $.extend({
    		方法名:函数,
    		...
		})
使用:	$.方法名()

2. jQuery 原型上的方法

需要依赖 DOM 来执行的方法     $().xxx()
扩展语法: 	$.fn.extend({
    		方法名:函数,
    		...
		})
扩展语法:	$.extend($fn,{方法名:函数,...})
使用:	$().方法名()

注意：自己扩展的方法没有进行 隐式迭代

解决：this 就是 jQuery 获取到的元素集合
	可以在自己扩展函数里面加一个 遍历函数 
		this.each((index.item)=>{
			.....
		}) 
	就可以进行 隐式迭代

注意：自己扩展的方法如果没有返回一个 jQuery 的元素集合就没法使用链式编程

解决：可以在自己扩展函数里面加一个 return this 即可达到链式编程