jq 筛选选择器，方法，隐式迭代 元素显示隐藏 淡入淡出 上拉下拉 动画 类名操作以及样式

jQuery

地址：https://jquery.com/ 历史版本：http://code.jquery.com/

1.x：兼容 IE678 低版本浏览器

2.x：不兼容 IE678 低版本浏览器

3.x：不兼容 IE678 低版本浏览器，官方主要维护版本

入口函数

// 一下两种入口函数 相当于原生中的 DOMContentLoaded
$(function () { /* DOM加载完成的入口*/ })
$(document).ready(function(){ /* DOM加载完成的入口*/ })

jquery对象和DOM对象

1，用原生js获取的对象就是 dom 对象

2，用jquery方法获取的对象就是 jquery对象

3，jquery对象的本质是，利用 $ 对DOM对象包装后产生的对象（伪数组形式存储）

对象的相互转换

DOM转Jquery $(element)

jquery转DOM

$(ele).get(0);
$(ele)[0];

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代

简单理解：给匹配到的元素进行循环遍历，执行响应的方法，而不用我们再次循环，简化操作

// 所有的div背景改为红色；
$(‘div‘).css(‘backgroundColor‘, ‘red‘);
// 如果只有属性没有值，则代表获取这个属性的样式值
$(‘div‘).css(‘backgroundColor‘);
// 修改多个的情况下传入对象即可
$(‘div‘).css({width: 100,height: ‘200px‘,backgroundColor: ‘red‘});
// 添加类名
$(‘div‘).addClass(‘current‘); // 不用加点 .
// 删除类名
$(‘div‘).removeClass(‘current‘);
// 切换类名 如果有就删除，没有就加上
$(‘div‘).toggleClass(‘current‘);

jquery 筛选选择器

Jquery 筛选方法

显示隐藏，上拉下拉，淡入淡出

/*
  参数都可以省略
  param1：三种预定速度之一的字符串 slow normal fast 默认normal 或者写数字 ms 例如 1000
  param2：用来指定切换效果默认是 swing 可用参数 linear
  param3：回调函数，动画完成后执行
  fateTo() 方法特殊 opacity，param1 为必填，其他选填
*/
// 效果
$(‘li‘).hide(); // 隐藏元素
$(‘li‘).show(); // 显示元素
$(‘li‘).toggle(); // 点击隐藏，点击显示 切换
// 上拉下拉
$(‘li‘).slideDwon(); // 下拉
$(‘li‘).slideUp(); // 上拉
$(‘li‘).slideToggle(); // 切换
// 淡入淡出
$(‘li‘).fadeIn(); // 淡出
$(‘li‘).fadeOut(); // 淡入
$(‘li‘).fadeToggle(); // 切换
$(‘li‘).fadeTo(time, opacity) // 时间ms 透明度 0~1

动画队列以及停止的方法

jquery 中一旦动画一旦执行，如果多次触发，就会造成动画或者效果排队执行 可以通过 stop() 方法来停止排队；stop() 一定要卸载动画或者效果的前面，因为停止的是上一次的动画

$(‘li‘).stop().slideToggle(); // 结束上一次的动画

自定义动画 animate()

animate(params,[speed],[easing],[fn]);
1, params: 想要更改的样式属性，以对象的形式传递，属性名可以不带引号，如果是复合属性则需要驼峰命名法，其余参数都可以省略
2，speed: 三种预定速度之一的字符串 slow normal fast 默认normal 或者写数字 ms 例如 1000
3, easing: 用来指定切换效果默认是 swing 可用参数 linear
4, fn: 回调函数，动画完成后执行

$(‘div‘).animate({left: 100,top: ‘100px‘,opacity: 0.5,backgrounColor: ‘red‘});

原文地址：https://www.cnblogs.com/article-record/p/12633091.html