Dieses Mal werde ich Ihnen die Kapselung einer Funktion vorstellen, die den Textinhalt eines Elements abrufen kann. Was sind die Vorsichtsmaßnahmen für die Kapselung einer Funktion, die den Textinhalt eines Elements abrufen kann? Ein praktischer Fall, werfen wir einen Blick darauf.
Ziel: Alle Geschwister + Elementknoten eines Elements abrufen
S1 Den übergeordneten Elementknoten eines Elements + alle seine untergeordneten Knoten abrufen
S2 deklariert das zurückzugebende Pseudo-Array-Objekt
S3 entfernt den von ihm übergebenen Elementknoten
S4 verwendet array.length, um den Array-Inhalt per Index zu übergeben (wenn i verwendet wird, ist es möglich, i zu überspringen , nicht nach Index geordnet)
S5 Dieses Pseudo-Array zurückgeben
<body> <ul> <li id="item1">选项1</li> <li id="item2">选项2</li> <li id="item3">选项3</li> <li id="item4">选项4</li> <li id="item5">选项5</li> </ul> </body>
Ziel: Klassen hinzufügen/entfernen zu Elemente in Stapeln Name
S1 Durchlaufen des Schlüsselwerts des Objekts
S2 Wenn der Wert des Klassennamens wahr ist, fügen Sie den Klassennamen hinzu; andernfalls entfernen Sie
//S5 封装为函数(API)
function getSiblings(node){
var allChildren = node.parentNode.children; //S1 获取li的父元素节点 + 其所有子节点
var array = {length:0}; //S2 声明将要返回的伪数组对象
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // S3 去除本身传入的元素节点
array[array.length] = allChildren[i]; // S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
array.length += 1;
}
}
// console.log(array); // {0:li#item1, 1:li#item2......}
return array; // S6 返回这个伪数组
}function addClass(node, classes){
// var classes = {'a':true, 'b':false, 'c':true} //S1 构造要传入的类名对象
for (let key in classes){ //S2 遍历对象的key值
value = classes[key];
// if (value){ //S3 当类名的值为ture时，添加类名
// node.classList.add(key);
// }else{
// node.classList.remove(key);
// }
// 以上 if/else可以优化为
var methodName = value ? 'add':'remove';
node.classList[methodName](key);
}
}` ist.
Die aufrufende Methode ist mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
und die gewünschte Die aufrufende Methode ist item3.getSibling() / item3.addClass('['a', 'b'])
window.mydom = {};
mydom.getSiblings = function getSiblings(node){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
mydom.addClass = function addClass(node, classes){
classes.forEach( (value)=> node.classList.add(value) );
}Node.prototype.getSiblings = function getSiblings(){
var allChildren = this.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== this){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
Node.prototype.addClass = function addClass(classes){
classes.forEach( (value)=> this.classList.add(value) );
}
// 参考效果
console.log( item3.getSiblings() )window.Node2 = function(node){ //要挂载到全局window上，才能直接访问
return {
getSiblings: function(){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0 ; i < allChildren.length; i++){
if (allChildren[i] !== node){
array[array.length] = allChildren[i];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//参考效果
node2 = Node2(item3);
console.log( node2.getSibling() );
node2.addClass( ['a', 'b', 'c'] )window.jQuery = function(nodeOrSelector){
let node;
if (typeof nodeOrSelector === 'string'){ //类型检测
node = document.querySelector(nodeOrSelector); //只支持返回一个节点
} else {
node = nodeOrSelector;
}
return{
getSibligs: function(){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0 ; i < allChildren.length; i++){
if (allChildren[i] !== node){
array[array.length] = allChildren[i];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//调用效果
var node2 = jQuery('#item3');
node2.getSibling();
node2.addClass(['red', 'c'])window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// for (let i = 0; i < nodes.length; i++){
// classes.forEach( (value) => nodes[i].classList.add(value) );
// }
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
return nodes
}
//调用效果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung der Array-Prototyp-Methode in js
Das obige ist der detaillierte Inhalt vonKapselt eine Funktion, die den Textinhalt eines Elements abrufen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So ermitteln Sie den Maximal- und Minimalwert eines Array-Elements in Java
Der Unterschied zwischen insertbefore und before
hat eine eigene Grundstücksnutzung
Einführung in den Öffnungsort von Windows 10
Kosten für die Servermiete
Der Unterschied zwischen MySQL und SQL_Server
Bitcoin-Preis
So posten Sie Text in WeChat Moments
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
