前端----JQ

最新推荐文章于 2024-08-20 16:48:16 发布

码农不秃呀

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量107

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126880267

版权

JavaScript DOM遍历正则表达式元素查找 jQuery

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="ok">
        <div class="yes">
            <p>item1</p>
            <p>item2</p>
            <p>item3</p>
        </div>
        <div class="yes">
            <p>item1</p>
            <p>item2</p>
            <p>item3</p>
        </div>
    </div>
</body>
<script src="myJq.js"></script>
<script>
   var es= $("#ok .yes p")
   console.log(es);
</script>
</html>

//管理标签
//els:Array
function Ele(els){
    this.els=els||[];
}

//对外使用
function $(arg){
    return myjq(arg)
}
//arg="#ok .yes p"
function myjq(arg){
    //1.将字符串格式化
    var reg=/^\s+|\s+$/g;
    arg=arg.replace(reg,'');
    reg=/\s{2,}/g;
    arg=arg.replace(reg,' ');
    //2.分割字符串
    var arr=arg.split(' ');
    // arr=["#ok",".yes","p"]
    // 3.逐级找到对应的元素
    var els=getEls(arr);
    return new Ele(els);
}

 // arr=["#ok",".yes","p"]
function getEls(arr){
    var parent = [document];
    var children = [];

    for(var i=0;i<arr.length;i++){
        //拿到需要找元素的关键词
        var key=arr[i];
        // 遍历parent,从每一个父元素中寻找
        for(var j=0;j<parent.length;j++){
        var par=parent[j];
        children=children.concat(findEls(par,key));
    }
    parent=children;
    children=[];//务必置空

}
return parent;
}
function findEls(par,key){
       var c=key.substr(0,1);//截取首字符
       if(c === "#"){
        return [par.getElementById(key.substr(1))]
       }else if(c ==="."){
        var es=par.getElementsByClassName(key.substr(1));
        var arr =[];
        for(var i=0;i<es.length;i++){
            arr.push(es[i]);
        }
        return arr;
       }else{
        var es=par.getElementsByTagName(key);
        var arr =[];
        for(var i=0;i<es.length;i++){
            arr.push(es[i]);
       }
       return arr;
    }
}