jquery小朋友来了，嘻嘻

jQuery 快读网页交互开发

jQuery 简介

• jquery 是一个高效，精简并且功能丰富的 javascript 工具库
• query 本身是选择的意思，主要对 javascript 中选择元素的方法进行了大量优化
• 版本发展
  • 1.x 兼容 ie678 工作中常用
  • 2.x 不兼容 ie678 官方调 bug 工作中不建议使用
  • 3.x 不兼容 ie678 高级浏览器使用
• jquery 确实极大的简化了 DOM 操作，让编程变得更加高效简单

jQuery 基础

$()

• 在 jquery 中，只有一个全局变量$,避免了全局变量的污染
• 开始变量不叫$,叫做 jQuery()方法，在库中两个名字并存，都可以使用
• 经典错误： $未定义 -- 一般是 jquery 文件有问题

jQuery 对象

• 通过$()方法获取到的内容就是 jQuery 对象
• 内部封装了大量的属性和方法. .css(),.html(),.animate()都是 jQuery 对象的方法
• 通过$()获取的元素是一组元素时，进行操作时批量操作
• 与原生 js 对象的区别和联系：
  • jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 的方法
  • 原生 js 也不能使用 jQuery 对象的方法
  • jQuery 对象实际是一个类数组对象，内部包含所有获取的原生 js 对象，及大量的 jQuery 的方法和属性
• 转换
  • jquery 获取原生 js 对象的长度

  $("p").length; // 获取原生js对象的个数
  $("p").size();
  

  • jQuery 转原生

  var $p = $("p");
  // 利用数组下标
  $p[0].innerHTML = "你好";
  

  • 原生转 jQuery

  var p = document.getElementsByTagName("p");
  // 直接用$()包裹原生对象
  $(p).css("background-color", "red");
  

jQuery 选择器

• css2.1 和 css3 的所有选择器，不用考虑兼容 如：$('button:disabled').css();
• 筛选选择器
  • $(':first') 第一个
  • $(':last') 最后一个
  • $(':eq(index)') 下标为 index 的那个
  • $(':gt(index)') 大于 下标为 index 的项
  • $(':lt(index)') 小于下标为 index 的项
  • $(':odd') 下标为奇数的项
  • $(':even') 下标为偶数的项
  • $(':not(seletor)') 去除所有与给定选择器匹配的元素

jQuery 常用方法

html() 方法

• 相当于原生 js 的 innerHTML 属性 会解析标签
• 用来设置获取元素及内容

text() 方法

• 相当于 innerText 属性 只针对文字内容
• 遇到标签忽视
  • 获取的仅仅的文本
• 会将设置的内容，标签会被当做普通文本

val()方法

• 获取表单元素 value 的值的方法 value 属性
• 获取和设置 有参数就是设置 没有参数就是获取
• $('input').val()

操作标签属性

• attr(参数 1,参数 2) 设置 参数 1：属性名 参数 2： 属性值
• attr(参数) 获取 参数: 属性名
• removeAttr(参数) 删除 参数：属性名
• prop() 直接操作的就是布尔值 disabled checked

css()方法

• 调用 css 的属性值或者更改 css 属性值
• css(name,value): name: 字符串格式 css 属性名 value:设置或更改的属性值
• 一个参数，调用 css 属性的值 得到某个元素的计算后的样式，值为字符串格式
• value 设置的是可以不带单位或者数值，+= -= 都能识别
• 复合属性可以是-可以是驼峰写法都可以

操作类名的方法

• jQuery 操作类名 只会操作指定类名 不会影响其他
• addClass() 添加类名
• removeClass() 移除类名 如果不传递参数移除全部类名
• toggleClass() 类名切换 如果存在移除类名，如果没有添加类名
• hasClass() 判断类名是否存在 返回布尔值

常用事件方法

• 点击事件 click(fn)

$(".btn").click(function () {
  $(".box").toggleClass("demo");
});

• mouseenter(fn)方法 鼠标进入一个元素触发的事件
• mouseleave(fn)方法 鼠标离开一个元素触发的事件
• mouseover(fn) 有事件冒泡
• mouseout(fn) 有事件冒泡
• hover(fn,fn)方法 相当于合写 mouseenter mouseleave

$(".box").hover(
  function () {
    // 鼠标移入
    $(this).addClass("demo");
  },
  function () {
    // 鼠标离开
    $(this).removeClass("demo");
  }
);

jQuery 关系查找方法

• $(this).parent() 找到当前元素的父级
• $(this).children() 找到当前元素的所有子级 可以传递参数，进行二次筛选
• $(this).siblings() 找到当前元素的所有亲兄弟元素 可以传递参数，进行二次筛选

链式调用

• 可以简化书写
• 除了节点方法之外，其他方法执行后返回值都是自己

$(this).siblings().css("background-color", "red").html("嘻嘻");
// 自己变红
$(this)
  .css("background-color", "red")
  // 自己的兄弟变蓝色
  .siblings()
  .css("background-color", "blue")
  // 父级变黄
  .parent()
  .css("background-color", "yellow")
  // 父级的兄弟变粉色
  .siblings()
  .css("background-color", "pink")
  // 父级的孩子变黄绿色
  .children()
  .css("background-color", "yellowgreen");

find() 查找后代元素

// 找到 .box元素的所有span元素 改变宽高
$(".box").find("span").css({
  width: 50,
  height: 50,
});

查找兄弟

• 查找紧邻兄弟元素
  • next() 下一个兄弟
  • prev() 前一个兄弟
• 多选方法
  • nextAll() 后面的所有兄弟
  • prevAll() 前面的所有兄弟
• 可以传递参数，进行二次筛选

案例

• 点击发送验证码
• 放大镜切换

jQuery 排序和动画

eq()方法

• jQuery 对象是一个类数组对象，内部所有的 数据会进行一个大的排序
• 排序与自己原来的父级没有关系，只与 在 jQuery 对象中的新的位置有关

index()方法

• 得到的是它自己在 html 结构中兄弟中下标的位置。与 jQuery 大排序没有关系

排他思想，简易 tab 栏

• jQuery 中可以让 this 特殊设置，让兄弟 siblings 设置成默认

each()遍历

• 对 jQuery 对象中的元素每一个都执行函数内部的操作
• each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项。然后对每一项进行操作
• 函数内部指向每一个项
• 参数是 i,整个对象在 jQuery 大排序对象中下标位置

入口函数

• $(document).ready(function(){})
• 原生 js 中 window.onload 一个页面只能出现一次
• jQuery 中入口函数可以出现多次

显示和隐藏的方法

• hide() show() 操作的是 display:none/block
• toggle() 在显示和隐藏之间切换
• 参数： slow,fast,normal 数字(单位毫秒)
• 过渡时间内伴随着宽高透明度的变化

滑动显示和隐藏

• slideDown() 滑动显示
• slideUp() 滑动隐藏
• slideToggle() 滑动切换
• 让元素在 display:none/block 之间切换
• 参数：不传 400ms
• slow,fast,normal 数字(单位毫秒)
• 注意事项：
  • 若元素没有宽高就没有滑动效果
  • 如果设置宽高，会进行上下垂直方向滑动
  • 动画效果：高度属性在 0-设置值之间变化，没有透明度动画
  • 如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化

淡入淡出

• fadeIn() 淡入显示
• fadeOut() 淡出显示
• fadeToggle() 切换
• fadeTo() 淡入淡出某个效果 必须设置两个参数 时间 和 透明度
• slow,fast,normal 数字(单位毫秒)

animate()自定义动画方法

• 执行 css 属性集的自定义动画
• $().animate(styles,speed,easing,callback);
• styles: css 的属性名和运动结束位置的属性值集合
• 所有有数值的属性都可以发生变化
• speed: 动画整体运行的时间 slow,fast,normal 数字(单位毫秒) 默认 400ms
• easing: 动画速度 swing(变速) linear(线性 匀速) 默认值 swing
• callback: animate 函数执行完毕后要执行的函数

动画排队现象

• 同一个元素对象上，定义了多个动画，会出现动画排队现象
• 如果是不同的元素对象都有动画，不会出现排队机制
• 如果是其他非运动的代码，也不会等待运动完成
• stop() 停止上一次的动画 开启这一次的动画

动画延迟 delay()

• delay()

stop()

• 立即结束当前动画

清空动画排队

• 清除排队的动画，进行防骚扰操作
• 方法 1： stop(true)
• 方法 2： 利用函数节流方法 is(':animated') 返回布尔值 true 正在运动，flae 没有运动 -- 有 bug

$box.mouseenter(function () {
  if ($(this).children().is(":animated")) {
    return;
  }
  $(this).children().stop(true).slideUp();
});

jQuery 节点操作

创建和追加元素

• $('
') 创建元素
• 向父元素最后追加
  • $(父).append(新)
  • $(新)appendTo(父)
• 向父元素的最前面追加
  • $(父).prepend(新)
  • $(新).prependTo(父)
• 向元素后面追加新的兄弟
  • $(旧).after(新)
  • $(新).insertAfter(旧)
• 向元素前面追加新的兄弟
  • $(旧).before(新)
  • $(新).insertBefore(旧)

删除，清空元素

• remove() 删除元素
• empty() 清空元素 清空内部元素和事件
• html('') 仅清空内部元素，不清理事件

克隆元素

• clone() 克隆元素
• 参数为布尔值 false：只克隆内部，不克隆事件，默认值； true：内容事件都克隆，深克隆

操作元素尺寸的方法

• width() height() width
  • 操作的大小仅仅是内容部分
  • width(数字) 设置
  • width() 获取 值是数字类型
• innerWidth() innerHeight() width + padding
  • 操作的大小是内容部分 + padding
  • 获取 padding 及以内的大小
  • innerWidth(数字) 设置 增加或者减少的值设置给了 width， padding 部分不变
  • innerHeight() 获取
• outerWidth() outerHeight() width + padding + border
  • 操作的是内容部分 + padding + border
  • 获取的是 border 及以内的大小
  • outerWidth(数字) 设置 增加或者减少的值设置给了 width， padding,border 部分不变
  • outerWidth() 获取

操作元素的位置

• offset()
  • 获取元素距离文档的位置
  • 返回值是一个对象，包含了元素的位置
  • 参考位置是整个文档，和定位没关系
• position()
  • 距离上级定位参考元素的位置
  • 返回一个对象， 对象中包含了元素的位置信息
  • 参考位置最近定位的元素(和定位有关系)
• scrollTop()
  • 操作卷去的页面间距
  • srcollTop() 返回值是数字
  • srcollTop(数字) 设置

jQuery 事件和插件

注册事件 移除事件

• jQuery.事件名(事件处理函数) -- 简易注册事件
• on 方法注册事件
  • 封装底层其实是 addEventListener
  • jQuery.on(事件名,事件处理函数)
  • 事件委托：jQuery.on(事件名,选择器,事件处理函数)
  • 选择器：子孙元素
• off 方法移除事件
  • jQuery.off(事件名,事件处理函数名)
• trigger 方法触发事件
  • jQuery.trigger(事件名)

事件对象

• 鼠标事件对象
  • e.clientX/Y 参照浏览器
  • e.pageX/Y 参照文档
  • e.offsetX/Y 参照元素
• 键盘事件
  • e.keyCode 返回建码数字
  • e.altKey/shiftKey/ctrlKey 返回布尔值 检测是否按下(true)
• 公共属性
  • e.target 最初触发事件的 DOM 元素
  • e.currentTarget 在事件冒泡阶段中的当前 DOM 元素
• 方法
  • e.preventDefault() 阻止默认行为
  • e.stopPropagation() 阻止事件行为

多库共存

• 解决$冲突问题
  1. 不用$，使用 jQuery
  2. 释放$符合的使用权 jQuery.onConflict() 可以用变量接收，以后就用变量调用 jQuery

jQuery 插件库

• 获取插件，在搜索引擎上搜索插件
• 插件使用方法
  • 找到并且下载插件
  • 在项目外写一个demo(先学会使用，让后再加入的项目中)
  • 看源码，看文档
• 注意：
  • 结构必须一致，标签名不一定
  • 样式，可以选择复制，也可以自定义
  • 先引入jquery再引入插件库
  • 复制源码，看文档