【jQuery】jQuery 全套入门笔记

文章目录

一、jQuery 介绍
- （一）jQuery 概念
- - 1、定义
  - 2、优点
- （二）jQuery 基本使用
- - 1、下载
  - 2、快速使用
  - - （1）引入
    - （2）入口函数
    - （3）顶级对象
    - （4）jQuery 对象和 DOM 对象
二、jQuery 常用 API
- （一）选择器
- - 1、基础选择器
  - 2、层级选择器
  - 3、筛选选择器
  - - 链式编程
- （二）样式
- - 1、操作 CSS 方法
  - 2、设置类样式方法
- （三）属性
- - 1、元素自有属性
  - 2、元素自定义属性
  - 3、数据缓存属性
- （四）动画/效果
- - 1、显示隐藏
  - 2、滑动
  - 3、淡入淡出
  - 4、自定义动画
- （五）内容文本值
- - 1、HTML 代码
  - 2、HTML 文本
  - 3、HTML 值
- （六）元素操作
- - 1、遍历元素
  - - （1）隐式迭代（默认）
    - （2）遍历元素操作
    - - ① 遍历 DOM 元素
      - ② 遍历数据
  - 2、创建元素
  - 3、添加元素
  - - （1）内部添加
    - （2）外部添加
  - 4、删除元素
- （七）jquery 尺寸、位置
- - 1、jquery 尺寸
  - 2、jquery 位置
  - - （1）offset()
    - （2）position()
    - （3）scrollTop()/scrollLeft()
三、jQuery 事件
- （一）事件绑定与解绑
- - 1、事件绑定
  - - （1）单个事件注册
    - （2）批量事件注册 on()
    - - ① 绑定事件
      - ② 事件委托
      - ③ 动态绑定
    - （3）事件触发一次 one()
    - （4）自动触发事件 trigger()
  - 2、事件解绑 off()
  - - （1）解绑所有事件
    - （2）解绑特定事件
    - （3）解绑事件委托
- （二）事件对象
- - 1、阻止默认行为
  - 2、阻止冒泡
四、jQuery 拷贝对象
五、jQuery 多库共存
六、jQuery 插件
- - （一）瀑布流
  - （二）图片懒加载
  - （三）全屏加载

一、jQuery 介绍

（一）jQuery 概念

1、定义

jQuery 是一个快速、简洁的JS库，封装了JS常用功能代码，优化 DOM 操作、事件处理、动画设计和 Ajax 交互。学习 jQuery 的本质是学习调用这些函数（方法）

2、优点

轻量
跨浏览器兼容
链式编程、隐式迭代
支持事件、样式、动画，大大简化DOM操作
支持插件扩展开发，有丰富的三方插件
免费、开源

（二）jQuery 基本使用

1、下载

官网地址

1.x
- 兼容老版本IE
- 文件较大，兼容性最好
- 官网不再更新
2.x
- 不兼容IE8及以下版本
- 文件较小，执行效率更高
- 官网不再更新
3.x
- 不兼容IE8及以下版本
- 提供了一些新的API
- 提供不包含AJAX/动画API的版本
- 官方主要更新维护版本

2、快速使用

（1）引入

将jQuery下载下来，然后导入项目中，使用script标签进行引用

<head>
    <script src="jquery.min.js"></script>
</head>

（2）入口函数

如果要将 csript 代码放在HTML代码之前，可以添加入口函数延迟加载jQuery 代码，相当于原生 js 中的DOMContentLoaded代码

// 复杂版
$(document).ready(function(){
  // 此处是页面DOM加载完成的入口
})

// 简洁版
$(function(){
  // 此处是页面DOM加载完成的入口
})

（3）顶级对象

$是 jQuery 的别称，同时也是 jQuery 的顶级对象，相当于原生 js 中的 window
jQuery 对象本质是利用 $ 对DOM 对象包装后产生的对象（伪数组形式存储）

（4）jQuery 对象和 DOM 对象

部分原生 js 中的属性和方法 jQuery 没有封装，需要把 jQuery 对象转为 DOM 对象再使用
jQuery 对象和 DOM 对象可以互相转换
- DOM => jQuery：
$('选择器')
$(DOM对象)
- jQuery => DOM
$('选择器')[index]
$('选择器').get(index)

二、jQuery 常用 API

（一）选择器

1、基础选择器

$(‘CSS选择器’)

名称	用法	描述
全选选择器	$(’*’)	匹配所有元素
类选择器	$(’.class’)	获取同一类标签所有元素
标签选择器	$(‘div’)	获取同一类 class 元素
ID选择器	$(’#id’)	获取指定 id 元素
并集选择器	$(‘div,p,li’)	选取多个元素
交集选择器	$(‘div.p’)	交集元素

2、层级选择器

$(‘CSS层级关系’)

名称	用法	描述
子代选择器	$(‘ul>li’)	获取亲儿子层级元素，不含孙子层级元素
后代选择器	$(‘ul li’)	获取所有后代元素，含孙子层级元素

3、筛选选择器

$(‘CSS元素位置’)

名称	用法	描述
:first	$(‘li:first’)	获取第一个 li 元素
:last	$(‘li:last’)	获取最后一个 li 元素
:eq(index)	$(‘li:eq(2)’)	获取到的 li 元素中，选择索引号为2的元素，index 从0开始
:odd	$(‘li:odd’)	获取到的 li 元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的 li 元素中，选择索引号为偶数的元素

筛选方法

语法	用法	描述
parent()	$(‘li’).parent()	父级选择器
parents()	$(‘li’).parents(’.grandParent’)	祖先选择器
children(selector)	$(‘ul’).children(‘li’)	子代选择器
find(selector)	$(‘ul’).find(‘li’)	后代选择器
siblings(selector)	$(’.first’).siblings(‘li’)	查找除自身外的所有亲兄弟
nextAll([expr])	$(’.first’).nextAll()	查找当前元素之后的所有亲兄弟
prevAll([expr])	$(’.last’).prevAll()	查找当前元素之前的所有亲兄弟
hasClass(class)	$(‘div’).hasClass(‘img’)	检查当前元素是否含有某类，返回`布尔值`
eq(index)	$(‘li’).eq(2)	查找第二个当前元素

链式编程

定义：在jQuery中，如果一直对同一个元素进行函数操作，那么可以使用.函数名一直写下去
作用：节省代码量，代码更优雅

$("div").oneTime(3000, function () { // 定时函数需要引入 timer 插件
  $(this).css("backgroundColor", "#333").children("p").css("color", "#fff");
})

（二）样式

1、操作 CSS 方法

参数是'属性名'，返回属性值

$('div').css('color')

参数是'属性名','属性值'，设置一组样式。值为数字可以不加单位和引号

$('div').css('width',300) // 值为数字可以不加单位和引号

参数是对象{'属性名':'属性值','属性名':'属性值'}，设置多组样式。逗号隔开，属性可以不加引号，复合属性必须采用驼峰命名法；值为数字可以不加单位和引号

$('div').css({
  width:300, // 属性可以不加引号
  height:300,
  backgroundColor:'red' // 复合属性驼峰命名 值非数字必须加引号
  })

2、设置类样式方法

作用等同于classList，可以操作类样式，参数不加点

添加类

$('li').addClass('active')

删除类

$('li').removeClass('active')

切换类

$('li').toggleClass('active')

（三）属性

获取属性值：prop/attr/data(‘属性’)
设置属性值：prop/attr/data(‘属性’,‘属性值’)

1、元素自有属性

prop(‘自有属性’)

$('a').prop('href')
$('a').prop('title','顶呱呱')
$('input').change(function(){
  $(this).prop('checked') //返回布尔值 $('元素:checked').length 是复选框的个数
})

2、元素自定义属性

attr(‘自定义属性’)

$('div').attr('index') //类似原生 getAttribute()
$('div').attr('index', 2) //类似原生 setAttribute()
$('div').attr('data-index')

3、数据缓存属性

data(‘存放在元素内存的数据’)
可以在指定元素上存取数据，不修改 DOM 结构。一旦压面刷新，之前存放的数据都被移除

$('span').data('uname','blue')
// 此方法获取 data-index 这一h5自定义属性不许加data-，返回数字型
$('span').data('index')

（四）动画/效果

动画队列：动画/效果一旦触发就会执行，多次触发的情况下会造成多个动画/效果排队执行

停止排队：stop()用于停止动画/效果，必须写在动画/效果之前

$('.nav>li').mouseenter(function(){
  $(this).children('ul').stop().slideToggle(200);
})

1、显示隐藏

显示：show([speed][,easing][,fn])
隐藏：hide([speed][,easing][,fn])
切换：toggle([speed][,easing][,fn])

speed：动画速度，预定速度字符串（‘slow’/‘normal’/‘fast’）或毫秒（如：1000）
easing：指定切换效果，默认’swing’，还有参数’liner’
fn：回调函数，动画完成时执行的函数，每个元素执行一次

2、滑动

滑动向下：slideDown([speed][,easing][,fn])
滑动向上：slideUp([speed][,easing][,fn])
滑动切换：slideToggle([speed][,easing][,fn])
事件切换：hover([fn(){over},]fn(){out}) 事件经过和离开的复合写法，相当于 mouseenter 和 mouseleave

// 鼠标进入和离开的复合写法
$('.nav>li').hover(function(){
  $(this).children('ul').slideDown(200);
},function(){
  $(this).children('ul').slideUp(200);
})

// 鼠标进入和离开简单写法，触发同一个函数
$('.nav>li').hover(function(){
  $(this).children('ul').slideToggle(200);
})

3、淡入淡出

fadeIn([speed][,easing][,fn])
fadeOut([speed][,easing][,fn])
fadeToggle([speed][,easing][,fn])
fadeTo([speed],opacity,[easing][,fn])

opacity：透明度，取值0-1

4、自定义动画

animate(params,[speed][,easing][,fn])

params：对象形式的样式属性。属性名可以不加引号，复合属性采用驼峰命名

$('div').click(function(){
  $(this).animate({
    width:300,
    left:500,
    top:100,
    backgroundColor:'red'
  }, 1000)
})

（五）内容文本值

1、HTML 代码

相当于原生 innerHTML()

获取元素内容：html()
设置元素内容：html(‘内容’)

2、HTML 文本

相当于原生 innerText()

获取元素文本内容：text()
设置元素文本内容：text(‘内容’)

3、HTML 值

相当于原生 value

获取表单值：val()
设置表单值：val(‘内容’)

（六）元素操作

1、遍历元素

（1）隐式迭代（默认）

定义：对内部同一类 DOM 元素（伪数组）做相同操作
运用：排他思想

$(function){
  // 隐式迭代给所有 div 绑定鼠标事件
  $('div').mouseover(function{
    // 当前元素颜色变化
    $(this).css('color', 'pink');
    // 其余兄弟去掉颜色——隐式迭代
    $(this).siblings('div').css('color', '');
  })
}

（2）遍历元素操作

定义：对同一类 DOM 元素（伪数组）做不同操作

① 遍历 DOM 元素

语法：each(function(index, domEle){})

index：索引号
domEle：每个 DOM 对象
each()方法遍历匹配的每一个元素，用 DOM 处理
使用 $(domEle) 进行转换 DOM => jquery

var arr = ['red', 'pink', 'yellow']

// 回调函数第一个参数是索引号，第二个是 dom 对象，均自命名
$('div').each(function(i, domEle){
  // dom 对象转为 jquery 对象
  $(domEle).css('color',arr[i])
})

② 遍历数据

语法：$.each(object, function(index, element){})

index：索引号
element：遍历内容
$.each()方法可遍历任何对象，主要用于数据处理，如数组、对象

arr = ['red', 'pink', 'yellow']
obj = {name:'blue', age:18}
$.each(arr, function(i, ele){})
$.each(obj, function(key, value){})

2、创建元素

语法：$(‘HTML标签和内容’)

var span = $('<span>新创建的标签</span>')

3、添加元素

（1）内部添加

内部头部添加：prepend(元素)
内部尾部添加：append(元素)

$(div).prepend(span)
$(div).append(span)

（2）外部添加

外部头部添加：before(元素)
外部尾部添加：after(元素)

$(ul).before(span)
$(ul).after(span)

4、删除元素

删除匹配元素：$(‘ul’).remove()
删除匹配元素子节点：$(‘ul’).empty()
删除匹配元素子节点：$(‘ul’).html(’’)

$(ul).remove()
$(ul).empty()
$('ul').html('')

（七）jquery 尺寸、位置

1、jquery 尺寸

获取数字型尺寸：参数为空
修改相应尺寸：参数为数字

语法	用法
width() / height()	取得匹配元素宽度和高度值，只算 width / height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值，包含 padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值，包含 padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值，包含 padding、border、margin

2、jquery 位置

（1）offset()

定义：设置或获取元素相对于文档的偏移坐标，永远与父级无关

$('元素').offset().top;
$('元素').offset().left;
$('元素').offset({top:100, left:100});

（2）position()

定义：获取相对于带有定位的父级偏移坐标，如果父级无定位则以文档为准

（3）scrollTop()/scrollLeft()

定义：设置或获取元素被卷去的头部和左侧

$(window).scroll(function(){
  $('document').scrollTop();
  $('document').scrollTop(100);
  $('document').scrollLeft();
  $('document').scrollLeft(100);
})

三、jQuery 事件

（一）事件绑定与解绑

1、事件绑定

（1）单个事件注册

语法：element.event(function(){})
事件：mouseover / mouseout / blur / focus / change / keydown / keyup / resize / scroll
/ click / submit

（2）批量事件注册 on()

① 绑定事件

在匹配元素上绑定一个或多个事件
相同事件：element.on(‘events1 eventsN’,[selectors],fn)

events：一个或多个事件类型，空格分隔
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

不同事件：elment.on({event1:fn, eventN:fn })

$('div').on('mouseenter mouseleave', // 空格间隔对应相同事件的不同事件类型
  function(){
    alert('爱我中华') //相同事件
})

$('div').on({ 
  click:function(){
    $(this).css('color','red') //逗号间隔对应不同事件的不同事件类型
  },
  mouseenter:function(){
    $(this).css('color','blue')
  },
  mouseleave:function(){
    $(this).css('color','yellow')
  }
})

② 事件委托

将子元素的事件绑在父元素身上
语法：$(‘父元素’).on(‘event’, ‘子元素’, fn)

$('ul').on('click', 'li', function(){
  alert('事件委派成功了')
})

③ 动态绑定

给动态/未来创建的元素绑定事件
语法：$(‘元素’).on(‘event’, ‘动态元素’, fn)

$('ol').on('click', 'li', function(){
  alert('新创建的元素绑定事件成功啦')
})
var li = $('<li>后来标签</li>')
$('ol').append(li)

（3）事件触发一次 one()

语法：$(‘元素’).one(‘event’,fn)

（4）自动触发事件 trigger()

简写形式：$(‘元素’).event()
自动触发：$(‘元素’).trigger(‘event’)
自动触发：$(‘元素’).triggerHandler(‘event’) （无默认行为）

2、事件解绑 off()

（1）解绑所有事件

语法：$(‘元素’).off()

（2）解绑特定事件

语法：$(‘元素’).off(‘event’)

（3）解绑事件委托

语法：$(‘父元素’).off(‘event’, ‘子元素’)

（二）事件对象

事件被触发，就会产生事件对象
element.on(events,[selector],function(event){})

1、阻止默认行为

语法
- event.preventDefault()
- return false

2、阻止冒泡

语法：event.stopPropagation()

四、jQuery 拷贝对象

想要把某对象拷贝（合并）给另一个对象使用，可以用$.extend()方法
语法：$.extend([deep], target, obj1, [objN])

五、jQuery 多库共存

背景：随着 jQuery 流行，其使用的标示符 $ 会被其他 js 库采用，一起使用会引起冲突
多库共存：让 jQuery 和其他 js 库不存在冲突，可以共存的解决方案
解决方案
- 切换标志符：把 $ 符号统一改为 jQuery
- 自定义标志词：var xx = $.noConflict()

六、jQuery 插件

背景：jQuery 功能有限，需要借助插件来完成更复杂特效
插件网站
- jQuery 插件之家
- jQuery 之家

（一）瀑布流

（二）图片懒加载

页面滑动到可视区域再显示图片
使用图片延迟加载可提高网页下载速度，减轻服务器负载

（三）全屏加载

全屏滚动插件：fullPage.js