詳解js中class的多種函數封裝方法_javascript技巧
本文實例講解了js中class的多種函數封裝方法，分享給大家供大家參考，具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于class的多种函数封装</title>
<style>
body{
margin: 0;
}
li{
height: 20px;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="list">
<li class="in abc ab "></li>
<li class="in ac b "></li>
<li class="in a "></li>
<li class="in acb "></li>
<li class="in ba "></li>
<li class="abc"></li>
</ul>
</div>
<script>
//数组的indexOf方法封装
function indexOf(arr,value,start){
//如果不设置start,则默认start为0
if(arguments.length == 2){
start = 0;
}
//如果数组中存在indexOf方法，则用原生的indexOf方法
if(arr.indexOf){
return arr.indexOf(value,start);
}
for( var i = 0; i < arr.length; i++){
if(arr[i] === value){
return i;
}
}
return -1;
}
//数组去重方法封装
function noRepeat(arr){
var result = [];
for( var i = 0; i < arr.length; i++){
if(indexOf(result,arr[i]) == -1){
result.push(arr[i]);
}
}
return result;
}
//inArray方法封装
function inArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(arr[i] === value){
return true;
}
}
return false;
}
//去除首尾空格函数封装
function trim(arr){
var result = arr.replace(/^\s+|\s+$/g,'');
return result;
}
//getElementsByClassName函数封装
function getElementsByClassName(parentObj,classStr){
var result = [];
var objs = parentObj.getElementsByTagName('*');
//如果classStr用空格分隔，则表示class必须同时满足才有效
var targetArr1 = noRepeat(trim(classStr).split(/\s+/));
//如果classStr用逗号分隔，则表示class只要有一个满足就有效
var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));
if(classStr.indexOf(',') == -1 ){
//用空格分隔或者只有一个class
label: for(var i = 0; i < objs.length; i++){
var arr = noRepeat(trim(objs[i].className).split(/\s+/));
for( var j = 0; j < targetArr1.length; j++){
if(!inArray(arr,targetArr1[j])){
continue label;
}
}
result.push(objs[i]);
}
return result;
}else{
//用逗号分隔
label: for(var i = 0; i < objs.length; i++){
var arr = noRepeat(trim(objs[i].className).split(/\s+/));
for( var j = 0; j < targetArr2.length; j++){
if(inArray(arr,targetArr2[j])){
result.push(objs[i]);
continue label;
}
}
}
return result;
}
}
//addclass函数封装
function addClass(obj,classStr){
var array = noRepeat(trim(obj.className).split('\s+'));
if(!inArray(array,classStr)){
array.push(classStr);
}
obj.className = array.join(' ');
return obj;
}
//removeclass函数封装
function removeClass(obj,classStr){
var array = noRepeat(trim(obj.className).split('\s+'));
var index = indexOf(array,classStr);
if(index != -1){
classStr.splice(index,1);
obj.className = classStr.join(' ');
}
return obj;
}
//toggleClass函数封装
function toggleClass(obj,classStr){
var array = noRepeat(trim(obj.className).split('\s+'));
if(inArray(array,classStr)){
removeClass(obj,classStr);
}else{
addClass(obj,classStr);
}
}
</script>
</body>
</html>
希望本文所述對大家學習javascript程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
golang函數動態建立新函數的技巧
Apr 25, 2024 pm 02:39 PM
Go語言提供了兩種動態函數創建技術：closures和反射。 closures允許存取閉包作用域內的變量，而反射可使用FuncOf函數建立新函數。這些技術在自訂HTTP路由器、實現高度可自訂的系統和建置可插拔的元件方面非常有用。
C++ 函數命名中參數順序的考慮
Apr 24, 2024 pm 04:21 PM
在C++函數命名中，考慮參數順序至關重要，可提高可讀性、減少錯誤並促進重構。常見的參數順序約定包括：動作-物件、物件-動作、語意意義和遵循標準函式庫。最佳順序取決於函數目的、參數類型、潛在混淆和語言慣例。
excel函數公式大全
May 07, 2024 pm 12:04 PM
1. SUM函數，用於對一列或一組單元格中的數字進行求和，例如：=SUM(A1:J10)。 2、AVERAGE函數，用於計算一列或一組儲存格中的數字的平均值，例如：=AVERAGE(A1:A10)。 3.COUNT函數，用於計算一列或一組單元格中的數字或文字的數量，例如：=COUNT(A1:A10)4、IF函數，用於根據指定的條件進行邏輯判斷，並返回相應的結果。
C++ 函式預設參數與可變參數的優缺點比較
Apr 21, 2024 am 10:21 AM
C++函數中預設參數的優點包括簡化呼叫、增強可讀性、避免錯誤。缺點是限制靈活性、命名限制。可變參數的優點包括無限彈性、動態綁定。缺點包括複雜性更高、隱式型別轉換、除錯困難。
C++ 函式回傳參考型別有什麼好處？
Apr 20, 2024 pm 09:12 PM
C++中的函數傳回參考類型的好處包括：效能提升：引用傳遞避免了物件複製，從而節省了記憶體和時間。直接修改：呼叫方可以直接修改傳回的參考對象，而無需重新賦值。程式碼簡潔：引用傳遞簡化了程式碼，無需額外的賦值操作。
AMD 'Strix Halo” FP11 封裝尺寸曝光：和英特爾 LGA1700 相當，比 Phoenix 大 60%
Jul 18, 2024 am 02:04 AM
本站7月9日訊息，AMDZen5架構「Strix」系列處理器會有兩種封裝方案，其中較小的StrixPoint將採用FP8封裝，而StrixHalo將會採用FP11封裝。圖源：videocardz訊息源@Olrak29_最新曝料稱StrixHalo的FP11封裝尺寸為37.5mm*45mm（1687平方毫米），和英特爾AlderLake、RaptorLakeCPU的LGA-1700封裝尺寸相同。 AMD最新的PhoenixAPU採用FP8封裝方案，尺寸為25*40mm，這意味著StrixHalo的F
自訂 PHP 函數和預定義函數之間有什麼區別？
Apr 22, 2024 pm 02:21 PM
自訂PHP函數與預定義函數的差異在於：作用域：自訂函數僅限於其定義範圍，而預定義函數可在整個腳本中存取。定義方式：自訂函數使用function關鍵字定義，而預先定義函數則由PHP核心定義。參數傳遞：自訂函數接收參數，而預先定義函數可能不需要參數。擴充性：自訂函數可以根據需要創建，而預定義函數是內建的且無法修改。
