学习内容

• jQuery 简介
  • jQuery 入门
  • jQuery 入口函数
  • jQuery 对象
• jQuery 选择器
• jQuery 样式操作
• jQuery 动画效果
• jQuery 属性操作

一、jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库(js文件)，是一个封装好的特定的集合（方法和函数），学习 jQuery 本质就是学习调用这些函数和方法。

入门

• jQuery 官方地址：https://jquery.com/
• jQuery 优点：
  • 轻量级，文件小，对页面加载速度几乎没有影响
  • 有链式编程、隐式迭代的特点
  • 跨浏览器兼容，基本兼容了现在主流的浏览器
  • 样式、动画支持、大大简化了 DOM 操作
  • 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等

入口函数

• 第一种

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

• 第二种

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

注意：
等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码

jQuery 对象和 DOM 对象

js 的对象只能用 js 的属性和方法
jq 的对象只能用 jq 的属性和方法

• DOM 对象可以与 jQuery 对象相互转换
  • DOM 对象转换为 jQuery 对象：$(DOM对象)
  • jQuery 对象转换为 DOM 对象
    • $('div')[index] index 为索引
    • $('div').get(index) index 为索引

二、jQuery 选择器

$('选择器') 里面直接写 css 选择器即可

• CSS 选择器

• 筛选选择器

注意：索引是从 0 开始的，所以奇偶选择器可能会与实际效果相反

• jQuery 筛选方法
  对象.方法()

• jQuery 利用 siblings 兄弟筛选的排他思想

$(this).css('color','red'); // 自己设置样式
$(this).siblings().css('color',''); // 他的兄弟设置其他的样式

三、jQuery 样式操作

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式

• 操作 css 方法

  • 语法：$(this).css(arguments);
  • 参数只写属性名，则是返回属性值：$(this).css('color');
  • 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号： $(this).css('color','red');
  • 参数可以是对象形式，方便设置多组样式。属性名和属性值都用冒号隔开，属性可以不用加引号：$(this).css({'color':'white','font-size':'20px'});

• 设置类样式方法

  操作类似于 document 的 classList

  • 添加类：$('div').addClass('current');
  • 移除类：$('div').removeClass('current');
  • 切换类 $('div').toggleClass('current');

四、jQuery 的动画效果

• 显示隐藏效果

  show([speed,[easing],[fn]])
  hide([speed,[easing],[fn]])
  toggle([speed,[easing],[fn]])

• 滑动效果

  slideDown([speed,[easing],[fn]])
  slideUp([speed,[easing],[fn]])
  slideToggle([speed,[easing],[fn]])

• 淡入淡出

  fadeIn([speed,[easing],[fn]])【淡入】
  fadeOut([speed,[easing],[fn]])【淡出】
  fadeToggle([speed,[easing],[fn]])【切换】
  fadeTo([[speed],opacity,[easing],[fn]])【到大某个位置】

  • 参数都可以省略，无动画则直接显示
  • speed：三种预定速度之一的字符串（‘slow'，‘normal’,`fast’）或 表示动画时长的毫秒数值
  • easing：用来指定切换的效果，默认是 ‘swing’，可用参数 ‘linear’
  • fn：回调函数，在动画完成时执行的函数，每个元素执行一次

• 事件切换：hover([over,]out)

  • over：鼠标移到元素行要触发的函数（相当于mouseover/mouseenter）
  • out：鼠标移出元素要触发的函数（相当于 mouseout/mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

• 动画队列及停止排队的方法

  动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

  • 停止排队：$('div').stop()，用于停止动画或效果
  • 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画

• 自定义动画：

  • 语法：animate(params,[speed],[easing],[fn])
  • 参数：
    • params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略
    • speed：三种预定时间速度之一的字符串，（‘slow’，‘normal’，‘fast’）或表示动画时长的毫秒数值
    • easing：用于指定切换效果，默认是‘swing’，可用参数‘linear’
    • fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

  需要注意的是 animate 是不能改变颜色的，所以不能把颜色变化做动画效果，不过可以使用自定义插件来完成。另外，animate 自定义属性一定要是 元素 才可以设置，像 document 这是文档对象，并非元素，也就是 <> 的元素才可使用 animate 自定义动画。

五、jQuery 属性操作

• 设置或获取元素固有属性值 prop()

  • 语法：$().prop(‘属性’)
  • 设置属性值：$().prop(属性,值)
  • 注意：jQuery1.6 之后，对于 checked，selected，disabled 这类 boolean 类型的属性来说，不能用 attr 方法，只能使用 prop 方法。

• 设置或获取元素自定义属性 attr()

  • 语法：$().attr('属性') 类似于原生 getAttribute()
  • 设置属性值：$().attr(属性,值)

• 数据缓存 data()

  data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构，所以元素上无法查看，一旦页面刷新，之前存放的数据都将被移除

  • 语法：$().data('name','value') 添加数据，$().data('name') 获取数据值

• 表单属性 val()

  • 语法：$().val()获取值 相当于原生方法 value()，$().val('值') 设置值

• 设置元素内容：

  • html()方法，相当于原生 innerHTML() $().html() 获取内容，$().html(context) 设置内容，可解析标签
  • text()方法，相当于原生 innerText() $().text() 获取内容，$().text(context) 设置内容，不解析标签。