視頻播放地址:http://www.gxlcms.com/course/547.html
本課程難點是選擇器模塊,看了本視頻的應該都能看出來,在本視頻中用了大量的視頻介紹了選擇器模塊,大家可以著重學習這一塊。
需要區分復合選擇還是單項選擇,單項選擇的話分別用各自的方法進行獲取,復合選擇的話就要進行篩選。
所以第一步,區分是單項還是組合。
實現方法是將傳入選擇器的字符串轉換成數組,如果數組長度大于1的話,就是復合選擇。如果不是的話,再判斷是哪一種單項選擇器。
if(trim(selector).split(" ").length > 1){ //trim()方法用于去除字符串開頭和結尾的空白//復合選擇器代碼}//判斷是哪一種單項選擇器
第二步,判斷是哪一種單項選擇器,然后進行篩選返回第一個元素。
①判斷,有兩種方法:
方法一:用正則表達式。
if(/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){ //ID選擇器}if(/^((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){ //Tag選擇器}if(/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){ //class選擇器}if(/^\[[A-Za-z0-9_-\S]+\]$/.test(selector)){ //屬性選擇器}
方法二:檢查傳入選擇器的第一個字符
var type=trim(selector).charAt(0);switch(type){ case ".": //class選擇器 case "#": //id選擇器 case "[": //屬性選擇器 default: //tag選擇器}
②根據選擇器進行篩選。
id和tag直接用DOM方法就可以了。
class的document.getElementsByClassName有兼容問題,需要為IE定義方法。
屬性選擇器需要遍歷所有的DOM節點對象,選擇出符合條件的。
//ID選擇器return document.getElementById(selector.slice(1,selector.length));//tag選擇器return document.getElementsByTagName(selector)[0];//類選擇器if(document.getElementsByClassName){ return document.getElementsByClassName(selector.slice(1,selector.length))[0]; }else{ var nodes = document.all ? document.all : document.getElementsByTagName('*'); for(var i=0;i<nodes.length;i++){ var classes=nodes[i].className.split(/\s+/); if(classes.indexOf(selector.slice(1))!=-1){ //indexOf不兼容,需要在原型上擴展 return nodes[i]; break; } } } }//屬性選擇器if(/^\[[A-Za-z0-9_-\S]+\]$/.test(selector)){ selector = selector.slice(1,selector.length-1); var eles = document.getElementsByTagName("*"); selector = selector.split("="); var att = selector[0]; var value = selector[1]; if (value) { for (var i = 0; i < eles.length; i++) { if(eles[i].getAttribute(att)==value){ return eles[i]; } } }else{ for (var i = 0; i < eles.length; i++) { if(eles[i].getAttribute(att)){ return eles[i]; } } } }
本視頻主講老師講課較為有激情,講課語氣慷慨激昂,能夠充分調動學生的學習積極性以及學習的欲望,在不知不覺中學會所有知識點。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com