jQuery的基本操作

一、了解jQuery

特点：选择器，隐式迭代（遍历），链式编程
类库：比人封装好了一些方法，放在一个js文件里，只需引入。

学习网站

js选择器

1.基本选择器
$(选择器)
css选择器怎么选，括号里面就可以怎样写
注意：
1.如果用id选择器，那么只能拿到一个元素
2.如果你用的是其他的选择器，那么有多少就获取多少（迭代）
3.不管拿到多少个元素，都是放在一个元素集合里面返回
2.特殊选择器
专属于jQuery的特殊选择器
1.:first 表示选中第一个元素 $(‘div:first’)
2.:last 表示选中的最后一个元素 $(‘div:last’)
3.:eq(索引) 表示索引第几个 $(‘div:eq(3)’)
4.:odd 表示索引为奇数的元素 $(‘div:odd’)
5.:even 表示索引为偶数的元素 $(‘div.even’)
3.筛选器
1.first（） 表示第一个 $(‘div’).first()
2.last() 表示最后一个 $(‘div’).last()
3.eq() 表示索引第几个 $(‘div’).eq(3)
4.prev() 获取上一个兄弟元素 $(‘div’).prev()
5.prevAll() 拿到上面所有兄弟元素 $(‘div’).prevAll() || prevAll(选择器)拿到上面兄弟中符合选择器条件的

6.prevUntil() 拿到上面所有的兄弟元素，${(}^{\prime }di{v}^{\prime }).prevUntil()|||prevUntil(选择器)拿到上面所有的兄弟节点，直到符合选择器条件的元素为止（向上查找，一有符合条件的就停止查找，将查找到的选中）$(‘div’).prevUntil(选择器)
7.next() 获取下一个兄弟节点 $(‘div’).next()
8.nextAll() 获取下面所有的兄弟元素 ${(}^{\prime }di{v}^{\prime }).nextAll()nextAll(选择器)拿到下面所有选择器中符合条件的9.nextUntil()拿到下面所有的兄弟元素，$(‘div’).nextUntil() ||| nextUntil(选择器)拿到下面所有的兄弟节点，直到符合选择器条件的元素为止（向下查找，一有符合条件的就停止查找，将查找到的选中）$(‘div’).prevUntil(选择器)
10.parents() 拿到所有结构父元素节点，直到html $(‘div’).parents() |||| parents(选择器) 拿到所有结构父元素节点中符合选择器条件的，直到html $(‘div’).parents(选择器)
11.parent（） 获取父元素 $(‘div’).parent()
12.parentsUntil() 获取所有结构父元素节点 parentsUntil(选择器) 拿到所有结构父元素节点直到选择器元素位置
13.find() 元素集合.find(选择器) 在所有后代元素中查找符合选择器的元素
14.index（）元素处在父元素的索引位置，返回值：是一个数字，表示这个元素在他的父元素里面是索引第几个的元素，注意：指的不是元素里面的索引，而是真实在他结构父级下的索引
15.siblings（） 元素集合.siblings() 获取所有兄弟元素
4.操作元素文本内容
1.html(） $(‘div’).html()
是一个读写属性
不传参数的时候，表示读取元素内的超文本内容
传递一个参数的时候，表示设置元素内容的文本内容（完全覆盖式的写入）
2.text（） $(‘div’).text()
是一个读写属性
不传参数的时候，表示读取元素内的文本内容
传递一个参数的时候，表示设置元素内容的文本内容（完全覆盖式的写入）
3.val（） $(‘div’）.val（）
是一个读写属性
不传参数的时候，表示读取文本元素的value值
传递一个参数的时候，表示设置元素的value值（完全覆盖式的写入）
5.操作元素类名
1.addClass() 添加类名
元素集合.addClass(“要添加的类名”)
2.removeClass() 删除类名
元素集合.removelass(“要删除的类名”)
3.hasClass() 判断类名是否有
元素集合.hasClass(要判断的类名)
返回值：一个布尔值
true:表示有这个类名
false：表示没有这个类名
4.toggleClass() 切换类名
元素集合.toggleClass(要切换的类名)
作用：切换类名，有就删除，没有就添加
6.操作元素样式
1.css()
传递一个字符串表示获取该样式的值
语法：元素集合.css(“width”)
行内和非行内都可以获取
传递俩个参数用来获取该样式的值
语法：元素集合.css(‘width’,“100px”)
如果你需要添加的单位是px，那么可以不写
传递一个对象作为参数
语法：元素集合.css({width:xxx,height:xxx})
批量设置元素样式
7.操作元素属性

1.attr()和removeAttr()
attr()
是一个读写的方法
语法一：
元素集合.attr(“属性名”)
获取该元素该属性的值
语法二：
元素集合.attr(‘属性名’,‘属性值’)
设置元素该属性的值
removeAttr（）
语法：元素集合.removeAttr(‘属性名’)
删除元素的该属性

注意：
1.是一个类似于setAttribute/getAttribute
可以删除和设置原生属性，也可以操作自定义属性
2.设置的自定义属性直接显示在标签上
3.设置的任何值，都会变成字符串形式写在标签上
不管你设置的时候是什么数据类型
你将来获取出来的都是字符串类型
4.removeAttr() 只能删除attr()设置的自定义属性，不能删除prop（）设置的自定义属性

2…prop（）和removeProp（）
prop（）
语法1： 元素集合.prop(‘属性名’) 获取元素该属性的值 语法2： 元素集合.prop(‘属性名’,‘属性值’) 设置元素该属性的值
removeProp（）
语法：元素集合.removeProp(‘属性名’) 删除元素的该属性

注意：
1.prop 一套可以设置自定义属性，也可以设置原生属性
2.removeProp（）只能删除自定义属性，不能删除原生属性，不能删除 attr() 设置的自定义属性
3.prop（）设置的自定义属性不会显示在标签上
而是把这个DOM元素当成一个对象，添加在他的身上
4.prop（）存储是把元素当做对象，存储数据

3.data()和removeData()
data()
语法1：元素集合.data(“属性名”)
获取data（）方法存储起来的数据
还能获取元素标签上data-xxx的属性（只要写data-后面的名字就可以获取）
语法2：元素集合.data(“属性名”，“属性值”)
设置一个属于data的自定义属性
设置的属性不存储在标签上而是将DOM元素当作一个对象，而在他身上再次开辟一个对象，存储在里面removeData（）
语法：元素集合.removeData(“属性名”)
删除元素中data（）存储起来的数据
不能删除元素标签身上写的data-xxx的属性

7.jQuery操作元素的尺寸
原生js操作元素尺寸
元素.offsetWidth
元素.offsetHeight
元素.clientWidth
jQuery操作元素尺寸

1.width（）和height（）
语法：
元素集合.width()
元素集合 .height()
获取：元素的内容区域的尺寸

2.innerWidth（）和innerHeight（）
语法：
元素集合.innerWidth()
元素集合.innerHeight()
获取：
元素的内容区域 + padding的尺寸

3.outerWidth（）和outerHeight（）
语法：
元素集合.outerWidth()
元素集合.outerHeight()
获取：
元素的内容区域 + padding + border 的尺寸

4.outerWidth（true）和outerHeight（true）
语法：
元素集合.outerWidth(true)
元素集合.outerHeight(true)
获取：
元素的内容区域 + padding + border 的尺寸 +margin的尺寸

8.jquery操作节点
原生JS操作节点
创建节点
createElement()
createTextNode()
插入节点：
appendChild（）
insertBefore（）
删除节点（）
removeChild（）
remove（）
替换节点：
replaceChild（）
克隆节点
cloneNode（）

jQuery操作节点

创建节点

$(“html格式的字符串”)

插入节点：

内部插入（父子关系的插入）
1.append（）
语法：父节点.append(要插入的子节点)
2.appendTo（）
语法：
要插入的子节点.appendTo(父节点)
将子节点插入到父节点里面，并且排列在最后
3.prepend（）
语法：父节点.prepend(‘要插入的子节点’)
将子节点插入到父节点里面，并且排列在最前面
4.prependTo()
语法：
要插入的子节点.prependTo(父节点)
将子节点插入到父节点里面，并且排列在最前
5.insertBefore（）
要插入的节点.insertBefore(已知节点)
把要插入的节点放在已知节点的前面一个
6.before（）
已知节点.before(要插入的节点)
把要插入的节点放在已知节点的前面一个
5.insertAfter（）
要插入的节点.insertAfter(已知节点)
把要插入的节点放在已知节点的后面一个
6.after（）
已知节点.before(要插入的节点)
把要插入的节点放在已知节点的后面一个

删除节点

1.remove（）
语法：元素集合.remove()
作用：把元素直接移除
2.empty（）
语法：元素集合.empty()
作用：把自己变成一个空标签

替换节点

1.replaceWith（）
语法：被替换节点.replaceWith(“替换节点”)
作用：使用替换节点，把被替换节点换掉

2.replaceAll（）
语法：被替换节点.replaceAll(“替换节点”)
作用：使用替换节点，把被替换节点换掉

克隆节点

1.clone（）
语法 ： 元素集合.clone()
第一个参数
默认是false，表示不克隆自己的事件
选填 true，表示克隆自己的事件
第二个参数
默认是跟随第一个，表示是否克隆后代元素的事件
如果第一个参数是false，第二个参数没有意义
如果不想克隆后代节点
${(}^{\prime }di{v}^{\prime }).clone(true).empty().insertAfter($(’.a’))

9.jQuery元素的偏移量
1.offset（）
是一个读写属性
读：
元素集合.offset()
返回值：一个对象数据类型，里面有左边和上边的偏移量，相对于页面文档流的左上角
写：
元素集合.offset({left:xxx,top:xxx})
绝对设置，不管你在哪里，不管是以什么方式进行偏移，一定给你移动到距离页面左上角的指定位置
2.position（）
是一个只读的方法
读：
元素集合.position()
返回值：一个对象数据类型，里面有这个元素的定位设置的值（left，top）
但是如果你设置的是right和bottom，会自动计算left和top值给你
解释:
1. 如果我的定位父级不是我的结构父级. position 拿到的值就做用在我的 结构父级身上
2. 如果我的定位父级是我的结构父级, position 拿到的值才是作用在我身上
3. 当作用在父级身上的时候, 拿到的是偏移量
=> 只有作用在自己身上的时候, 拿到的才是定位的值
=> 注意:
+ 使用 position 的时候
+ 需要保证你自己的定位父级就是你的结构父级
+ 不然拿不到准确的值

10.jQuery的事件绑定
1.on方式进行事件绑定
语法1：
元素集合.on(“事件类型”，事件处理函数)
标准绑定事件，带有隐式迭代（元素集合能获取几个个元素，就有多少个元素绑定事件）
语法2：
元素集合.on(‘事件类型’，‘选择器’，事件处理函数)
事件委托形式，把选择器元素的事件委托给元素集合
只有当你点击元素集合中，符合选择器元素的时候，才会触发（在jQuery的事件处理函数中，this指向准确触发事件的目标，而不是事件源）
语法3：
元素集合.on(“事件类型”,复杂数据类型，事件处理函数)
这给元素集合绑定事件的，这个复杂数据类型，是在事件触发的时候，给事件处理函数传递的参数
参数在事件处理函数里面通过事件对象e里面的data数据拿到
语法4：
元素集合.on('事件类型’,‘选择器’,‘参数’,‘事件处理函数’)
事件委托的形式，并且带有传递给事件处理函数的参数
语法5：
元素集合.on({
事件类型1：事件类型1的事件处理函数
事件类型2：事件类型2的事件处理函数
})
可以同时给一个元素集合绑定多个事件

2.one（）方法进行事件绑定
和on方法传递参数的方式一模一样
只不过绑定的事件只能执行一次
注意：事件委托的时候，只有点击其中一个元素好使，再点击其他的就不好使了

3.off（）方法进行事件解绑
语法1：
元素集合.off(“事件类型”)
将该事件类型的所有事件处理函数全部解绑
语法2：
元素集合 .off(“事件类型”，“、要解绑的事件处理函数”)
将该事件指定事件处理函数解绑

4.trigger（）
语法：元素集合.trigger(“事件类型”)
作用：就是把元素集合里面所有元素身上的指定事件触发

jQuery常用事件绑定
jQuery把常用的事件做成了函数，自己调用就可以
click()
mouseover()
mouseout()
举例：
语法1：
元素集合.click（事件处理函数）
给元素集合内的每一个元素绑定一个click事件
语法2：
元素集合.click(参数，事件处理函数)
给事件处理函数传递参数
接收还是在e事件对象的data成员里面

jQuery的唯一一个特殊事件对象
hover事件
语法：元素集合.hover(鼠标移入的时候的事件处理函数，鼠标移出的时候的事件处理函数)
注意：如果你只传递一个函数，那么移入移出都只触发这一个函数

11.jQuery的运动函数
1.标准运动函数
show（） 展示
hide() 隐藏
toggle()切换
语法：元素集合.show(时间，（毫秒），运动曲线，运动结束执行的函数)

2.折叠动画
slideDown() 下拉显示
slideUp 上拉隐藏
slideToggle（）切换和隐藏
语法:元素结合.slideDown(时间，运动曲线，运动结束时的函数)
3.渐隐渐显动画
fadeIn（）渐渐的显示
fadeOut（）渐渐的消失
fadeToggle（）渐渐的切换
语法：元素集合.fadeIn(时间，运动曲线，运动结束后的函数)
fadeTo（）将被选中元素的不透明度逐渐改变为指定的值
语法：元素集合.fadeTo(时间，指定透明度，运动曲线，运动结束后的函数)

4.综合动画函数
animate（）
语法：
元素集合.animate({要运动的属性}，时间，运动曲线，运动结束函数)
注意：运动的属性，颜色不能动，transfoem不能动
5.停止动画
stop（）
语法：
元素集合.stop()
当stop（）执行的时候，不管动画运动到哪，直接停止
finish（）
语法: 元素集合.finish()
当 finish() 执行的时候, 不管动画运动到什么地步了, 直接去到完成状态

12.jQuery的ajax函数
在jQuery里面有一个叫做ajax的函数，因为和DOM操作没有关系，不需要选择就能调用
语法：
$.ajax()
$是jquery向外暴漏的一个名字，是一个函数，函数也是一个对象，把$这个函数当做一个对象，向里面存储了一个叫做ajax的函数

使用方式：

$.ajax({
对象里面全是本次ajax请求的配置信息
url：‘请求地址’， 必填
method：‘传递方式’，默认是GET
data：‘传递给后端的数据’， 默认为‘’
可以写成‘key=value&key=value’
也可以写成{key：value，key2：value}
anync：是否异步， //默认是true
dataType：‘期望后端返回的数据类型’ 默认为string
如果是string表示不进行任何解析
如果是json，表示会自动执行JSON.parse（）
如果是xml，表示会自动解析xml格式的文本
success：成功的回调函数
error：失败的回调函数
本次请求失败的时候触发
失败不光是失败算失败解析失败也算失败
timeout：事件事件单位是ms //默认为永久
设置了以后，如果在指定事件内，没有得到服务器响应
那么直接结束本次请求，判断失败
context：回调函数中的this指向，//默认是jQuery封装的ajax对象
cache：是否缓存// 默认是true， 表示不缓存
会自动给你添加一个参数，叫做_
值就是一个时间戳
})

2. jQuery和ajax相关的函数

$.ajax()可以发送任何方式的请求
专门封装了两个方法
$.get() =>专门用来发送get请求
$.post() =>专门用来发送post请求
这个三个函数都是按照Promise的形式封装的

1.$.get()语法：$.get(地址，参数，成功的回调，期望返回的数据类型)
2.$.post()语法：$.post(地址，参数，成功的回调，期望返回的数据类型)

3.jQuery封装的全局ajax构造函数（生命周期函数）
生命周期：从生到死
ajax的生命周期：发送->接收->结束
jQuery一共封装了六个全局钩子函数

1.$(window).ajaxStart(function(){})
表示同级作用域下的多个ajax中，第一个ajax开始的时候，会触发这个钩子函数

2.$(window).ajaxSend(function(){})
每一个请求执行send步骤之前，会触发这个钩子函数，只要有一个请求发出去了，就会触发

3.$(window).ajaxSuccess(function(){})
每一个请求成功后，会触发这个钩子函数
只要有一个请求成功了，就会触发一次

4.$(window).ajaxError(function(){})
每一个请求失败之后，会触发这个钩子函数
只要有一个请求失败了，就会触发一次

5.$(window).ajaxComplete(function(){})
每一个请求完成之后，会触发这个钩子函数
只要有一个请求完成了，不管成功还是失败就会触发

6.$(window).ajaxStop(function(){})
表示同级作用域下的多个ajax中
最后一个ajax完成以后，会触发这个钩子函数

13.jquery的入口函数
jQuery的入口函数
类似与window.onload的函数
语法：$(window).ready(function())简写语法：$(function(){console.log(‘入口函数’)})
和onload的区别
window.onload是在所有资源（图片，视频。。。）加载完毕后触发
$().ready()是在DOM结构加载完毕后触发

14.jQuery的遍历函数
jQuery里面给了一个专门遍历jQuery元素集合的方法
叫做：each（）
语法：元素集合.each(function(index,item){})
index就是每一次的索引
item就是元素集合内部的每一个元素

15.jQuery的多库并存
jQuery自己制作了一个方法，让自己交出变量控制权，
语法：$.noConflict()这个代码一执行，表示jQuery不占用$这个变量了
语法：$.noConflict(true)这个代码一执行，表示jQuery不在占用$和jQuery这两个变量
返回值是一个新的控制权，只要指定一个变量接收就可以

16.jQuery的插件扩展机制

jQuery在封装的时候，向外暴漏了接口
你可以根据你的代码向jQuery里面添加一些方法
分为俩个机制
1.$.extend(名字：函数，名字：函数)向jQuery本身扩展方法2.$.fn.extend({名字：函数，名字：函数})
向jQuery的原型上扩展方法
使用的时候需要依赖元素集合调用$(选择器).名字（）