zoukankan      html  css  js  c++  java
  • 前端基础(4)jq

    1.Query是一个伪数组

    什么是伪数组

    var weiArr = {}
    
      weiArr.length = 0
    
      weiArr[0] = 'atguigu'
    
      weiArr.length = 1
    
      weiArr[1] = 123
    
      weiArr.length = 2
    

    2.offset和position属性

    offset(): 相对页面左上角的坐标  类似于JavaScript中的对象

    position(): 相对于父元素左上角的坐标 类似于JavaScript中的对象。Offsetleft和 offsettop的值减去相应的对象的Offsetleft和 offsettop及offsetwidth  和offsetheight

    3.元素的尺寸与滚动条

    1)内容尺寸

    width ():$div.width()

    height():$div.height()

    2)内部尺寸 类似于JavaScript中的clientwidth  和clientheight

    innerHeight():height+padding

    innerWidth(): width+padding

    3)外部尺寸  如果false类似于  offsetwidth 和offsetheight

    outerHeight(false/true): height+padding+border  如果是true, 加上margin

    outerWidth(false/true): width+padding+border 如果是true, 加上margin

    4)scrollTop(): 类似JavaScript中的  scrollTop(60);指定滚动的位置(兼容chrome和IE)

    4.删除元素与删除所有匹配元素的子元素

    删除元素:empty()

    删除所有匹配元素的子元素 remove()

    5.事件绑定

    1)eventName(function(){})

    绑定对应事件名的监听,      例如:$('#div').click(function(){});

    $('.inner')
    
       .mouseenter(function () { // 进入
    
        console.log('进入')
    
       })
    
       .mouseleave(function () { // 离开
    
       console.log('离开')
    
       })
    

    2) on(eventName, funcion(){})

    通用的绑定事件监听, 例如:$('#div').on('click', function(){})

    $('.inner')
    
       .on('mouseenter', function () {
    
       console.log('进入2')
    
       })
    
       .on('mouseleave', function () {
    
       console.log('离开2')
    
       })
    

    3)优缺点:

        eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持

        on: 编码不方便, 可以添加多个监听, 且更通用

    6.事件解绑: off(eventName)

    $('.inner').off()  解绑所有

    $('.inner').off('mouseenter')  解绑mousennter

    7. 事件的坐标

     event.clientX, event.clientY  相对于视口的左上角

    console.log(event.clientX, event.clientY)

     event.pageX, event.pageY  相对于页面的左上角

    console.log(event.offsetX, event.offsetY)

    event.offsetX, event.offsetY 相对于事件元素左上角

    console.log(event.pageX, event.pageY)

    8.事件相关处理

      停止事件冒泡 : event.stopPropagation()

      阻止事件默认行为 : event.preventDefault()

     阻止冒泡与默认 return false

    9.多库共存

    用jquery来释放$的权限,避免冲突 jquery.noconflict,Window.onload  ,$(document).ready(function(){}) , $(function(){}),执行的顺序 ready 在onload之前完成 ,onload在最后,onload包括图片加载完后再回调,ready在网页加载完以后就会回调,ready可以加载多个,onload只有一个

    10.插件

    Jquery.fn.extend(object)插件拓展 $元素集的方法

    Jquery.extend(object) $本身的方法

    11.type of与instanceof

    type   of  可以判断数值 布尔以及字符串以及undefined类型等  他是转化为相应的字符串 第一个是小写

    instanceof  可以判断对象例如 函数Fanction Array 以及Object等

    12.图片的加载

    图片需要用image读取,实际上不占inner和outer等,$(window).load(function()  最后加载才能读取图片的尺寸

    13.FileReader

    用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

    FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

    readAsDataUR          file                 将文件读取为DataURL(一般读取图片)

    readAsText             ile,[encoding]      将文件读取为文本

    readAsBinaryString    file                   将文件读取为二进制编码

    abort                   (none)                 终端读取操作

    事件

    onabort   中断

    onerror    出错

    onloadstart  开始

    onprogress  正在读取

    onload       成功读取

    onloadend   读取完成,无论成功失败

    14.input  file 方法

    this.files//返回的是一个数组

    name  获取名称

    type   类型

    total  总大小

    loaded   获取了的大小

    lastModified:文件的上次修改时间,格式为时间戳

    lastModifiedDate:文件的上次修改时间,格式为 Date 对象实例

    15.实例

    1)功能

    1>多文件拖拽上传

    2>三级联动下拉菜单,输入框随着文字的长短变化,箭头旋转等

    2)界面

  • 相关阅读:
    超过经理收入的员工
    搜索插入位置
    整数反转
    俩数之和
    tar 命令参数解释
    【记录】Transaction rolled back because it has been marked as rollback-only
    【转载】BIO、NIO、AIO
    【转载】JDK自带的log工具
    【转载】java8中的Calendar日期对象(LocalDateTime)
    【对象属性复制】BeanUtils.copyProperties(obj1, obj2);
  • 原文地址:https://www.cnblogs.com/gg128/p/9585700.html
Copyright © 2011-2022 走看看