# 第一章：JQuery是什么
JQuery是一个封装好的js库
# 1.入口函数,等待DOM结构渲染完毕即可执行，相当于DOMContentLoaded
$(function(){})
$(document).ready(function(){})
# 2.顶级对象$
$或者jQuery
# 3.jQuery对象和DOM对象的区别
jQuery对象：
本质是$把DOM元素包装后的对象，为伪数组形式，具有隐式迭代的特性
区别：
jQuery对象只能使用jQuery方法，DOM对象只能使用原生js属性和方法
转换：
DOM => jQuery：$(DOM元素)
jQuery => DOM：jQuery对象[index] || jQuery对象.get(index)
# 第二章 常用API
# 1 选择器
# 1.1基础选择器
$(' CSS选择器 ')
# 1.2 jQuery伪类选择器
基本伪类
:first
:last
:eq(index)
:odd
:even
例如：$('ul li:first')
子代伪类
:first-child
:nth-child()
:first-of-type
:nth-of-type()
表单伪类
:input
:checked
# 1.3 jQuery筛选方法
.parent() //返回最近一级的父级
.parents(selector) //所有满足条件的父级元素的集合
.children(selector) //亲儿子
.find(selector) //符合条件的后代
.siblings(selector) //当前元素的所有亲兄弟，不包括自身
.nextAll()
.prevAll()
.hasClass(class) //是否包含某个类，返回布尔值
.eq(index) //获取某个索引的jQuery对象
$(this).index() //获取当前jQuery对象在伪数组中的索引号
重点：parent() parents() children() find() siblings() eq()
# 1.4 链式编程
$(this).css('color','red').siblings().css('color','');
# 2.样式操作
# 2.1 简单样式
获取
.css('属性')
修改
.css('属性'，‘值’ )
.css({
属性：值,
属性：‘值’
}) //修改复合属性
# 2.2 类操作
和原生的classList操作类似
添加
.addClass('类名')
删除
.removeClass('类名')
切换
.toggleClass('类名')
# 3.jQuery效果
# 3.1显示隐藏
.show( [speed , [easing] , [fn] ] )
.hide()
.toggle()
# 3.2滑动
.slideDown( [speed , [easing] , [fn] ] )
.slideUp()
.slideToggle()
# 3.3淡入淡出
.fadeIn( [speed , [easing] , [fn] ] )
.fadeOut()
.fadeToggle()
.fadeTo( [ [speed] , opacity , [easing] , [fn] ] )
# 3.4自定义
自定义动画
.animate( params , [speed] , [easing] , [fn] )
自定义动画的参数
params:一组包含作为动画属性和终值的样式属性和及其值的集合，对象格式
停止动画排队
.stop() //写在效果方法的前面，相当于停止上一次动画效果
# 4.属性操作
# 4.1原有属性
获取
.prop('属性')
修改
.prop('属性'，‘值’)
# 4.2自定义属性
获取
.attr('属性')
修改
.attr('属性'，'值')
# 4.3数据缓存
.data() //将数据存储在内存中
# 5.内容文本操作
.html()
.text()
.val()
# 6.元素操作
# 6.1遍历，第二个参数为DOM元素对象
遍历DOM
.each(function (index, domEle) { } ) //这个参数顺序和Array对象的forEach参数是相反的
遍历DOM、数组或者对象
$.each(object , function(index, item) { } )
# 6.2创建元素
var ele = $('
')# 6.3添加元素
内部添加，父子关系
parent.append( jQuery对象 )
parent.prepend( jQuery对象 )
外部添加，兄弟关系
ele.after('内容')
ele.before('内容')
# 6.4删除元素
自身
ele.remove()
子元素
parent.empty()
parent.html("")
# 7.元素偏移
# 7.1以HTML文档为参照
.offset() //返回一个对象
获取
.offset().top || .offset().left
修改
.offset({
top: 值,
left: 值
})
# 7.2以定位父级为参照
.position() //只读对象
# 7.3获取被卷去的部分
顶部
.scrollTop()
左侧
.scrollLeft()
设置
.scrollTop(值) //原生js可以利用window.scroll(x,y),x和y不带单位
# 第三章 事件
# 1.事件注册
单个事件注册
.事件名称( function( ) {
// $(this)获取单个jQuery元素对象
} )
事件类型
.mouseover
.mouseout
.click
...
# 2.事件处理
不同事件，不同处理函数
.on ({
事件名称1：处理函数1,
事件名称2：处理函数2
})
不同事件，相同处理函数
.on( "事件名称1 事件名称2", function( ) { } )
事件委托，父元素绑定，指定selector选择的元素触发
.on('事件名称'，selector，function() { } )
on可以动态绑定事件，也就是未来创建的元素也有相应的事件
# 3.自动触发事件
.事件名()
.trigger('事件')
.triggerHandler('事件') //禁止默认行为
# 4.事件对象
和js的事件对象基本一致
# 第四章 其他特性
# 1.拷贝对象
$.extend( [deep], target, object)
deep为false时为浅拷贝，true为深拷贝
# 2.多库共存
将$统一改成jQuery
# 3.jQuery插件
jQuery之家
# 4.图片懒加载，插件实现
页面滑动到可视区时，再显示图片
vscode全局替换快捷键：ctrl+h