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 的方法和属性
- 转换
$("p").length; // 获取原生js对象的个数
$("p").size();
var $p = $("p");
// 利用数组下标
$p[0].innerHTML = "你好";
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() 判断类名是否存在 返回布尔值
常用事件方法
$(".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()
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 节点操作
创建和追加元素
- $('<li></li>') 创建元素
- 向父元素最后追加
- $(父).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 方法移除事件
- 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() 阻止事件行为
多库共存
- 解决$冲突问题
- 不用$，使用 jQuery
- 释放$符合的使用权 jQuery.onConflict() 可以用变量接收，以后就用变量调用 jQuery
jQuery 插件库
- 获取插件，在搜索引擎上搜索插件
- 插件使用方法
- 找到并且下载插件
- 在项目外写一个demo(先学会使用，让后再加入的项目中)
- 看源码，看文档
- 注意：
- 结构必须一致，标签名不一定
- 样式，可以选择复制，也可以自定义
- 先引入jquery再引入插件库
- 复制源码，看文档
