编程基础12：jQuery编程

编程基础12：jQuery编程知识梳理，包括jQuery 介绍、jQuery 的基本使用、jQuery 选择器、jQuery 样式操作等等。

编程基础12：jQuery编程

• 1： jQuery 介绍
  • JavaScript 库
    • 即 library，是一个封装好的特定的集合（方法和函数）
    • 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等
  • jQuery的概念
    • jQuery 是一个快速、简洁的 JavaScript 库
    • 把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
    • jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
    • 学习jQuery本质： 就是学习调用这些函数（方法）。
  • jQuery的优点
    • 1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
    • 2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
    • 3. 链式编程、隐式迭代。
    • 4. 对事件、样式、动画支持，大大简化了DOM操作。
    • 5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
    • 6. 免费、开源。
• 2：jQuery 的基本使用
  • jQuery 的下载
    • jQuery的官网地址： https://jquery.com/，
    • 版本差别
      • 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
      • 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
      • 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
  • jQuery中的顶级对象$
    • $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
    • $是jQuery的顶级对象，相当于原生JavaScript中的 window
    • 把元素利用$包装成jQuery对象，就可以调用jQuery 的方法
  • jQuery 对象和 DOM 对象
    • jQuery 方法和原生JS获取的元素是不一样的
      • 1. 用原生 JS 获取来的对象就是 DOM 对象
      • 2. jQuery 方法获取的元素就是 jQuery 对象。
      • 3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
    • 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
    • jQuery 对象和 DOM 对象转换
      • 把DOM对象转换为 jQuery 对象：$(Dom对象)
      • jQuery 对象转换为 DOM 对象： $('div')[0]
      • jQuery 对象转换为 DOM 对象：$('div').get(0)
  • 知识铺垫
    • jQuery 设置样式
      • $('div').css('属性', '值')
    • jQuery 里面的排他思想
      • 当前元素设置样式，其余的兄弟元素清除样式。
      • $(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);
    • 隐式迭代
      • 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
      • 页面中所有的div全部隐藏，不用循环操作：$('div').hide();
    • 链式编程
      • $(this).css('color', 'red').sibling().css('color', '');
• 3：jQuery 选择器
  • 基础选择器
    • $（"#id） 获取指定D的元素
    • $（"*") 匹配所有元素
    • $（".class"）获取同一类class的元素
    • $（"div"） 获取同一类标签的所有元素
    • $（"div，p， i"）选取多个元素
    • $（"li.current"） 交集元素
  • 层级选择器
    • $（"ul>1i"）；使用>号，获取亲儿子层级的元素；注意，井不会获取孙子层级的元素
    • $（"u1 1i”）；使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
  • 筛选选择器
    • $("li:first") 获取第一个li元素
    • $("li:last") 获取最后一个li元素
    • $("li:eq(2)") 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
    • $("li:odd") 获取到的li元素中，选择索引号为奇数的元素
    • $("li:even") 获取到的li素中，选择索引号为偶数的元素
  • 筛选方法
• 4：jQuery 样式操作
  • 操作 css 方法
    • 参数只写属性名，则是返回属性值 ：$(this).css('color');
    • 参数是属性名，属性值，逗号分隔，是设置一组样式： $(this).css("color", "red");
    • 参数可以是对象形式，方便设置多组样式 ：$(this).css({ "color":"white","font-size":"20px"});
  • 设置类样式方法
    • 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点
    • 添加类 ： $("div").addClass("current");
    • 删除类 ：$("div").removeClass("current");
    • 切换类 ：$("div").toggleClass("current");
• 5：jQuery 效果
  • 显示隐藏
    • 显示：show([speed, [easing],[fn]])
    • 隐藏：hide([speed, [easing],[fn]])
    • 切换显示隐藏：toggle([speed, [easing],[fn]])
    • 参数
      • 参数都可以省略，无动画直接显示。
      • speed：三种预定速度之一的字符串（"slow"，"normal"，or "fast"）或表示动画时长的毫秒数数
      • easing:(Optional) 用来指定切换效果，默认是 "swing"，可用参数"linear"
      • 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]])
      • opacity透明度必须写，取值0~1之间
    • 参数
      • 参数都可以省略，无动画直接显示。
      • speed：三种预定速度之一的字符串（"slow"，"normal"，or "fast"）或表示动画时长的毫秒数数
      • easing:(Optional) 用来指定切换效果，默认是 "swing"，可用参数"linear"
      • fn：回调函数，在动画完成时执行的函数，每个元素执行一次
  • 自定义动画
    • animate(params, [speed],[easing], [fn])
      • params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法,如 borderLeft，其余参数都可以省略。
      • speed：三种预定速度之一的字符串（"slow"，"normal",or "fast”）或表示动画时长的毫秒数值
      • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数 "linear"
      • fn:回调函数，在动画完成时执行的函数，每个元素执行一次
  • 停止动画队列
    • 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
    • stop() 方法用于停止动画或效果。
    • stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画
    • 每次使用动画之前，先调用 stop() ,在调用动画
  • 事件切换
    • hover([over,]out)
      • over:鼠标移到元素上要触发的函数（相当于mouseenter）
      • out:鼠标移出元素要触发的函数（相当于mouseleave）
      • 如果只写一个函数，则鼠标经过和离开都会触发它
• 6：jQuery 属性操作
  • 元素固有属性值 prop()
    • 获取属性 prop（"属性")
    • 设置属性 prop（"属性","层性值")
  • 元素自定义属性值 attr()
    • 获取属性 attr（"属性")
    • 设置属性 attr（"属性","层性值")
  • 数据缓存 data()
    • 获取数据 date（"name")
    • 附加数据 data（"name","value")
• 7：jQuery 文本属性值
  • html()
    • 普通元素内容 html（相当于原生 innerHTML)
    • html() 获取元素的内容
    • html("内容") 设置元素的内容
  • text()
    • 普通元素文本内容text() （相当与原生innerText)
    • text() 获取元素的文本内容
    • text("文本内容") 设置元素的文本内容
  • val()
    • 表单的值val()（相当于原生 value）
    • val() 获取表单的值
    • val("内容"）设置表单的值
• 8： jQuery 元素操作
  • 遍历元素 each()
    • DOM 遍历
      • 语法 $("div").each(function (index domEle){xxx})
      • each()方法遍历匹配的每一个元素。主要用Dom处理。each每一个
      • 里面的回调函数有2个参数： index是每个元素的索引号； demEle是每个DoM元素对象，不是jquery对象
      • 所以要想使用 jquery方法，需要给这个dom元素转换为 jquery对象$(domEle）
    • 数据遍历
      • $.each(object, function (index, element){xxx;})
      • $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
      • 里面的函数有2个参数： index是每个元素的索引； element遍历内容
  • 创建
    • 动态创建li标签： $(" ")
  • 添加
    • 内部添加
      • 把内容放入匹配元素内部最后面 element.append（"内容"）
      • 把内容放入匹配元素内部最前面 element.prepend("内容")
    • 外部添加
      • 把内容放入目标元素后面 element.after（"内容"）
      • 把内容放入目标元素前面 element.before（"内容"）
  • 删除
    • 删除匹配的元素（本身） element.remove()
    • 删除匹配的元素集合中所有的子节点 element.empty()
    • 清空匹配的元素内容 element.html（"）
    • 总结
      • remove删除元素本身。
      • empty()和html()作用等价，都可以删除元素里面的内容，只不过htm还可以没置内容。
• 9：jQuery 尺寸、位置操作
  • 尺寸操作
    • width()/height() 取得匹配元素宽度和高度值; 只算 width/ height
    • innerWidth()/innerHieght() 取得匹配元素宽度和高度值; 包含 padding
    • outerWidth()/outerHeight() 取得匹配元素宽度和高度值; 包含 padding、 border
    • outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值;包含 padding、borde、margin
    • 使用
      • 参数为空，则是获取相应值，返回的是数字型
      • 如果参数为数字，则是修改相应值
      • 参数可以不必写单位。
  • 位置操作
    • offset() 设置或获取元素偏移
      • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
      • 该方法有2个属性 left、top;
      • offset().top 用于获取距离文档顶部的距， offset().left用于获取距离文档左侧的距离
      • 设置元素的偏移： offset({top：10,left:30})
    • position() 获取元素偏移
      • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
      • 该方法有2个属性 left、top;
      • position().top用于获取距离定位父级顶部的距离， position().left 用于获取距离定位父级左侧的距离
      • 该方法只能获取
    • scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
      • scrollTop() 方法设置或返回被选元素被卷去的头部
      • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部
• 10：jQuery 事件
  • 事件注册
    • element.事件名称(function(){})
  • 事件处理
    • on(): 用于事件绑定
      • 可以绑定多个事件，多个处理事件处理程序。
      • 可以事件委派操作
      • 动态创建的元素
      • $(div）on（{ mouseover： function(){}, mouseout： function(){}, click： function(){} });
    • off(): 事件解绑
      • off()方法可以移除通过on()方法添加的事件处理程序
    • trigger() / triggerHandler() ：自动触发事件
      • elment.trigger("type"）
      • elment.triggerHandler("type"）
      • triggerHandler 模式不会触发元素的默认行为
  • 事件对象
    • jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大
    • 阻止默认行为： event.preventDefault() 或者 return false
    • 阻止冒泡： event.stopPropagation()
• 11： jQuery 拷贝对象
  • $.extend([deep], target, objectl, [objectN])
    • deep：如果设为tue为深拷贝，默认为浅拷贝
    • target：要拷贝的目标对象
    • object1：待拷贝到第一个对象的对象
    • objectN:待拷贝到第N个对象的对象
    • 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
    • 深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象
• 12：jQuery 多库共存
  • 把里面的$符号统一改为 jQuery.比如 jQuery("div")
  • jQuery变量规定新的名称： $noConflict() ; var x=$.noConflict()
• 13：jQuery 插件
  • jQuery 插件常用的网站
    • 1. jQuery 插件库 http://www.jq22.com/
    • 2. jQuery 之家 http://www.htmleaf.com/
  • jQuery 插件使用
    • 引入相关文件。（jQuery 文件 和 插件文件）
    • 复制相关html、css、js (调用插件)。
  • 案例
    • 瀑布流插件
    • 图片懒加载插件
    • 全屏滚动插件
    • bootstrap组件
    • bootstrap插件（JS）