对js的个人理解(2)

代码模块 专栏收录该内容
5 篇文章 0 订阅

js的数组

第一种: var arr = [1,2,3] || var arr = [1,“2”,true]

第二种: 使用内置对象 Array,
var arr = new Array(5); //定义了一个长度为5的数组。    
arr[0] = “1”; arr[1] = 2; arr[2] = true;

第三种: 使用内置对象 Araay,    
var arr = new Array(3,“4”,true);//定义一个数组,其中值为:3,4,true

数组小常识

数组中有一个属性 length: 获得数组的长度。
数组的长度是可变的。
数组可以存放不同类型的值

数组常用的方法

  • push
  • pop
  • unshift
  • shift
  • splice
  • join
  • concat
  • forEach
  • filter
  • map
  • sort
  • some
  • every

js的全局变量, 和局部变量

全局变量: 在script标签里面定义的一个变量,这个变量在页面中js部分都可以使用 在方法外部使用, 在方法内部使用,
在另一个scipt标签里使用。 局部变量: 在方法内部定义的一个变量,只能在在方法内部使用。

JS原生常用dom操作方法

查找

getElementByid,
getElementsByTagName,
querySelector,
querySelectorAll

插入

appendChild
insertBefore

删除

removeChild

克隆

cloneNode

设置和获取属性

  • setAttribute(“属性名”,”值”)
  • getAttibute(“属性名”)

js中的方法

第一种

使用一个关键字 function
     function 方法名(参数列表){
      方法体;
      返回值(视需求,可有可无);
    }
     for example:
      function add(a ,b,c){
       var sum = a+b+c;
       return sum;
    }
   (调用方法名,使用定义的方法)

第二种

匿名方法。
*** var 变量名 = function(参数列表){
    方法体;
    返回值;
}
如:
 var add = funtion(a,b){
 var sum = a+b;
 return sum;
}
(之后使用变量名调用方法)
**

第三种:动态方法

使用一个js的内置对象 Function var 变量名 = new Function(“参数列表”,“方法体 和 返回值”);
(注意,参数和方法体之间是逗号) var add = new Function(“a,b”, “var sum=a+b; return
sum”); (之后使用变量名调用函数) 注意,此方式中,可以预先定义好参数列表,和方法体与方法名,在定义方法的时候直接传进来。

js事件委托

什么是事件委托:它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

事件委托原理

事件委托就是基于js的事件流产生的,事件委托是利用事件冒泡,将事件加在父元素或者祖先元素上,触发该事件。

<!-- html页面 -->
<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
window.onload = function() {  
    var oUl = document.getElementById("parent-list");
    oUl.onclick = function(ev) {    
        var ev = ev || window.event;    
        var target = ev.target || ev.srcElement;   
        if (target.nodeName.toLowerCase() == 'li') {
            alert(target.innerHTML);    
        }  
    }
}
// addEventListener() 方法用于向指定元素添加事件句柄。
window.onload = function() {  
    var oUl = document.getElementById("parent-list");
    oUl.addEventListener('click', function() {
        var ev = ev || window.event;    
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() == 'li') { 
            alert(target.innerHTML);    
        } 
    });
}

事件委托优点

1.减少事件注册,节省内存,例如
在table上代理所有td的click事件.
在ul上代理所有li的click事件.


2.简化了dom节点更新时,相应事件的更新
不用在新添加的li上绑定click事件.
当删除某个li时,不用移解绑上面的click事件.

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值