【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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	$('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')
	}
	})

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

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

【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 插件

（一）瀑布流

（二）图片懒加载

（三）全屏加载

微信扫一扫：分享