jQuery-常用API

1-jQuery选择器

JQA-01：hide()

作用：隐藏
语法：$(‘名’).hide();

JQ-02:$(document).ready()

作用：入口函数，等着页面加载完成运行函数方法，相当于DOMContentLoaded
语法：$(document).ready(function(){
方法
})

JQA-02S：$()

作用：跟Fun-02作用一致，升级简洁版
语法：$(function(){
方法
})

JQA-04：$(‘选择器’)

作用：原生js获取元素的方式有很多，很杂，而且兼容性不一致，
jq做了封装，是获取统一标准

筛选选择器
$(
function(){
$(‘ul li:odd’).css(‘backgroundColor’,‘red’);
$(‘ul li:even’).css(‘backgroundColor’,‘orangered’);
$(‘ul li:first’).css(‘backgroundColor’,‘yellow’);
$(‘ul li:last’).css(‘backgroundColor’,‘green’);
$(‘ul li:eq(2)’).css(‘backgroundColor’,‘blue’);
}
)

2-jQuery隐式迭代

自动遍历内部DOM元素(伪元素形式存储)的过程就叫做隐式迭代

JQA-05：$(‘名’).css();

作用：改变元素的css样式
语法：$(‘名’).css(‘属性’，‘值’);

js VS jq 对比实现改变4个div的背景颜色

//js
var div = document.getElementsByTagName(‘div’);
for(let i=0; i<div.length;i++){
div[i].style.backgroundColor = ‘pink’;
}

//jq
$(‘div’).css(‘backgroundColor’,‘pink’)

因为隐式迭代jq一行代码同时改变所有的背景颜色完胜。
3-jQuery筛选方法（重点）

JQA-06：parent();

作用：查找父级
语法：$(‘名’).parent();

JQA-07：children();

作用：类似子代选择器 ul>li
语法：$(‘名’).children(‘子代名’);

JQA-08：find();

作用：类似后代选择器 ul li（可以选择所有的子元素和孙元素）
语法：$(‘名’).find(‘子代名’);

JQA-09：siblings();

作用：查找兄弟节点，不包括自身
语法：$(‘名’).siblings(‘兄弟名’);

JQA-10：nextAll();

作用：查找当前元素之后的同级元素
语法：$(‘名’).nextAll();

JQA-11：prevtAll;

作用：查找当前元素之前的同级元素
语法：$(‘名’).prevtAll(‘子代名’);

JQA-12：hasClass();

作用：检查当前元素是否包含某个特定的类，有返true
语法：$(‘名’).hasClass(‘查找类名’);

JQA-13：eq();

作用：相当于索引选择器
语法：$(‘名’).eq(index);

JQA-14:index();

作用：获取当前对象的索引
语法：$(“名”).index();

JQuery操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
1.1参数只写属性名，返回属性值
$(‘div’).css(‘color’);

1.2参数是属性名,属性值，逗号分隔，修改一组样式
$(‘div’).css(‘color’,‘pink’);

1.3参数是对象形式，方便设置多组样式，属性加逗号分隔
$(‘div’).css({}
color : “pink”,
width : 400,
height : 400,
});

JQuery操作css类名方法

添加类：JQA-15：addClass();

//css
.add{
color:pink,
width : 400px,
height : 400px,
}
//jq
$(‘div’).addClass(‘add’);

删除类：JQA-16：removeClass();

//html

//jq
$(function(){
$(‘div’).removeClass(‘add’);
})

切换类：JQA-17：toggleClass();

//html

//css
div{
background-color: red;
width: 400px;
height: 400px;
}
.add{
background-color: pink;
width: 400px;
height: 400px;
}

//jq
$(function(){
$(‘div’).click(function(){
$(this).toggleClass(‘add’);
})
})

切换类做用，可以在设定的对象重复做添加和删除类名的操作
1.显示隐藏

JQA-01：hide()；同下

JQA-18：show()；//显示

参数说明1.speed:三种预定速度之一的字符串（‘slow’，‘normal’，‘fast’）或具体数值 单位毫秒
2.easing：用来切换效果，默认是swing，可用参数linear
3.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

JQA-19：toggle()；//切换，同上

2.滑动

JQA-20：slideDown()；//下滑

参数说明1.speed:三种预定速度之一的字符串（‘slow’，‘normal’，‘fast’）或具体数值 单位毫秒
2.easing：用来切换效果，默认是swing，可用参数linear
3.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

JQA-21：slideUp()；//上滑，同上

JQA-22：slideToggle()；//上下滑切换，同上

3.淡入淡出

JQA-23：fadeIn()；//淡入

JQA-24：fadeOut()；//淡出

JQA-24-o：fadeToggle()；//淡出

JQA-25：slideTo()；//调整透明度

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

4.自定义动画

JQA-26：animate()；//自定义

参数：1.params：想要更改样式属性，以对象形式传递，必须写，
属性名可以不用带引号，复合属性则需要驼峰命名
2.speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒 数值(如：1000)
3.easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"、
4.fn:在动画完成时执行的函数，每个元素执行一次。
//jq
$(‘div’).animate({
属性:值
},时间)

5.hover事件

JQA-27：hover()；

作用：相当于mouseover和mouseleave集合体
语法$(‘名’).hover(function(){}，function(){});

6.下拉框改进版

//jq旧版
$(function () {
$(’.nav>li’).mouseover(
function () {
$(this).children(’.z-nav’).slideDown();
}

    )
    $('.nav>li').mouseleave(
        function () {
            $(this).children('.z-nav').slideUp();
        }
    )
    })

//jq新版
//jq
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ver(function(){(this).children(’.z-nav’).slideDown();},function(){$(this).children(’.z-nav’).slideUp();})
})
//精精简版
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ver(function(){(this).children(’.z-nav’).slideToggle();})
})

7.动画队列和停止排队方法
原因动画在快速多次数执行不会暂停，用户体验不好

JQA-28：stop()；

作用：停止排队，写在动画前面
语法：写在动画前面
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ver(function(){(this).children(’.z-nav’).stop().slideToggle();})
})