jQuery方法简单汇总

1、jQuery的选择器： $(‘ 内容 ’); ①$ (‘xx’); 获取页面中所有的xx标签；
② $(‘ x x o o ’); 获取页面中所有的 x x 标签内的 o o 标签； ③$ (‘xx > oo’); 获取页面中的xx标签的子元素中的oo标签；
④$(‘xx > oo:nth-child(1)’); 获取页面中的xx标签的子元素中的oo标签的第一个；
$(‘ x x > o o : f i r s t ’); 同上； ⑤$ (‘xx > oo:last-child’); 获取页面中的xx标签的子元素中的oo标签的最后一个；
$(‘ x x > o o : l a s t ’); 同上； ⑥$ (‘xx > oo.gg’); 获取页面中xx标签中所有的类名为gg的oo标签；
⑦ $KaTeX parse error: Expected 'EOF', got '#' at position 3: (‘#̲aaa’); 获取id为aa\dots$ (‘xx:nth-child(odd)’); 获取页面中xx标签集合的奇数个：
⑨ $(‘ x x : e q (i n d e x) ’); 获取页面中 x x 标签集合中第 i n d e x 个； ⑩$ (‘xx:odd’); 获取所有索引为奇数的 xx 标签；
$(‘xx:even’); 获取所有索引为偶数的xx标签；

2、jQuery的筛选器：
① $(‘ x x ’) . f i r s t () x x 元素集合中的第一个； ②$ (‘xx’).last() xx元素中的最后一个；
③ $(‘ x x ’) . e q (3) x x 元素集合中索引值为 3 的元素； ④$ (‘xx’).next() xx元素的下一个兄弟元素；
⑤ $(‘ x x ’) . n e x t A l l () x x 元素后面的所有兄弟元素 ⑥$ (‘xx’).nextUntil(‘.a10’); xx元素后面的兄弟元素，直到.a10为止，不包括.a10；
⑦ $(‘ x x ’) . p r e v () x x 元素的上一个兄弟元素； ⑧$ (‘xx’).prevAll() xx元素前面的所有兄弟元素
⑨ $(‘ x x ’) . p r e v U n t i l (‘ . a 1 ’) x x 元素前面的兄弟元素，直到 . a 1 为止，不包括 . a 1 ； ⑩$ (‘xx’).parent() xx元素的父元素
⑪ $(‘ x x ’) . p a r e n t s () x x 元素的所有祖先元素，知道 h t m l ⑫$ (‘xx’).parents(‘bb’) xx元素的所有祖先元素中的bb元素
⑬ $(‘ x x ’) . p a r e n t s U n t i l (‘ b b ’) x x 元素的所有祖先元素，直到 b b 元素为止，不包含 b b 元素； ⑭$ (‘xx’).children() xx元素的所有子元素
⑮ $(‘ x x ’) . c h i l d r e n (‘ s p a n ’) x x 元素的所有子元素中标签名为 s p a n 的； ⑯$ (‘xx’).children(‘.aa’) xx元素中所有子元素中类名为aa的元素；
⑰ $(^{'} x x^{'}) . s i b l i n g s () x x 元素的所有兄弟元素； ⑱$ (‘xx’).siblings(’.a9’) xx元素的所有兄弟元素中类名为 a9 的元素；
⑲ $(^{'} x x^{'}) . f i n d (^{'} . a 9^{'}) x x 元素所有后代元素中类名为 . a 9 的； ⑳ ($ (‘xx’).index() xx元素在其父元素中的第几个，返回值是一个数值；
3、jQuery操作文本内容：
① $(^{'} x x^{'}) . h t m l () 获取 x x 元素内的超文本内容，注意 : 获取的时候, 只能获取元素集合里面的第一个元素的超文本内容； ②$ (‘xx’).html(‘内容 ‘) 设置xx标签内的超文本内容
③ $(^{'} x x^{'}) . t e x t () 获取 x x 标签内的文本内容； ④$ (‘xx’).text(‘文本内容’) 设置xx元素的内部文本内容；
⑤ $(^{'} i n p u t^{'}) . v a l () 获取 i n p u t 元素的 v a l u e 值， v a l () 只获取元素集合里面第一个元素的 v a l u e 值； ⑥$ (‘input’).val(‘文本内容’) 设置 input 元素的 value 值，能获取多少个就设置多少个；
4、操作元素类名：
给类名为add的标签添加事件
$(’.add’).click(function () {
$(‘div’).addClass(‘box’) 给 div 元素添加类名
$(‘div’).removeClass(‘box’) 移除 div 元素的类名
$(‘div’).toggleClass(‘container’) 切换 div 元素的类名
$(‘div’).hasClass(‘box’) 判断有没有 box 类名
})
5、操作元素样式：
批量设置样式
$(‘div’)
.css({
width: 200,
height: ‘300px’,
opacity: 0.8,
float: ‘left’
})
6、事件绑定：
给xx元素绑定事件：
$(‘xx’).事件名（事件函数）
清除xx元素上的bb事件：
$(‘ x x ’) . o f f (事件名, 事件处理函数) 7 、 j Q u e r y 的节点操作：（ 1 ）创建节点：语法：$ () 或者 jQuery()
() 里面传递一个 html 格式文本的时候就是创建节点
（2）插入节点：
内部插入
①页面元素.append(要插入的元素)
②要插入的元素.appendTo(页面元素)
③页面元素.prepend(要插入的元素)
④要插入的元素.prependTo(页面元素)
外部插入
①页面元素.after(要插入的元素)
②要插入的元素.insertAfter(页面元素)
③页面元素.before(要插入的元素)
④要插入的元素.insertBefore(页面元素)
（3）删除节点：
对应原生 js 里面的 removeChild()
①页面元素.empty() 把自己变成空标签
②页面元素.remove() 把自己移除
（4）替换节点：
对应原生 js 里面的 replaceChild()
①页面元素.replaceWith(替换元素)
②替换元素.replaceAll(页面元素)
（5）复制节点：
对应原生 js 里面的 cloneNode()
①元素.clone()
8、jQuery获取元素尺寸：
获取元素内容区域的宽和高
$(‘div’).width()
$(‘div’).height()
获取元素内容 + padding 区域的宽和高
$(‘div’).innerWidth()
$(‘div’).innerHeight()
获取元素内容 + padding + border 区域的宽和高
$(‘div’).outerWidth()
$(‘div’).outerHeight()
9、浏览器卷去的尺寸：
（1）获取浏览器卷去的高度, 最好是在滚动事件里面获取
$(window).scroll(function () {
事件就会随着浏览器的滚动触发
})

（2）设置卷去的宽度和高度
$(‘button’).click(() => {
// 卷去的高度设置为 0, 回到顶部
$(window).scrollTop(0)

  // 卷去的宽度设置为 0, 回到最左边
  $(window).scrollLeft(0)
})

10、jQuery中的动画：
（1）让元素出现不同的移动, 改变
① transition -> 过渡动画
② animation -> 帧动画
（2）标准动画
① show()
② hide()
③ toggle()
（3）折叠动画
① slideDown()
② slideUp()
③ slideToggle()
（4）渐隐渐显动画
① fadeIn()
② fadeOut()
③ fadeToggle()
④ fadeTo()
（5）综合动画
① animate()
（6）停止动画
① stop()
② finish()
11、jQuery 发送一个 ajax 请求：
（1） $.get() -> 发送 get 请求的；
（2） $.post() -> 发送 post 请求的；
（3） $.ajax() -> 可以发送任何请求(get, post, put, delete，jsonp)；