JavaScript之二-CSDN博客

本文链接：https://blog.csdn.net/Rococoberry/article/details/103669428

一 JS事件的委托

JS不能隐式迭代：不能操作一堆，只能进行单个操作；
字符串大小写转化方法：
toLowerCase------ 转换为小写
toupperCase------ 转化为大写
nodeName-------节点名称；
nodeType--------元素节点返回1 ，文本节点返回3，注释返回8；
childNodes--------返回当前元素的子节点集合类型；
nodeValue--------返回当前子节点的节点值；
parentNode--------父节点；
nextSibling -----------下一个节点同胞元素；
previousSibling -----------上一个节点同胞元素;
nextElementSibling ----------- 下一个同胞元素;
previousElementSibling -----------上一个同胞元素;
parentElement -----------获取当前节点的父元素;
children -----------获取当前元素的子元素;
firstChild -----------获取的是第一个节点;
firstElementChild -----------获取的是第一个元素;
lastElementChild -----------获取的是最后一个元素;
childElementCount -----------获取当前子元素的个数;
createElement()---------创建dom元素；
appendChild()---------添加dom元素；
offsetLeft--------- 左偏移量；
offsetTop --------- 上偏移量；
offsetParent---------返回偏移容器父容器；
getAttribute(“class”)---------获取class属性；
setAttribute(“value”,“你好”)---------设置value=你好；
this：当前的对象事件里面的this 是当前的dom元素对象；
getComputedStyle(div).height----------内嵌样式的获取方式；

二对象和数组

1、数组的关键字：Array()
Array里面只有一个值时，表示数组的长度；多个值则为数组里面的值。
2、数组里的方法

.concat()-------拼接
every（）-------检测数组里面所有元素是否符合条件 true false

var s= m.every(function (val, index) {
    return val>2;
})

fill------固定值替换,不写后两个参数,全替换.原数组受影响；

var f= m.fill("room",1,4);//后面两个值是起始索引和终止索引
    console.log(f);

filter : 过滤方法,过滤出满足条件的元素；

var w= m.filter(function (val, index, arr) {
        if(val>5){
            return val;
        }
    })
    console.log(w);

find:找数组满足条件的,返回第一个值

 var p= m.find(function (val,index,arr) {
        if(val>2){
            return val;
        }
    })
    console.log(p);

forEach:数组遍历方法,相当代替for遍历数组,无返回值；
map:映射,产生新数组,不写返回值;类似遍历数组；
reduce:累计器；

var sa=pp.reduce(function (val1,val2) {
        console.log(val1, val2);
        return val1*val2;
    })
    console.log(sa);//60

reverse：倒序；
some ：判断。有满足条件的输出true，否则输出false；
sort:排序，默认是从小到大排序；下述算法可实现从大到小排序：

ss.sort(function (n1,n2) {
        return n2-n1;
    })
    console.log(ss);

push：后追加 unshift：前追加
pop：后删除 shift：前删除
数组截断:slice ----起始索引和终止索引，返回值为截取的值； splice-------索引，长度返回也是截取的值 , 原数组受影响；
Math.random()--------随机出来的是0-1的小数;
Math.floor()--------向下取整;

三获取页面宽高

document.documentElement.clientHeight--------可视区域高；
document.documentElement.clientWidth-------可视区域宽；
document.body.clientHeight--------body的真实高；
document.body.clientWidth--------body的真实宽(浏览器两边默认的8px空隙）；
window.screen.availHeight;
window.screen.availWidth;--------获取屏幕宽和高不包涵任务栏杆；
window.screen.height;
window.screen.width;-------获取屏幕的实际宽和高包涵任务栏；
window.screenTop;
window.screenLeft;-------浏览器的上边距和左边距；
window.scrollX;
window.scrollY;
document.documentElement.scrollTop;
document.documentElement.scrollLeft;-------滚动条滑动距；

四数据类型转换

typeof num.toString()-------将对象num强制转换为字符串；
parseInt(num)-------转换为整型；
parseFloat(num)-------转换为浮点型；
str.split(" ")-------将字符串用“ ”分割；
a.toString() // a.join("")-------将数组转换为字符串；
s.indexOf(‘a’, 0)--------查找字符串的第0位是否是a,若是，返回该索引，查找不到返回-1；
s.indexOf(‘f’)---------查找是否含有该字符，有就返回索引，没有返回-1；
s.lastIndexOf(‘e’，1)--------返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1；第二个值是该元素第几次出现的次数；
s.search(‘d’));--------查找字符，返回当前索引位；
10.s.substr(1, 3)--------字符串截断，起始索引长度；
s.substring(2, 3)) // s.slice(2, 3);-----------起始索引，终止索引包头不包尾；
s.replace(‘c’, ‘w’)--------字符串替换：将c换为w；
s.concat(k,h) 或者 s.concat(k).concat(h)--------字符串拼接；
s.charAt(0)---------根据索引搜索字符；
s.length-------字符穿的长度；
两种遍历字符串的方法：

for(i=0;i< s.length;i++){
        console.log(s.charAt(i));
    }
    for(var index in s){
        console.log(s.charAt(index));
    }

五排序算法

（1）冒泡排序

mao_sort(arr);
冒泡排序是对数组从第一个元素开始，与之后的元素逐个比较，元素值大的（或者小的）放在前面，就是对数组按从小到大或者从大到小的顺序排列。下述是冒泡排序中主要代码部分的注释：

for(i=0;i<num.length;i++){
            for (k=0;k<num.length-i-1;k++){
                if(num[k]<num[k+1]){
                    temp=num[k];//将第k个值存起来
                    num[k]=num[k+1];//然后将第k+1个的值赋给第K个
                    num[k+1]=temp;//temp存的值--即第K个值，赋给第K+1位
                    //由此实现了元素由大到小的排序

（2）快速排序

quicksort(arr);
快速排序即为递归算法，先找出数组中间的元素，分别与剩下的元素比较，若比中间元素的值大，放在数组中间元素位置的左边，否则放右边。下述主要代码部分：

var centerindex=parseInt(num.length/2);
        var centernum=num.splice(centerindex,1);
        var left=[];
        var right=[];
        for(i=0;i<num.length;i++){
            if(num[i]>centernum){
                left.push(num[i]);
            }
            else{
                right.push(num[i]);
            }
        }
        return quicksort(left).concat(centernum).concat(quicksort(right));
    }

（3）选择排序

selectSort(arr);
选择排序是任意选取数组中一个位置的元素值，与其余的元素值比较，按照程序设计的方式实现数组的由小到大或者由大到小的排序。主要代码部分如下所示：

 for(i=0;i<num.length;i++){
            var temp=i;
            var t=null;
            for(var k=i;k<num.length;k++){
                if(num[k]<num[temp]){    //此处K=i+1，若第K个值小于第i个值
                    temp=k;       //i与K交换位置
                }
            }
            t=num[temp];
            num[temp]=num[i];
            num[i]=t;
        }
        return num;

（4）插入排序

插入排序就是依次选取数组中的元素，一次和前面的所有的元素值进行比较，按照代码的设计，按从小到大或者从大到小的要求排序。主要代码部分如下所示：

 for (var i = 1; i < num.length; i++) {
      var temp = num[i];//    此时i=0+1，即就是第一索引位置的值
      for (k = i - 1; k >= 0; k--) {
          if (temp > num[k]) {   //k=i-1=0，比较第一与第0索引位置处的值
             num[k + 1] = num[k];  //若第一索引处的值大，交换位置
                }
             else {
                    break;
                }
            }
            num[k + 1] = temp;
        }