jQuery 基础

jQuery 基础

---

• jQuery 入门
  • JavaScript 库
  • jQuery 基本使用
    • jQuery 的入口函数
    • jQuery 语法
  • jQuery 常用 API
    • CSS 相关
    • jQuery 效果
    • jQuery 控制元素属性
    • jQuery 控制元素内容
    • jQuery 控制元素操作
      • 创建元素
      • 删除元素
    • 尺寸及位置操作
      • 尺寸
      • 位置
  • jQuery 事件
    • 注册
    • 处理
    • jQuery 事件对象
  • jQuery 其它方法
    • 对象拷贝
    • 多库共存
    • jQuery 插件

---

---

JavaScript 库

jQuery 本质是 JavaScript 库(library)

JavaScript 库: 一个封装特定方法或函数的集合

常见的 JavaScript 库:

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• 移动端的 zepto

---

---

jQuery 基本使用

jQuery 库包含以下功能：

• HTML 元素选取及操作
• HTML 事件函数
• CSS 操作
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

jQuery 版本

• 1x: 兼容 IE 678 等低版本浏览器，不再维护
• 2x: 不兼容 IE 678 等低版本浏览器，不再维护
• 3x: 不兼容 IE 678 等低版本浏览器，目前维护

jQuery 的入口函数

文档就绪事件是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

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

// 等价
$(document).ready(function(){
    ...
});

相当于原始 JS 中的 DOMContentLoaded

不同于原生的 JS 中 load 事件

$ 是 jQuery 的顶级对象，它代指 jQuery

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

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：

$(selector).action()

• 美元符号定义 jQuery
• 选择器 selector: "查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

选择器基于已经存在的 CSS 选择器，适用于大多数 CSS 选择器书写只需要以字符串形式

常用: 全选择器, ID 选择器, 类选择器, 标签选择器, 并集选择器, 交集选择器, 子选择器, 后代选择器 ...

比如：

$('.name');
$('#user');
$('div');
$('div span');
$("ul li:first-child");

注意：jQuery 对象只能使用 jQuery 方法，DOM 对象使用原生的 JavaScript 属性或方法

jQuery 对象 与 DOM 对象 转换

$(DOM对象);

jQuery对象[index];

// 或
jQuery对象.get(index);

---

---

jQuery 常用 API

CSS 相关

jQuery 设置样式

$(selector).css('属性', '值');

$(selector).css('属性'); // 不给值，就是单纯返回对应值

多属性赋值，可以以对象形式传入

$(selector).css({
    width: 400,
    height: 400
});

设置类样式方法:

• addClass("className"): 添加
• removeClass("className"): 移除
• toggleClass("className"): 切换

className 类名，不需要 .

不影响原本的类名，与原生 JS 不同

筛选选择器:

• :first: 获取第一个元素
• :last: 获取最后一个元素
• :eq(index): 指定索引号 index 的元素
• :odd: 索引号为奇数的元素
• :even: 索引号为偶数的元素

筛选方法:

• parent(): 查找父元素
• children(selector): 查找子元素
• find(selector): 查找后代元素
• siblings(selector): 查找同级元素，不包括自身
• nextAll([expr]): 查找当前元素之后的同级元素
• prevtAll([expr]): 查找当前元素之前的同级元素
• hasClass(class): 检查当前元素是否含有某种特定的类名，有返回 true
• eq(index): 使用 index 检索

隐式迭代: 自动遍历内部【伪数组形式存储】 DOM 元素的过程

链式编程

$("button").css("color", "red").siblings().css("color", "blue");

jQuery 效果

显示隐藏

• show()

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

  • 参数都可以省略
  • speed: 动画时长(ms), 预设速度 ("slow", "normal", "fast")
  • easing: 指定切换效果，默认 "swing", 可用参数 "linear" 匀速
  • fn: 回调函数

• hide()

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

• toggle()

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

滑动

• slideDown()

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

• slideUp()

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

• slideToggle()

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

事件切换

• hover()

  hover([over,] out)
  

  • over: 鼠标移到元素上触发
  • out: 鼠标离开元素上触发

动画排队

• stop(): 停止上一次动画

淡入淡出

• fadeIn(): 淡入

  fadeIn([speed,[easing], [fn]])
  

• fadeOut(): 淡出

  fadeOut([speed,[easing], [fn]])
  

• fadeToggle(): 切换

  fadeToggle([speed,[easing], [fn]])
  

• fadeTo(): 透明度修改

  fadeTo([speed, opacity, [easing], [fn]])
  

  • opacity: 透明度 (0 ~ 1)

自定义动画

• animate()

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

  • params: 想要修改的样式属性，以对象形式传入

    注意：属性名不可以带引号，如果是复合属性使用小驼峰命名法

jQuery 控制元素属性

类似 css 样式获取

自带元素属性

• prop("属性"): 获取
• prop("属性", "属性值"): 设置

自定义元素属性

• attr("属性"): 获取
• attr("属性", "属性值"): 设置

数据缓存 data(): 可以在指定元素上存取数据，并不会修改 DOM 元素架构

页面刷新，数据将被移除

• data("name"): 获取
• data("name", "value"): 存储

同时可以获取 HTML5 自定义属性 data-index 得到的是数字型

jQuery 控制元素内容

• 普通元素内容 html(): 等价原生 inner HTML
• 普通元素文本内容 text(): 等价原生 inner Text
• 表单的值 val(): 等价原生 value

jQuery 控制元素操作

遍历元素 each(fn(index, domEle)(){...})

• each() 方法遍历匹配每一个元素
• 回调函数 fn 中两个参数 index 索引号，domEle 是每个 DOM 元素对象
• 使用 jQuery 方法，需要给这个 dom 元素转化为 jQuery 对象

遍历元素另一种方法使用 $.each(对象, fn) 方法，可以遍历任何对象

创建元素

$("HTML 标记语句");

let li = $("<li> xxx </li>");   // 创建元素

• 内部添加: 父子

  • append(elem): 添加元素 elem 内部最后面
  • prepend(elem): 添加元素 elem 内部最前面

• 外部添加: 兄弟

  • before(): 前
  • after(): 后

/**
 * <ul>
 *     \\ <li> xxx </li> 添加
 * </ul>
*/

let li = $("<li> xxx </li>");   // 创建元素
$("ul").append(li);

删除元素

• element.remove(): 删除元素本身
• element.empty(): 删除匹配元素所有子元素
• element.html(""): 清空匹配元素

尺寸及位置操作

尺寸

• width()/height()
• innerWidth()/innerHeight(): 包含 padding
• outerWidth()/outerHeight(): 包含 padding, border
• outerWidth(true)/outerHeight(true): 包含 padding, border, margin

注意：

• 参数为空，只是读其对应值
• 参数为数字，即对应数字修改
• 参数不用单位

位置

• offset(): 相对于文档的偏移数值
• pasition(): 带有定位的父级偏移数值
• scrollTop()/scrollLeft(): 对于滚动条，卷去的数值

设置：传入对象即可

---

---

jQuery 事件

注册

语法：

element.事件(function(){})

处理

on() 方法在匹配元素上绑定一个或多个事件处理函数

element.on(events, [selector], fn)

• events: 1~n 个用空格分隔的事件类型
• selector: 元素的子元素选择器
• fn: 回调函数

$(selector).on({
    mouseover: function(){},
    click: function(){}
});

// 如果事件处理程序相同
$(selector).on("mouseover click", function(){
    ... // 事件处理程序
});

on() 方法可以实现事件委派

事件委派：把原来给子元素的事件绑定到父元素上

$("ul").on("click", "li", function(){
    ... // 事件处理程序
});

// "li" 起到触发作用，"click" 是绑定在 "ul" 上

on() 方法 可以为动态创建的元素绑定事件

off() 方法可以解绑事件，移除on() 方法绑定的事件处理程序

$(selector).off();                  // 解绑所有事件
$(selector).off("click");           // 解绑指定事件
$(selector).off("click", "li");     // 解绑事件委托

如果只执行一次，使用 one() 绑定事件

自动触发事件 trigger()

element.click(); // 简写

element.trigger("type");    // 会触发元素默认行为

element.triggerHandler(type);   // 不会触发元素默认行为

jQuery 事件对象

事件被触发，就会有事件对象产生

element.on(events, [selector], function(event){})

event 事件对象

• preventDefault(): 阻止默认行为
• stopPropagation(): 阻止冒泡

---

---

jQuery 其它方法

对象拷贝

使用 $.extend() 方法

$.extend([deep], target, object, [objectN])
    // object --> target

• deep: 拷贝模式，true 为深拷贝，默认 false 浅拷贝
• target: 目标对象
• object: 待拷贝对象
• objectN: 其它拷贝对象

注意：

• 拷贝会覆盖原有内容

多库共存

使用不同库，$ 可能存在冲突

解决方案

• 方案一: $ --> jQuery

• 方案二: jQuery 变量规定新的名称: $.noConfict()

  var xx = $.noConfict();
  

jQuery 插件

插件网址：

• http://www.jq22.com/
• http://www.htmleaf.com/

图片懒加载：只显示可视部分的图片，减少服务器的压力，推荐插件实现

全屏滚动: fullpage.js

---

---

---