jQuery学习

jQuery学习

1.认识 jQuery

jQuery是一个专注于DOM操作的类库，通过一系列的封装，不仅简化了DOM操作，还处理了不同浏览器之间的兼容，极大的提高了编码的效率

2.准备工作

1.下载 jQuery的包

jquery.com

2.导入

3.选择器

jQuery中通过选择器获取DOM节点，功能类似于原生的queryselectroall方法，支持的选择器与css选择器几乎一致

语法

$('选择器')
//修改背景色
$('选择器').css('backgroundColor','yellowgreen')

4.jQuery对象

jQuery中利用选择器获取到的并非原生的DOM对象，而是jQuery对象

和DOM对象语法不能混用

5.事件绑定

事件名开头不需要写on
回调函数的this就是触发事件的dom元素

      // 1.为 li 添加点击事件
      $('li').click(function () {
        console.log('click')
        console.log(this)
        let $this = $(this)
        $this.css('backgroundColor', 'pink')
      })

      // 2.为 .text 添加获得焦点事件
      $('.text').focus(function () {
        console.log('focus')
      })

      // 3.为 .text 添加失去焦点事件
      $('.text').blur(function () {
        console.log('blur')
      })

      // 4.为 .box 添加鼠标移入事件
      $('.box').mouseenter(function () {
        console.log('mouseenter')
        $(this).css('backgroundColor', 'pink')
      })

      // 5.为 .box 添加鼠标移出事件
      $('.box').mouseleave(function () {
        console.log('mouseleave')
        $(this).css('backgroundColor', 'yellowgreen')
      })

6.链式编程

通过.把多个操作方法连续的写下去

$('.text').focus(回调函数).blur(回调函数)

7.内容操纵

//设置
$('选择器').html('内容')
$('选择器').text('内容')

//读取
$('选择器').html()
$('选择器').text()

设置时，html方法解析标签，text不解析
取值时，html方法获取标签，text只获取文本

8.过滤方法

.first()//匹配的第一个元素
.last()//匹配的最后一个元素
.eq(索引)//根据索引匹配元素

9.样式操纵

jQuery中对样式的操作进行封装，可以设置或者获取样式

//1.键值对设置
.css('样式名','值')
.css('backgroundColor','pink')
.css('color','red')
.css('width','200px')
.css('height',200)

数值类的样式省略单位，默认会使用px

//2.对象方式设置
.css(对象)
.css({
	backgroundColor:'pink',
	color:'red'
})

10.属性操纵

对属性的操作进行封装，可以设置、获取和删除属性

//1.赋值
.attr('属性名','值')
//2.取值
.attr('属性名')
//3.删除属性
.removeAttr('属性名')

11.操纵value

jquery中封装了操纵表单元素value属性的方法，可以取值和赋值

//1.赋值
.val('参数')
//2.取值
.val()

12.查找方法

jQuery中封装了查找元素的方法，可以基于元素的结构关系查找新的元素

//1.父元素
.parent()
//2.子元素
.children('选择器')
//3.兄弟元素
.siblings('选择器')
//4.后代元素
.find('选择器')

find需要传入选择器
children和siblings支持传入选择器

13.操纵类名

//1.添加类名
.addClass('类名')
//2.移除类名
.removeClass('类名')
//3.判断类名 返回布尔值
.hasClass('类名')
//4.切换类名
.toggleClass('类名')

14.实践进阶

//1.注册事件
.on('事件名',function(){})
//2.移除指定事件
.off('事件名')
//3.移除所有事件
.off()
//4.注册一次性事件
.one('事件名',function(){})

15.触发事件

//1.直接触发
.事件名()
//2.trigger触发
.trigger('事件名')
//3.触发自定义事件
.trigger('自定义事件')

16.window事件绑定

//1.滚动
$(window).scroll(function(){})
//2.点击
$(window).click(function(){})

17.获取位置

//取值
$('选择器').offset()
//取值
$('选择器').position()
//返回值
{top:126,left:58}

参照物：
offset参照html标签
position参照离他最近有定位的祖先元素
margin：
offset会把外边距margin计算进去
position以外边距margin为边界，不计算margin

18.滚动距离

//取值
$('选择器').scrollLeft()
$('选择器').scrollTop()
//赋值
$('选择器').scrollLeft(值)
$('选择器').scrollTop(值)

19.显示和隐藏动画

//显示
$('选择器').show(持续时间)
//隐藏
$('选择器').hide(持续时间)
//显示和隐藏
$('选择器').toggle(持续时间)

时间单位是ms

20.淡入&淡出动画

//淡入
$('选择器').fadeIn(持续时间)
//淡出
$('选择器').fadeOut(持续时间)
//淡入&淡出
$('选择器').fadeToggle(持续时间)

21.展开&收起动画

通过jQuery以展示(高度增大-显示)&(高度减小-隐藏)的方式切换元素的显示隐藏

//展开
$('选择器').slideDown(持续时间)
//收起
$('选择器').slideUp(持续时间)
//展开和收起
$('选择器').slideToggle(持续时间)

22.动画队列及停止方法

通过jQuery为元素设置的多个动画会依次添加到动画队列中，并根据添加的顺序依次播放

语法：

//停止当前动画
$('选择器').stop()
//清空队列 在动画当前状态停止
$('选择器').stop(true)
//清空队列 直接到当前动画的结束状态
$('选择器').stop(true,true)

23.自定义动画

$('选择器').animate({
	width:100,
	margin:100
})

数值类样式支持动画，支持多个
默认单位是px
支持非样式的特殊属性
持续单位是ms

24.插入节点

jQuery中封装了在指定位置动态插入元素节点的方法，可以插入节点或者改变节点位置

//4个方法参数一样，位置不同
$('父元素选择器').append(参数)//父元素结尾
$('父元素选择器').prepend(参数)//父元素开头
$('兄弟元素选择器').before(参数)//兄弟元素前面
$('兄弟元素选择器').after(参数)//兄弟元素后面

插入节点：传入创建的dom元素或者html结构
改变位置：传入现有的dom元素或者jQuery对象

25.动画的回调函数

所有的jQuery动画方法都支持传入回调函数

$('选择器').基础动画方法(回调函数)
$('选择器').基础动画方法(持续时间,回调函数)
$('选择器').animate(属性,回调函数)
$('选择器').animate(属性,持续时间,回调函数)

回调函数会在动画执行完毕时立刻执行
回调函数中的this是执行动画的dom元素

26.动画的延迟方法

jQuery不仅可以设置动画的执行速度，还能在动画执行前设置一定的延时

$('选择器').delay(延迟时间).动画方法()

时间单位是毫秒

27.获取尺寸

$('选择器').innerWidth()//内容宽度+内边距
$('选择器').innerHeight()//内容高度+内边距
$('选择器').outerWidth()//内容宽度+内边距+边框
$('选择器').outerHeight()//内容高度+内边距+边框
$('选择器').outerWidth(true)//内容宽度+内边距+边框+外边距
$('选择器').outerHeight(true)//内容高度+内边距+边框+外边距

28.事件参数

jQuery绑定的事件中可以获取事件参数(事件对象)，用法和原生js完全一致

$('选择器').事件(function(event)){
	event.stopPropagation()
}

29.删除节点

jQuery中封装了动态删除元素节点的方法

jQuery对象.remove()

remove方法删除的是调用方法的元素节点

30.事件委托

//直接绑定
$('选择器').on('事件名',function(){})
//事件委托
$('祖先选择器').on('事件名','后代选择器',function(){})

减少时间注册
解决动态增加后代元素的事件绑定问题
原理是事件冒泡
回调函数中的this是触发事件的dom对象

31.入口函数

//原生写法
window.onload=function(){}
//jQuery写法
$(window).on('load',function()){}

页面资源加载完毕逻辑代码

//完整写法
$(document).ready(function(){})
//简化写法
$(function(){})

DOM载入完毕就会执行

32.轮播图插件

jQuery的轮播图插件slick

1.下包
2.导包：先导入jQuery，再导入插件，导入css
3.用包

33.懒加载插件

懒加载：图片用到了再去加载，常见于有大量图片的网页

插件：lazyload

34.全屏滚动

插件：fullpage

35.提交事件

$('form').submit(function(event)){
	//阻止默认行为
	event.preventDefault()
	//阻止默认行为
	return false
}

36.日期选择器

插件：datepicker

37.表单验证

插件：validate

38.克隆

//不带事件
.clone()
//带事件
.clone(true)

方法返回的还是jQuery对象
传入true事件也会一起克隆

39.获取dom对象

//get方法获取
.get(索引)
//中括号索引
[索引]

索引从0开始
获取的是dom对象

40.表单序列化

jQuery中封装了快速获取表单数据的方法，叫做序列化

$('form').serialize()

表单元素要有name属性才可以获取value值
获取到的数据格式是name1=value1&name2=value2的字符串