第一章：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筛选方法

image-20211020102221979

.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

    最近更新:
    Contributors: shyarcher