• js-事件总结


    一、事件 1-26
    1、onmousedown
    定义:onmousedown事件会在鼠标按键被按下时发生

    2、onmouseup
    定义:onmouseup事件会在鼠标按键被松开时发生

    3、onmousemove
    定义:onmousemove事件会在鼠标指针移动时发生
    支持该事件的js对象:document
    但是onmousemove默认情况下没有任何对象的一个事件;
    因为鼠标移动频繁发生。

    4、onmouseover
    定义:onmouseover事件会在鼠标指针移动到指定的对象上时发生

    5、onmouseout
    定义:onmouseout事件会在鼠标指针移出指定的对象时发生

    6、onclick单击事件
    定义:onclick事件和onmousedown不同。单击事件是在同一元素上发生了
    鼠标按下时间之后发生了鼠标放开时间是发生的。
    理解:鼠标按下抬起以后事件才发生。

    7、onfocus光标移入事件
    定义:onfocus事件在对象获得焦点时发生

    8、onblur光标移出事件
    定义:onblur事件会在对象失去焦点时发生

    9、oncontextmenu右键事件
    鼠标按下右键的时候发生

    10、onsubmit
    onsubmit事件会在表单中的确认按钮(submit)被
    点击是发生。

    11、onkeydown
    onkeydown事件会在用户按下一个键盘按键时发生

    12、onkeyup
    obkeyup事件会在键盘按键被松开时发生

    13、onload
    onload事件会在页面或图像加载完成后立即发生

    14、onscroll
    onscroll事件拖动滚动条时发生

    15、onresize
    onresize事件会在窗口或框架被调整大小时发生

    16、onmousewheel
    onmousewheel事件ie、chrome下鼠标滚轮滚动时发生

    17、DOMMouseScroll
    DOMMouseScroll事件是标准下(ff)鼠标滚轮事件,
    鼠标滚轮滚动时发生

    18、onreadystatechange
    onreadystatechange事件:当请求被发送到服务器时;
    我们需要执行一些基于响应的任务。每当readyState
    改变时,就会触发onreadystatechange事件。
    readyState属性存有XMLHttpRequest的状态信息。
    在onreadystatechange事件中,我们规定当服务器响应
    已做好被处理的准备时所执行的任务。


    19、attachEvent绑定事件
    ie下的绑定事件,2个参数,第一个什么事件,第二个执
    行函数(倒序执行)。注意this指向
    如:obj。attachEvent(‘onclick’,aaa)
    function aaa(){}

    20、addEventListener绑定事件
    标准下的绑定事件,3个参数。1什么事件(不加ON),
    2执行函数 3、一个布尔值。true是捕获阶段,false是
    冒泡阶段

    21、event对象指事件的状态

    简单的:一个 存了 事件详细信息的东西


    网上较专业的:Event对象代表事件的状态,比如事件在其中发生的元素
    键盘按键的状态,鼠标的位置,鼠标按钮的状态,通常
    与函数结合使用。

    22、clientX、clientY
    在Event对象下获取鼠标位置

    23、cancelBubble =true
    在Event对象下取消冒泡事件

    24、keyCode
    在Event对象下获取用户按下键盘的哪个按键

    25、preventDefault()
    阻止默认默认事件的绑定写法

    26、return false
    阻止默认时间的普通写法

     

    二、DOM 27-46
    27、getElementById
    通过id获取某一个元素

    28、getElementsByTagName
    通过标签名获取一组元素的集合

    29、childNodes
    获取子节点,但是标准下会获取空白节点
    获取第一级子元素的节点

    30、nodeType
    节点类型
    1)元素节点(标签)2)文本节点(空白节点)

    31、children
    获取子节点,但是没有兼容性问题
    获取第一级子元素的节点

    32、firstElementChild || firstChild
    标准下:firstElementChild ie不支持
    ie下是 firstChild
    获取子元素里的第一个

    33、lastElementChild || lastChild
    标准下:lastElementChild ie不支持
    ie下是 lastChild
    获取子元素里的最后一个

    34、nextElementSibling || nextSibling
    标准下:nextElementSibling ie不支持
    ie下 nextSibling
    获取子指定元素的下一个兄弟节点

    35、previousElementSibling || previousSibling
    标准下: previousElementSibling ie不支持
    id:previousSibling
    获取指定元素的上一个兄弟节点

    36、parentNode
    获取父节点

    37、offsetParent
    获取有定位的父节点,都没有定位的话父节点就是body

    38、offsetWidth-----有问题
    获取元素的实际宽度(width+padding+border)

    39、offsetHeight
    获取元素的高度(height+padding+border)

    40、clientWidth
    获取元素的内部宽度(width+padding)

    41、clientHeight
    获取元素的内部高度(height+padding)

    42、createElement(标签名)
    创建一个节点

    43、appendchild(节点)
    追加一个节点

    44、insertBefore(节点,原有节点)
    在已有的元素前面插入

    45、removeChild(节点)
    删除一个节点

    46、replaceChild(节点,已有节点)
    替换已有的节点

     

    三、BOM操作: 47-53
    47、window。open()
    打开窗口

    48、window。close()
    关闭窗口,标准下不支持

    49、window。location
    获取浏览器地址

    50、window。location。href
    获取整体的网址

    51、window。location。search
    获取问号?后面的内容,包括问号

    52、window。location。hash
    获取警号#后面的内容,包括警号

    53、window。location。reload()
    自动刷新,定时器配合

    53、window。navigator。userAgent
    获取浏览器信息

     

    四、js基础: 54-126
    54、if else 如果。。。。否则。。。

    55、switch 如果

    56、?: 三木,就是如果。。。否则。。。

    57、for(){} for循环

    58、for in

    59、while=for

    60、continue 终止本次循环 
    if(i=2)continue 跳过这个条件

    61、break 终止当前循环 
    if(i=3)break 结束本次

    62、undefined 未定义

    63、null=========?

    64、=== 只比较,不转换类型

    65、== 不仅比较,而且还会将两个东西转换成相同的类型

    66、= 赋值

    67、! 就是 不 的意思

    68、setTimeout 
    设置定时器,2秒钟后,执行一次,并且只执行一次,---定时炸弹

    69、clearTimerout
    清楚定时器,清理setTimerout

    70、setInterval
    设置定时器,每两秒执行一次

    71、clearInterval
    清楚定时器,清理setInterval

    72、arguments
    实参的元素集合

    73、call
    改变this取向
    fn名.call(this,‘black’)第一个参数是函数之行的环境,
    从第二个参数开始,才是函数的真正参数

    oDiv.onclick = function(){
    toChange.call(this,'black'); 
    };
    function toChange(sColor){
    this.style.background = sColor;
    }

    74、apply
    改变this取向,
    function show(a, b)
    {
    alert('this是:'+this+' a是:'+a+' b是:'+b);
    }
    show(12, 8);
    show.apply(document, [12, 8]);
    第二个参数是以数组形势存在的

    75、callee ===============?调用这个函数自身的


    76、var arr=【】; 声明一个数组

    77、var arr=new Array() 声明一个数组

    78、push 
    向数组的末尾添加一个或更多元素,并返回新的长度

    79、pop
    删除数组最后一个元素,并返回这个元素

    80、shift
    删除数组第一个元素,并返回这个元素

    81、unshift
    向数组的开头添加一个或多个元素,并返回新的长度

    82、splice
    删除元素,并向数组添加新的元素

    83、join()
    把数组的所有元素放入一个字符串。元素通过指定
    的分隔符进行分隔

    84、sort()
    对数组的元素进行排序

    85、concent----concat()?
    连接两个数组或者多个数组,并返回结果

    86、split
    分割字符串,获得数组

    87、substring
    获取字符串
    包括开始不包括结束

    88、indexOf
    从前往后检索字符串

    89、charAt
    获取某个字符

    90、var re=//; 声明一个正则对象

    91、var re=new RegExp() 声明一个正则对象

    92、search 查找一个字符串,只找第一次出现的位置

    93、month ===============?
    match-匹配符合正则的东西,挑东西返回数组


    94、test 用正则检验字符串是否符合它所规定的规则

    95、replace 替换,把符合规则的东西替换成字符串

    96、量词:{n,m}至少出现n次,最多出现m次
    +许多 
    * {0,} 0到任意次
    ?零次或者一次{0,1}
    {n,}最少n次,最多不限
    {,m}最少不限最多m次
    {n}正好n次

    97、字符类:
    1[abc]2 1和2中间出现a或b或c
    [^0-9]排除数字以外所有都可以
    [a-z]所有的英文
    [0-9]所有的数字

    98、标识: i 忽略大小写 g 全局匹配

    99、首尾: ^ $

    100、转义:
    d 查找数字 [0-9]
    D 除了数字[^0-9]
    s 空白
     单词边界
    w 数字字母下划线--用户名
    . 任意字符
    . 代表.本身

    101、var oDate= new Date() 获取当前时间

    102、getHours() 获取小时

    103、getMinutes() 获取分钟

    104、getSeconds() 获取秒

    105、getFullYear() 获取年

    106、getDay() 获取星期

    107、getDate() 获取当前的时间日期

    108、setDate() 设置一个月的某一天

    109、var oImg=new Image() 创建一个image对象

    110、什么叫ajax
    通过XMLHttpRequest与服务器通信,进行无刷新操作

    ajax采用的是异步请求

    111、同步与异步的区别

    同步就是同一时间做一件事
    异步就是同一时间做多件事

    112、ajax的交互方式
    1)发送数据并返回 ()(注册)
    2)只发送不返回 ()========?例子
    3)不发送只返回 (股票)

    113、post与get的区别
    1)发送方式不一样:get加载网址问好后面的
    post把数据放在一个传输体中发送上去的

    2)安全不一样
    post相对安全,get不安全

    3)网址长度不一样
    ie下get网址超过2048字节将被截断
    post没有上限

    4)缓存问题
    get可以缓存网址,post不会缓存网址

    5)用途不一样
    get:查询数据,post修改数据

    114、发送数据是什么样的?
    串联化数据:key1=value1&key2=value2

    115、返回数据是什么样的?
    返回的是字符串

    116、跨域:jsonp?
    (利用script标签跨域)
    在头部创建个script标签,
    改变script标签中src

    117、ajax的编写步骤?
    1)创建ajax对象(要有手机)
    2)链接服务器open(拨号)
    3)监听数据返回onreadystatechange(听)
    4)发送数据send(说)
    5)close(忽略)(挂了)

    118、json怎么取?=========?
    通过串联化数据

    119、什么是对象?
    对象是一个整体,对外提供一些操作。||
    黑盒子,看不到内部的样子,
    能看到表面的按钮

    120、什么是面向对象?
    使用对象时,只关注对象提供的功能,
    不关注其内部细节,比如jQuery ||
    使用一个东西的时候,不去管内部是
    怎么做的,只用好它的功能


    121、引用类型是什么意思?=========?


    122、this的本质其实就是这个方法或者函数
    属于哪个对象的,this就是谁。函数前面有new
    的时候this会失效。

    123、原型是什么? =========?
    原型就是给一类对象加东西

    124、面向对象怎么写?=========?

    125、继承采用什么方式?
    采用原型链的方式继承

    126、面向对象变成的特点?
    封装、继承、多态

     


    五、常用技巧:
    1、加开关:bBtn
    例如:
    <script>
    window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    var aImg = document.getElementsByTagName('img');

    for(var i=0;i<aLi.length;i++){
    aLi[i].bBtn = true; // ------设置开关
    aLi[i].index = i;

    aLi[i].onclick = function(){

    if(this.bBtn){
    aImg[this.index].src = 'on' + this.index + '.png';
    this.bBtn = false;
    }

    else{
    aImg[this.index].src = 'off' + this.index + '.png';
    this.bBtn = true;
    }

    };
    }
    };
    </script>


    2、加索引:index;
    例如:
    <script>
    window.onload=function()
    {
    var oBtn=document.getElementById('btn');
    var aBtn=oBtn.getElementsByTagName('input');

    var oText=document.getElementById('text');
    var aDiv=oText.getElementsByTagName('div');

    for(var i=0; i<aBtn.length; i++)
    {
    aBtn[i].index=i; //先添加索引值
    aBtn[i].onclick=fn1;
    }
    function fn1()
    {
    alert(this.index); //后获取索引值

    aDiv[this.index].style.background='yellow';
    }
    };
    </script>

     

    3、递归===============?

    4、枚举================?

    5、定时器:
    setInterval()

    6、alert
    console。log=========?这是啥意思

     

  • 相关阅读:
    摄影基础知识(二)
    std::bind
    摄影网站汇总
    std::function
    常用路径说明
    摄影基础知识(一)
    JavaScript 箭头函数:适用与不适用场景
    软帝学院:Java实现的5大排序算法
    软帝学院:用Java编写计算器,代码展示!
    windows环境下运行java的脚本
  • 原文地址:https://www.cnblogs.com/nanchengyuan/p/7191606.html
Copyright © 2020-2023  润新知