jQuery 是经常使用的类库，它极大的简化了原生JS的操作，屏蔽了浏览器差异。
这里按照一个顺序，总结一下最基本的用法。
一、获取元素
JS里面必不可少的操作就是对某个DOM元素修改样式，首先得拿到元素。
例如下面的html片段：
<div id=‘testSelector‘>
<p class="child" title="This is first line">aaa</p>
<p class="child" title="This is second line">bbb</p>
<p class="child" title="This is third line">ccc</p>
<p class="child" title="This is a row">ddd</p>
</div>
如果需要选出前三个p元素，先想想选择器：
div 的直接子元素中，p类型的元素，元素的class包含child， div > p.child
元素的title属性包含了line的元素，[title*="line"]
那么在原生JS里面和jQuery，可以分别这样写：
// 1. Select From Pure JS
var els1 = document.querySelectorAll(selectStr);
var p1 = els1[0]; //aaa
var len1 = els1.length; //3
// 2. Select From JQuery
var els2 = $(selectStr);
var p2 =els2[0]; //aaa
var len2 = els2.length; //3
var result = (p1 === p2);
二、操作样式
接着上面得内容，获取到一个DOM(Pure JS)和一个jQuery对象之后，就可以修改元素得样式了。
考虑这样一个html片段：
<style>
#testCss {
width: 300px;
height: 300px;
background-color: darkorange;
}
</style>
<div id="testCss"></div>
两个最常见的需求：
1. 如何获取一个元素样式中某个属性的值，例如获取背景色
2. 如何修改背景色
实现如下：
// PureJS
var el = document.querySelector("#testCss");
// 1. 直接获取style，这个获取不到css应用上去的style
var backColor = el.style.backgroundColor; //undefined
// 2. 获取最终计算样式，这个考虑了css
backColor = window.getComputedStyle(el, null).backgroundColor; //darkorange
el.style.backgroundColor = "red";
// jQuery
var $el = $(‘#testCss‘);
// jQuery 使用了 window.getComputedStyle，因此考虑了css
backColor = $el.css(‘background-color‘); //darkorange
$el.css(‘background-color‘, ‘red‘);
总结 jQuery 操作样式：
jQuery中设置样式，属性名是和css一样的，效果是设置到了元素的style上面
注意：属性名和CSS中使用的方式一样
1. 获取属性
$el.css(‘background-color‘);
2. 设置属性
$el.css(‘background-color‘, ‘red‘);
3. 设置多个属性
$("p").css(
{
"background-color": "yellow",
"font-size": "200%"
});
引申： 使用回调设置值;
$el.css(‘background-color‘, function (index, oldValue) {
// ...
return ‘red‘;
});
三、绑定事件
原生JS里面，我们通过绑定事件，从而得到用户某个行为的时机，例如按下鼠标，mousedown，松开鼠标，mouseup。
在这些时机里面，我们需要响应用户行为，做出反应。
总结一下，原生JS和jQuery是如何挂事件的：
先看PureJS:
// 1. 绑定点击事件和移除事件
function clickHandler1() {
console.log(‘click‘);
}
el.addEventListener(‘click‘, clickHandler1);
setTimeout(() => {
el.removeEventListener(‘click‘, clickHandler1);
}, 5000);
// 2. 不仅需要绑定点击事件，还需要给回调函数传参数
el.addEventListener(‘click‘, (function () {
var data = ‘aaa‘;
return function (e) {
console.log(`click event is ${e} and data is ${data}`);
}
})());
jQuery:
//jQuery
function clickHandler2() {
console.log(‘click, from jQuery‘);
}
function clickHandlerWithData(e) {
console.log(`click, from jQuery, data is ${e.data}`);
}
var $el = $(‘#testCss‘);
// 1. 直接调click方法，传一个方法来挂事件
$el.click(clickHandler2);
// 2. 使用bind方法挂事件
$el.bind(‘click‘, clickHandler2);
// 3.使用bind方法挂事件，并且传参数
$el.bind(‘click‘, ‘bbb‘, clickHandlerWithData);
// 4.使用bind方法挂事件，并且一次挂多个事件
$el.bind({
click: function () {
console.log(‘click‘);
},
mouseover: function () {
console.log(‘mouseover‘);
},
mouseout: function () {
console.log(‘mouseout‘);
}
});
// 取消某个click事件回调
$el.unbind(‘click‘, clickHandler2);
$el.unbind(‘click‘, clickHandlerWithData);
// 取消所有click事件回调，包括所有方式绑定的事件
$el.unbind(‘click‘);
总结如下：
发click事件
$el.click();
绑定click事件
$el.click(clickHandler);
$el.bind(‘click‘, clickHandler);
取消绑定click事件
$el.unbind(‘click‘);
$el.unbind(‘click‘, clickHandler);
四、应用动画
举个例子，在 jQuery 里面连续应用两段动画。
var $el = $(‘#testCss‘);
$el
.animate(
{
left: "+=500px",
top: "+=100px"
},
‘slow‘,
function () {
console.log(‘first animation end‘);
})
.animate(
{
opacity: ‘0.3‘
},
‘slow‘,
function () {
console.log(‘second animation end‘);
}
);
动画的基本使用方法：
$("div").animate({
left: ‘250px‘,
height: ‘+=150px‘,
width: ‘+=150px‘
});
这里传入一个最终应用的样式，注意属性名都是需要满足驼峰式的，jQuery 不会立即应用这个样式，而是以一个速度，渐进的方式实现。
1. 关于display，jQuery里面封装了隐藏显示效果，注意加了速度，就是宽度和高度同时变化
$el.show(3000);
$el.hide(3000);
$el.toggle(3000);
2. 关于Opacity，jQuery里面封装了淡入淡出效果
$el.fadeIn(3000);
$el.fadeOut(3000);
$el.fadeToggle(3000);
3. 关于height，jQuery里面封装了滑动效果
$el.slideDown(3000);
$el.slideUp(3000);
$el.slideToggle(3000);
原文：https://www.cnblogs.com/chenyingzuo/p/12210192.html