学习内容

• 元素操作
  • 元素遍历
  • 创建元素
  • 添加元素
• jQuery 尺寸、位置操作
  • jQuery 尺寸
  • jQuery 位置
• jQuery 事件
  • jQuery 事件注册
  • on 绑定事件
  • off 解绑事件
  • 自动触发事件 trigger()
• 事件对象
• jQuery 插件使用

一、元素操作

① 元素遍历

虽然 jQuery 获取元素后对元素操作有隐式迭代，但是隐式迭代操作的是相同的作用，如果要操作不同的内容，需要使用 jQuery 的 each 功能，jQuery 提供了两种 each 遍历。

• 语法1：$('').each(function(index,domEle){})

  元素.each() 方法遍历匹配的每一个元素。主要用 DOM 处理，使用 jQuery 需要用 $(domEle) 转化一下 ，回调函数里面的 index 参数是其索引号。此方法使用场景多适用于遍历元素

• 语法2：$.each(object,function(index,element){})

  $.each() 方法可用于遍历任何对象，主要使用场景用于数据处理，index 为索引，element 为 DOM 对象，使用 jQuery 需 $(element) 转换

② 创建元素

• 语法：$('<li>内容</li>)

• 添加元素

  • 内部添加：

  语法	含义
  element.append('内容')/元素.appendTo(target)	把内容放入匹配元素内部最后面/添加到目标元素内部的最后面
  element.prepend('内容')/元素.prependTo(target)	把内容放入匹配元素内部最前面/将元素添加到目标元素内部的最前面

  • 外部添加：

  语法	含义
  element.after('内容')	把内容放入目标元素后面
  element.before('内容')	把内容放入目标元素前面

  • 关系：
    • 内部添加元素，生成之后，它们是父子关系
    • 外部添加元素，生成之后，它们是兄弟关系

③ 删除元素

@remove 删除元素本身
@empt() 和 html('') 作用等价，都可以删除元素里面的内容，只是 html() 还有可以设置内容的功能

二、jQuery 尺寸、位置操作

① jQuery 尺寸

• width()、height()：只包含 width，height
• innerWidth()、innerHeight()：包含 padding + width
• outerWidth()、outerHeight()：包含 padding、border、width
• outerWidth(true)、outerHeight(true)：包含 padding、border、margin、width

以上参数为空表示获取相应的值，返回的式子类型，如果参数为数字，则是修改相应的值，可以不用写单位。

② jQuery 位置

• offset() 设置或获取元素偏移

  1. offset() 方法设置或返回被选元素，相对于文档的偏移坐标，跟父级没有关系

  2. 该方法有 2 个属性 left、top。offset().top 获取距离文档顶部的距离，offset().left 获取距离文档左侧的距离
  3. 设置元素的偏移：offset({top:10,left:30});
• position() 获取元素偏移
  • position() 方法用于返回被选元素相对于带有定义的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 该方法有两个属性，left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离
  • 该方法只能获取，不能设置
• scrollTop()、scrollLeft() 获取元素被卷曲的头部和左侧距离
  • scrollTop() 方法设置或返回被选元素被卷去的头部。
  • 不写参数是获取，返回的数字类型，带参数则为设置
  • 相关事件：$().scroll(function(){})

  此事件仅绑定于带有滚动条的元素，浏览器本身也会有滚动条，其属于 window，值得注意的是，如果滚动内容为 document 的时候应绑定 html、body，原因就是浏览器的厂家不一样，scroll 的属性有的会给 html，有的会给 body，为了兼容，则直接用 html，body 设置 scroll 相关属性。

三、jQuery 事件

① 事件注册

• 语法：element.事件(function(){})

$('div').click(function(){
事件处理程序})

其他事件和原生 js 基本一致
如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

② on 绑定事件

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

• 语法：element.on(events,[selector],fn)

  1. events：一个或多个用空格分隔的事件类型，如"click"或"keydown"

  2. selector：元素的子元素选择器
  3. fn：回调函数 即绑定在元素身上的侦听函数

• 优势：

  • 可以绑定多个事件，多个处理事件处理程序

  	$('div').on({
  		mouseover: function(){},
  		mouseout: function(){},
  		click: function(){}
  	});
  

  • 可以事件委派操作。事件委派就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

  	$('ul').on('click','li',function(){
  		alert('hello world!');
  	});
  

  • 动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件

  	$('div').on('click','p',function(){
  		alert('添加动态元素并绑定事件");
  	});
  

③ off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序

• $('p').off()：解绑p元素所有事件处理程序
• $('p').off('click')：解绑p元素上面的点击事件
• $('ul').off('click','li');：解绑事件委托
• 如果有的事件只想触发一次，可使用 one() 来绑定事件

④ 自动触发事件

• element.click() 直接触发一次事件，会执行默认效果
• element.trigger('type') 也会直接执行一次事件，也有默认效果
• element.triggerHandler(type) 该方法触发的事件不会触发默认行为。

四、jQuery 事件对象

element.on(events,[selector],function(event){})
// 阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()

五、jQuery 插件使用

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意：这些插件也是依赖于 jQuery 来完成的，所以必须要先引入 jQuery 文件。

• jQuery 常用的网站：
  • jQuery 插件库：http://www.jq22.com/
  • jQuery 之家：http://www.htmleaf.com/
• jQuery 使用步骤
  • 引入相关文件（jQuery 文件和插件文件）
  • 复制相关 html、css、js（调用插件）
• 图片懒加载插件：
  • 描述：图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载，当滑动页面到可视区域，再显示图片。使用 jQuery 插件库 EasyLazyload。此时的 js 引入文件和 js 调用必须写到 DOM 元素（图片）最后面
  • 注意：
    • 要引入 jQuery
    • 插件 JS [js引入文件和js调用必须写到 DOM 元素（图片）最后面]
    • 将图片 src 替换为 data-lazy-src
    • 调用 lazyLoadInit()