昔洛 的个人博客

Bug不空,誓不成佛

  menu
70 文章
14633 浏览
2 当前访客
ღゝ◡╹)ノ❤️

jQuery (下)

学习内容

  • 元素操作
    • 元素遍历
    • 创建元素
    • 添加元素
  • 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() 设置或获取元素偏移
    1. offset() 方法设置或返回被选元素,相对于文档的偏移坐标,跟父级没有关系
    1. 该方法有 2 个属性 left、top。offset().top 获取距离文档顶部的距离,offset().left 获取距离文档左侧的距离
    2. 设置元素的偏移: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"
    1. selector:元素的子元素选择器
    2. 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 使用步骤
    • 引入相关文件(jQuery 文件和插件文件)
    • 复制相关 html、css、js(调用插件)
  • 图片懒加载插件:
    • 描述:图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载,当滑动页面到可视区域,再显示图片。使用 jQuery 插件库 EasyLazyload。此时的 js 引入文件和 js 调用必须写到 DOM 元素(图片)最后面
    • 注意:
      • 要引入 jQuery
      • 插件 JS [js引入文件和js调用必须写到 DOM 元素(图片)最后面]
      • 将图片 src 替换为 data-lazy-src
      • 调用 lazyLoadInit()
内事不懂问百度,外事不懂问谷歌~