学习内容
- 元素操作
- 元素遍历
- 创建元素
- 添加元素
- 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('内容') 把内容放入目标元素前面 - 关系:
- 内部添加元素,生成之后,它们是父子关系
- 外部添加元素,生成之后,它们是兄弟关系
③ 删除元素
语法 | 含义 |
---|---|
element.remove() | 删除元素,自杀行为 |
element.empty() | 删除元素中的内容,包括子节点 |
element.html('') | 清空元素的内容 |
@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() 设置或获取元素偏移
- offset() 方法设置或返回被选元素,相对于文档的偏移坐标,跟父级没有关系
- 该方法有 2 个属性 left、top。offset().top 获取距离文档顶部的距离,offset().left 获取距离文档左侧的距离
- 设置元素的偏移: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)
- events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
- selector:元素的子元素选择器
- 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()