JavaScript，封裝庫--連綴

?

?

學習要點：

1.連綴介紹

2.改寫庫對象

?

本章我們重點來介紹，在調用庫的時候，我們需要能夠在前臺調用的時候可以同時設置多個操作，比如設置CSS，設置innerHTML，設置click事件等等。那么本節課來討論這個問題。

?

一．連綴介紹

所謂連綴，最簡單的理解就是一句話同時設置一個或多個節點兩個或兩個以上的操作。比如：

$().getId('box').css('color', 'red').html('標題').click(function () {alert('a')});

連綴的好處，就是快速方便的設置節點的操作。

?

二．改寫庫對象

如果是實現操作連綴，那么我們就需要改寫上一節課的對象寫法：var Base = {}，這種寫法無法在它的原型中添加方法，所以需要使用函數式對象寫法：

封裝庫代碼

/***feng_zhuang_ku_1.0版本，js封裝庫，2016/12/29日：林貴秀**//** 每次調用$創建庫對象,使其每次調用都是獨立的對象**/ var $ = function () {return new feng_zhuang_ku(); };/***定義封裝庫構造函數，創建庫對象**/ function feng_zhuang_ku () {/**對象說明：* this表示對象本身* 使用庫，首先要 var $ = new feng_zhuang_ku(); 首先要new創建對象* 再在創建的對象下調用方法或者屬性* * 大綱：* 獲取元素標簽開始，行號18* 連綴-元素節點操作開始，行號64* * **//**------------------------------------------------獲取元素標簽開始--------------------------------------------**//**獲取元素標簽說明：* jie_dian屬性，保存獲取到的元素節點，返回數組,* huo_qu_id()方法，通過id獲取元素標簽，適用于獲取單個節點，* huo_qu_name_zhi()方法，通過元素name值獲取指定元素，適用于獲取表單元素,* huo_qu_name()方法，通過標簽名稱獲取相同標簽名的元素，適用于獲取多個相同元素節點,**//** jie_dian屬性，創建數組，初始化，保存獲取到的元素節點，返回數組**/this.jie_dian = [];/** huo_qu_id()方法,通過id獲取元素標簽，參數是id值，將獲取到的元素對象添加到，jie_dian屬性,適用于獲取單個節點**/this.huo_qu_id = function (id) {this.jie_dian.push(document.getElementById(id));return this;};/** huo_qu_name_zhi()方法，通過元素name值獲取指定元素，參數是元素name值，返回元素相同name值對象集合，* 循環元素集合，將每次循環到的元素對象添加到 jie_dian屬性，適用于獲取表單元素**/this.huo_qu_name_zhi = function (name) {var name_zhi = document.getElementsByName(name);for (var i = 0; i < name_zhi.length; i ++){this.jie_dian.push(name_zhi[i]);}return this;};/** huo_qu_name()方法，通過標簽名稱獲取相同標簽名的元素，參數是標簽名稱，返回對象集合* 循環元素集合，將每次循環到的元素對象添加到 jie_dian屬性，適用于獲取多個相同元素節點**/this.huo_qu_name = function (tag) {var name = document.getElementsByTagName(tag);for (var i = 0; i < name.length; i ++){this.jie_dian.push(name[i]);}return this;};/**------------------------------------------------獲取元素標簽結束--------------------------------------------**//**------------------------------------------------連綴-元素節點操作開始---------------------------------------**//**連綴-元素節點操作說明：* css()方法，給獲取到的元素設置行內css樣式* wen_ben()方法，給獲取到的元素設置文本，參數是要設置的文本字符串* click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），**//** css()方法，給獲取到的元素設置行內css樣式,兩個參數，參數1樣式名稱，參數2樣式值* 循環jie_dian屬性里的節點，將每次循環的節點添加css樣式**/this.css = function (attr,value) {for (var i = 0; i < this.jie_dian.length; i ++){this.jie_dian[i].style[attr] = value;}return this;};/** wen_ben()方法，給獲取到的元素設置文本，參數是要設置的文本字符串，* 循環jie_dian屬性里的節點，將每次循環的節點添加元素文本**/this.wen_ben = function (str) {for (var i = 0; i < this.jie_dian.length; i ++){this.jie_dian[i].innerHTML = str;}return this;};/** click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），* 循環jie_dian屬性里的節點，將每次循環的節點添加元素點擊事件**/this.click = function (fu) {for (var i = 0; i < this.jie_dian.length; i ++){this.jie_dian[i].onclick = fu;}return this;};/**------------------------------------------------連綴-元素節點操作結束---------------------------------------**/ }

前臺調用代碼

//前臺調用代碼 window.onload = function (){$().huo_qu_name('div').css('background-color','#ffff3e');$().huo_qu_name('p').css('color','#ff2128').css('background-color','#b2bbff').wen_ben('改變').click(function () {alert('a');}); };

?

總結

以上是生活随笔為你收集整理的第一百三十节，JavaScript，封装库--连缀的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。