黑马程序员技术交流社区

标题: 【西安校区】Javascript基础回顾 [打印本页]

---

作者: 逆风TO    时间: 2019-12-16 18:14
标题: 【西安校区】Javascript基础回顾
数组的操作方法
push() ：在数组末尾添加任意多个元素，返回新数组的长度，原数组改变
pop()： 在数组末尾删除一个元素，返回被删除的元素，原数组改变
unshift() ：在数组开头添加任意多个元素，返回新数组的长度，原数组改变
shift()： 在数组开头删除一个元素，返回被删除的元素，原数组改变
//小技巧
var Arr=[1,2,3];
Arr.unshift(Arr.pop())//最后一个元素调到第一个
Arr.push(Arr.shift())//开头一个元素调到最后一个

splice() ：可以删除，替换，增加
splice(n)//从索引n开始（包括索引n）删除元素到数组末尾，返回被删除的元素组成的新数组，原数组改变
splice(n,m)//从索引n开始（包括索引n）向后删除m个元素，返回被删除的元素组成的新数组，原数组改变
splice(n,m,x)//从索引n开始（包括索引n）向后删除m个元素,保留剩余元素，并且在n的位置添加x元素，组成新数组，原数组改变。
//相当于替换
splice(n,0,x)//（删除0个元素）在索引n位置添加x元素，组成新数组，原数组改变

slice(start, end)：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
var heroes1 = ['刘邦', '张良', '韩信', '刘备', '张飞', '关羽'];
var heroes2 = heroes1.slice(2, 5); // ['韩信', '刘备', '张飞']

reverse()：颠倒数组元素的顺序
concat()： 合并多个数组
数组去重
var arr5=[1,2,2,2,2,4,5,4,6,3,4];                       
for(var i=0;i<arr5.length;i++){
        for(var j=i+1;j<arr5.length;j++){
                if(arr5[i]==arr5[j]){
                        arr5.splice(j,1)
                        j--
                }
        }
}

数组排序
sort() 从小到大排序
大致原理：不是纯粹比较数值大小，而是比较每两个数的个位数值大小，从小到大排序，如相同，再比较十位数值……
自己封装一个方法，利用sort()实现数值大小的排序
var arr6=[1,123,21,2,3,121,2,7,9,6,11,101]
        function sortFn(a,b){ //自定义一个排序函数
                if(a<b){
                        return -1  //这里只要是一个负数就可以  a-b
                }else if(a>b){
                        return 1 //这里只要是一个正数就可以
                }else{
                        return 0
                }
        }
        console.log(arr6.sort(sortFn))

冒泡排序
var temp=""
for(var i=0;i<arr6.length-1;i++){
                for(var j=0;j<arr6.length-1-i;j++){
                        if(arr6[j]>arr6[j+1]){
                                temp=arr6[j]
                                arr6[j]=arr6[j+1]
                                arr6[j+1]=temp
                        }
                }
        }

DOM（文档对象模型）
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 标签属性是属性节点
注释是注释节点
节点类型
元素节点        ：        各个标签 div、p、ul、li…
nodeType=1
属性节点        ：        各种属性       
nodeType=2
文本节点        ：        空格、换行符、文本
nodeType=3
元素节点方法
getElementById()
getElementsByTagName()
getElementsByName()
getAttribute() //获取指定元素节点的属性值
seAttribute()        //设置指定元素节点的属性值
removeAttribute() 移除指定元素节点的属性
层次节点属性
childNodes ：获取指定元素节点的所有子节点
children ： 获取指定元素的子元素
firstChild ：获取指定元素节点的第一个子节点
firstElementChild： 获取指定元素节点的第一个元素子节点，有兼容性问题
lastChild        ： 获取指定元素节点的最后一个子节点
lastElementChild ： 获取指定元素节点的最后元素子节点，有兼容性问题
parentNode ： 获取指定元素的父节点
nextSibling ：获取指定元素同级的下一个节点
nextElementSibling ：获取指定元素同级的下一个元素节点
previousSibling ：获取指定元素同级的上一个节点
previousElementSibling ： 获取指定元素同级的上一个元素节点
attributes ：获取指定元素的属性集合
DOM节点常用操作
//write()  前面只能跟上document，将任意字符插入在文档中
        document.write("<p>我是一个段落文本</p>")
       
//createElement()  创建一个元素节点，节点不会直接显示在文档中
        var oDiv=document.createElement("div")
        //oDiv.innerHTML="<p>我是一个段落文本</p>"
       
        var oText=document.createTextNode("文本节点")
//appendChild() 将新节点追加到指定节点内容后面
        //createTextNode("文本内容")  创建一个文本节点
        //语法：父节点.appendChild(新节点)
        oDiv.appendChild(oText)
        var oBox=document.getElementById("box");
        oBox.appendChild(oDiv)
       
//insertBefore()  将新节点插入在指定节点前面
        //语法：父节点.insertBefore(新节点,指定节点)
        var oList=document.getElementById("list");
        oList.insertBefore(oDiv,oList.firstElementChild)
//拓展 （自己封装一个函数 ）  
//insertAfter（自定义函数）实现将新节点插入指定节点后面
        function insertAfter(newNode,targetNode){
                //获取父节点
                var parent=targetNode.parentNode
                //判断如果最后一个节点是targetNode直接appendChild()
                if(parent.lastChild===targetNode){
                        parent.appendChild(newNode)
                }else{
                        parent.insertBefore(newNode,targetNode.nextSibling)
                }
        }
        insertAfter(oDiv,document.getElementById("item"))

//替换节点
        //replaceChild()
        //父节点.replaceChild(新节点，被替换的节点)
        oBox.replaceChild(oDiv,oBox.firstElementChild)       

//cloneNode() 复制节点  cloneNode(true)深度复制
        //语法：指定节点.cloneNode()
        var oLis=oList.firstElementChild.cloneNode(true)
        oBox.appendChild(oLis)
       
//removeChild() //删除节点
        //语法：父节点.removeChild(指定节点)
        var oItem=document.getElementById("item")
        oItem.parentNode.removeChild(oList.lastElementChild)

DOM操作综合案例
动态生成表格元素，根据表头对应内容切换每行的排列顺序
类似于某宝中的切换为按时间，销量，热度……排序

//获取数据
var userListData=[{
                                id:1,
                                name:"张三",
                                age:19,
                                num:3,
                                score:66
                        },..........]
//获取table元素
var table=document.getElementsByTagName("table")[0]

//自定义生成表头的方法
function creatThead(){
        var thead=document.createElement("thead")
        thead.innerHTML=`<tr><th type="name">姓名</th>
                            <th type="age">年龄</th>
                            <th type="num">学号</th>
                            <th type="score">分数</th>
                        </tr>`
        return thead
        }   

//将创建的表头添加到table中
  table.appendChild(creatThead())   
//自定义生成表格内容的方法
function creatTbody(userListData){
         var tbody=document.createElement("tbody")
         userListData.forEach(function(data,index){
             tbody.innerHTML+=`<tr><td>${data.name}</td>
                             <td>${data.age}</td>
                             <td>${data.num}</td>
                             <td>${data.score}</td>
                             </tr>
                            `
         })
         return tbody  
        }  
       
//将创建的表格内容添加到table中
table.appendChild(creatTbody(userListData))         

//给表头添加单击事件，完成不同排序的切换
var ths=document.getElementsByTagName("th")
for(i=0;i<ths.length;i++){
     ths[i].onclick=function(){
        var sortname=this.getAttribute("type")
        this.flag=this.flag==-1?1:-1
        var that=this
         userListData.sort(function(a,b){
             var x=a[sortname]
             var y=b[sortname]
             if(x>y){
                 return that.flag
             }else if(x<y){
                 return -that.flag
             }else{
                 return 0
             }
         })
         var newtbody=creatTbody(userListData)
         var oldtbody=document.getElementsByTagName("tbody")[0]
         table.replaceChild(newtbody,oldtbody)
     }
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2