js筆記：Js封裝庫——css選擇器
阿新 • • 發佈：2018-12-26
Js封裝庫——css選擇器
在css中我們可以很簡單地使用css選擇器來對節點物件進行選擇，並對其進行style設定。現在，我們想通過js對html的css樣式進行動態設定，想以css的形式進行設定，例如我們想通過$(‘#box p’)來選中id為’box’的節點物件的子節點中的p節點，我們應該怎麼來實現呢？
1.首先，建立幾個檔案：index.html、index.js、base.js
其中，index.html如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>部落格前端:下拉選單</title> <script src="index.js"></script> <script src="base.js"></script> </head> <body> <div id="box"> <p>yaodebian</p> <p id="yao">yaodebian</p> <p class="yao">yaodebian</p> </div> </body> </html>
2.接下來，我們往封裝庫檔案base.js中編寫我們所需要的css選擇器：
首先，我們需要建立一個物件用來封裝相應功能的程式碼：
function Base(selector) {};//其中的selector為咱們定義的選擇文字，如‘#box p’另外，我們定義一個函式來簡化執行css選擇器功能：
//封裝物件初始化
var $ = function (selector) {
return new Base(selector);
}以後我們進行節點動態選擇時即用$(‘#box p’)即可；
然後我們往Base方法中新增內容：
function Base(selector) { //建立一個數組，來儲存獲取的節點和節點陣列 this.elements = []; //如果selector為一個節點物件，偏將selector直接存放與Base物件中的elements陣列中 if(typeof selector=='object'){ this.elements.push(selector); alert(1); } else if(typeof selector=='string'){//若selector是一個字串，即我們的css選擇文字 var elements=selector.split(' ');//將層次分開，如’#box p’分成兩個層次#box和p var parentNode=[];//用來儲存上一層次的節點陣列 var target=[];//目標節點陣列(即我們要選定的節點物件列表) parentNode.push(document);//初始狀態下parentNode為document物件 for(var i=0;i<elements.length;i++){//層次遍歷 switch(elements[i].charAt(0)){//判斷選擇字首(‘#’、’.’或’’(沒有字首，即標籤名)) case '#'://id選擇器 target=[]; if(this.getId(elements[i].substring(1))){//直接獲取該節點物件並存於target中，其中的elements[i].substring(1)即將字首去掉 target.push(this.getId(elements[i].substring(1))); } parentNode=target;//為下一層儲存上層節點列表(如果有下一層的話) break; case '.'://class選擇器 target=[]; //對於上一層的每一個節點物件，我們都得從中查詢遍歷此層節點 for(var j=0;j<parentNode.length;j++){ var temp=this.getClass(elements[i].substring(1),parentNode[j]); for(var a=0;a<temp.length;a++){ target.push(temp[a]); } } parentNode=target; break; default://元素選擇器 target=[]; for(var j=0;j<parentNode.length;j++){ var temp=this.getTagName(elements[i],parentNode[j]); for(var a=0;a<temp.length;a++){ target.push(temp[a]); } } parentNode=target; } } this.elements=target; } } //獲取ID節點 Base.prototype.getId = function (id) { return document.getElementById(id); }; //注：getElementById是document獨有的方法，即我們不可以用任意一元素節點物件呼叫該方法 //獲取元素節點 Base.prototype.getTagName = function (tag,parentNode) { var tags =parentNode.getElementsByTagName(tag);//注：tags是一個數組 var target=tags; // for (var i = 0; i < tags.length; i ++) { // target.push(tags[i]); // } return target; }; //獲取特定class值的元素節點 Base.prototype.getClass=function(className,parentNode){ var all=parentNode.getElementsByTagName('*');//獲取parentNode下的所有元素子節點 var target=[]; for(var i=0;i<all.length;i++){ if(all[i].className==className){ target.push(all[i]); } } return target; } //設定元素樣式，同時獲取某元素的某屬性的值 Base.prototype.css = function (attr, value) { for (var i = 0; i < this.elements.length; i ++) { if(arguments.length==1){ return getStyle(this.elements[i],attr); } this.elements[i].style[attr] = value; } return this;//為了實現連綴而返回this }
3.在index.js中我們使用css選擇器：
window.onload=function(){
$('#box #yao').css('color','red');
}執行以上程式，html檔案中<p id="yao">yaodebian</p>節點被選中，裡面的內容變為紅色