①、jQuery(1)，海量算法高频面试题精编解析

• 语法：$(DOM对象)

$('div')

​

• 语法：

// 第一种方法$('div')[index]   index是索引号// 第二种方法$('div').get(index) index是索引号

[]( )2、jQuery常用API🔥=================================================================================[]( )2.1、jQuery选择器🔥---------------------------------------------------------------------------------### []( )2.1.0、jQuery基础选择器🔥原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。语法：`$("选择器")` 里面选择器直接写CSS选择器即可，但是要加引号

$(".nav");

| 名称 | 用法 | 描述 || --- | --- | --- || ID选择器 | `$("#id")` | 获取指定ID的元素 || 全选选择器 | `$('*')` | 匹配所有元素 || 类选择器 | `$(".class")` | 获取同一类class的元素 || 标签选择器 | `$(".div")` | 获取同一类标签的所有元素 || 并集选择器 | `$("div,p,li")` | 选取多个元素 || 交集选择器 | `$("li.current")` | 交集元素 |### []( )2.1.1、jQuery层级选择器🔥| 名称 | 用法 | 描述 || --- | --- | --- || 子代选择器 | `$("ul>li")` | 使用>号，获取亲儿子层级的选择器；注意，并不会获取孙子层级的元素 || 后代选择器 | `$("ul li")` | 使用空格，代表后代选择器，获取 ul 下的所有 li 元素，包括孙子等 |

$(“ul li”);

我是div我是nav div
我是p
我是ol 的
我是ol 的
我是ol 的
我是ol 的
我是ul 的
我是ul 的
我是ul 的
我是ul 的
```### []( )2.1.2、知识铺垫jQuery 设置样式```$('div').css('属性','值')```### []( )2.1.3、jQuery隐式迭代🔥*   遍历内部DOM元素(伪数组形式存储)的过程就叫做 **隐式迭代***   简单理解: 给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用```惊喜不，意外不惊喜不，意外不惊喜不，意外不惊喜不，意外不
相同的操作
相同的操作
相同的操作
```### []( )2.1.3、jQuery筛选选择器🔥```// 选取 ul 里面的 第一个 li$("ul li:first").css("color","red");```| 语法 | 用法 | 描述 || --- | --- | --- || : 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元素中，选择索引号为偶数的元素 |```
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
多个里面筛选几个
```### []( )2.1.4 jQuery筛选方法🔥| 语法 | 用法 | 说明 || --- | --- | --- || 🔥parent() | `$("li").parent();` | 查找父级，最近一级的父元素 || 🔥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")`index从0开始 |```儿子
我是屁
我是p
```### []( )2.1.5 jQuery排他思想🔥*   想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。```快速快速快速快速快速快速快速```### []( )2.1.6 jQuerty链式编程🔥链式编程是为了节省代码量，看起来更优雅。使用链式编程一定注意是哪个对象执行样式.```$(this).css("color","red").siblings().css("color","");

快速快速快速快速快速快速快速

[]( )2.2、jQuery样式操作🔥----------------------------------------------------------------------------------### []( )2.2.1、jQuery修改样式css方法jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式1.  参数只写属性名,则返回属性值

$(this).css(“color”);

2.  参数是属性名,属性值,逗号分隔,是设定一组样式。属性需要加引号,值是数字可不加单位和引号

$(this).css(“color”,300);

3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号

$(this).css({

"color":"red","width": 400,"height": 400,// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号backgroundColor: "red"

})

### []( )2.2.2、jQuery设置类样式方法作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

// 1.添加类

$(“div”).addClass(“current”);

// 2.移除类

$(“div”).removeClass(“current”);

// 3.切换类

$(“div”).toggleClass(“current”);

```### []( )2.2.3、jQuery类操作和className区别*   原生 JS 中的 className 会覆盖元素原先里面的类名*   jQuery里面类操作只是对指定类进行操作，不影响原先的类名``````[]( )2.3、jQuery效果🔥--------------------------------------------------------------------------------### []( )2.3.1、jQuery显示与隐藏效果jQuery 给我们封装了很多动画效果，最为常见的如下：![在这里插入图片描述](https://img-blog.csdnimg.cn/b357f95c4a3641139e56cae9212db87c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)#### []( )①显示效果语法：```// 显示语法规范show([speed,[easing],[fn]])       //中括号表示参数都可以省略$("div").show();```参数：*   参数都可以省略， 无动画直接显示。*   speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。*   easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。*   fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。#### []( )②隐藏效果语法：```// 隐藏语法规范hide([speed,[easing],[fn]])$("div").hide();```参数：*   参数都可以省略， 无动画直接显示。*   speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。*   easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。*   fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。#### []( )③切换效果语法：```// 切换语法规范toggle([speed,[easing],[fn]])$("div").toggle();```参数：*   参数都可以省略， 无动画直接显示。*   speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。*   easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。*   fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。建议：平时一般不带参数，直接显示隐藏即可```显示隐藏切换```### []( )2.3.2、jQuery滑动效果与事件切换#### []( )①下滑动语法：```// 下滑动slideDown([speed,[easing],[fn]]) $("div").slideDown();```#### []( )②上滑动语法：```// 上滑动slideUp([speed,[easing],[fn]]) $("div").slideUp();```#### []( )③滑动切换语法：```// 滑动切换效果slideToggle([speed,[easing],[fn]]) $("div").slideToggle();

下拉滑动上拉滑动切换滑动

#### []( )④事件切换语法：

hover([over,]out)

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

$(“div”).hover(function(){},function(){});

// 第一个function是鼠标经过的函数

// 第二个function是鼠标离开的函数

// 如果hover只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

$(“div”).hover(function(){

$(this).slideToggle();

})

### []( )2.3.3、jQuery动画队列及其停止排队方法动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行#### []( )①停止排队语法：

stop()

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

$(".nav>li").hover(function(){

// stop 方法必须写到动画的前面$(this).children("ul").stop().slideToggle();

})

### []( )2.3.4、jQuery淡入淡出以及突出效果#### []( )①淡入淡出切换语法：

// 淡入

fadeIn([speed,[easing],[fn]])

$(“div”).fadeIn();

// 淡出

fadeOut([speed,[easing],[fn]])

$(“div”).fadeOut;

// 淡入淡出切换

fadeToggle([speed,[easing],[fn]])

#### []( )②渐进方式调整到指定的不透明度语法：

// 修改透明度 这个速度和透明度必须写

fadeTo(speed,opacity,[easing],[fn])

参数：*   opacity ：透明度必须写，取值 0~1 之间*   speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

$(“div”).fadeTo(1000,0.5)