recherche

Maison  >  Article  >  interface Web  >  Encapsule une fonction qui peut obtenir le contenu textuel d'un élément

Encapsule une fonction qui peut obtenir le contenu textuel d'un élément

php中世界最好的语言
php中世界最好的语言original
2018-05-24 15:19:372078parcourir

Cette fois, je vais vous présenter l'encapsulation d'une fonction pouvant obtenir le contenu textuel d'un élément. Quelles sont les précautions pour encapsuler une fonction pouvant obtenir le contenu textuel d'un élément. Voici. un cas pratique, jetons un coup d'oeil.

A.1 Étapes logiques

Objectif : Obtenir tous les frères et sœurs + les nœuds d'élément d'un élément

S1 Obtenir le nœud d'élément parent d'un élément + tous ses nœuds enfants
S2 déclare l'objet pseudo-tableau à renvoyer
S3 supprime le nœud d'élément passé en lui-même
S4 utilise array.length pour transmettre le contenu du tableau par indice (si i est utilisé, il est possible de sauter i , pas par indice Commandé)
S5 Renvoyer ce pseudo tableau

A.1 Code spécifique

<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>
//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 返回这个伪数组
    }

A.2 Étapes logiques

Objectif : Donner des éléments par lots Ajouter/supprimer le nom de la classe

S1 Parcourir la valeur clé de l'objet
S2 Lorsque la valeur du nom de la classe est vraie, ajoutez le nom de la classe sinon, supprimez ;

A.2 Code spécifique 

function addClass(node, classes){
    // var classes = {&#39;a&#39;:true, &#39;b&#39;:false, &#39;c&#39;: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 ? &#39;add&#39;:&#39;remove&#39;;
        node.classList[methodName](key);
    }
}

B Ajoutez l' espace de noms , qui est 

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) );
}

`
La méthode d'appel est mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
et La méthode d'appel souhaitée est item3.getSibling() / item3.addClass('['a', 'b'])

C.1 this+prototype chain

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() )

C.2 node2 function_object mode

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'] )

Simulation C.3 Un jQuery simplifié

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'])

C.4 prend en charge le passage d'un/de plusieurs nœuds

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(&#39;ul>li');
node2.addClass( ['blue'] );

D Ajouter d'autres fonctions

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){
        // 更好的写法是
        classes.forEach( (value) => {
            for (let i=0; i<nodes.length; i++){
                nodes[i].classList.add(value);
            }
        })
    }
    // 获取元素节点文本内容
        // S1 遍历元素节点的伪数组;
        // S2 获取其文本内容，并推送到存储的 数组;
        // S3 返回数组
    nodes.getText = function(){
        var texts = [];
        for (i = 0; i < nodes.length; i++){
            texts.push(nodes[i].textContent);    //获取元素节点内容并推入到数组
        }
        return texts
    }
    // 设置元素节点文本内容
        // S1 遍历元素节点的伪数组;
        // S2 设置其文本内容为传入的参数内容
    nodes.setText = function(text){
        for (i = 0 ; i < nodes.length; i++){
            nodes[i].textContent = text;
        }
    }
    // 合并为一个接口
        //  S1 判断是否传入了参数, 传入了就是设置，没传入就是读取
    nodes.text = function(text){
        if (text === undefined){
            var texts = [];
            for (i = 0; i < nodes.length; i++){
                texts.push(nodes[i].textContent);
            }
            return texts
        } else {
            for (i = 0 ; i < nodes.length; i++){
            nodes[i].textContent = text;
            }
        }
    }
    return nodes
}
// 调用结果
var node2 = jQuery(&#39;ul>li');
node2.addClass( ['blue'] );
// 获取文本内容
    // var text = node2.text();
    // console.log(text);
// 设置文本内容
node2.text('hi');

Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la méthode de prototype de tableau dans js

La bibliothèque de dessins EasyCanvas est utilisée dans pratique dans le développement de projets Pixeler Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémentation du transfert de valeur vers une page toutes les N secondes basée sur la technologie Jquery ajaxArticle suivant：Implémentation du transfert de valeur vers une page toutes les N secondes basée sur la technologie Jquery ajax

Articles Liés

Voir plus