jQuery

模拟jQuery框架做一些简单的封装

什么是封装？

打包？安装？组合？

我们将一些功能组装在一起，生成一些简单好用的API。复杂的API就不用在看了。

比如：我们通过元素的ID获取页面的一个元素DOM对象

原生的API：

document.getElementById(id)

我们封装之后的API：

// 封装
function $(id){
    return docuement.getElementById(id);
}
// 使用
var x = $(id);

jQuery库，里面存在大量的JavaScript函数

获取jQuery  

①//cdn 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>

②下载之后在项目导入

公式：$(selector).action() //选择器就是css的选择器,css中的选择器它全部能用！

案例：

<a href="#" id="test-jquery">点击</a>

$("#test-jquery").click(function(){

alert('hello,jQuery!');

})

文档工具站：https://jquery.cuishifeng.cn/index.html

案例：

//获取鼠标当前的坐标

mouse:<span id="mouseMove"></span>

<div id="divMove">移动鼠标</div>

//当网页元素加载完毕之后，响应事件

$(function(){

$('#divMove').mousemove(function (e){

$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)

})

});

//操作dom

<ul id="test-ul">

<li class="js">JavaScript</li>

<li name="python">Python</li>

</ul>

$('test-ul li[name=python]').text();//获得值

$('test-ul li[name=python]').text('123456');//设置值

//CSS的操作

$('test-ul li[name=python]').css({"color","red"});

//元素的显示和隐藏 本质是display：none;

$('test-ul li[name=python]').show();  $('test-ul li[name=python]').hide();

[1]获取页面元素的DOM对象

常用的API：

• getElementById()

• getElementsByTageName();

• getElementsByClassName();

• querySelector()

• querySelectorAll()

我们自己实现一个方法，命名为 $()，实现上面的所有的API的使用：

/**
 * 获取页面元素的DOM对象的方法
 * @param selector 
 *         1  #xxxx  表示是通过id查找元素，我直接返回一个对象   $("#box")
 *         2  .xxxxx  通过class名字获取一组元素
 *         3   其他的情况  标签   ".abc li"
 */
function $(selector){
    if(!selector){
        return document;// 如果没有指定selector，就返回document对象本身
    }
    // 判断是否是id选择器
    if(selector.indexOf("#")==0){
        return document.getElementById(selector.substr(1)); // #box
    }
    // 判断是否是类样式名称选择器  ".abc"
    if(selector.indexOf(".") == 0 && selector.indexOf(" ") == -1 && selector.indexOf(",") == -1){
        return document.getElementsByClassName(selector.substr(1));
    }
    // 其他选择器
    var elements = document.querySelectorAll(selector);
    if(elements.length == 1){
        return elements[0];// 如果只有一个就返回一个，
    }
    return elements;// 如果有多个就返回集合
    return undefined; // 返回原生的DOM对象数组
}

调用测试：

    <script>
        window.onload=function(){
            console.log($("#username"));
            console.log($(".abc"));
            console.log($("li"));
            console.log($("ul .def"))
        }
    </script>
    <input type="text" id="username">
    <ul>
        <li class="abc"></li>
        <li class="abc"></li>
        <li class="abc"></li>
        <li class="abc"></li>
        <li class="def"></li>
        <li class="def"></li>
        <li class="def"></li>
    </ul>
    <input type="text" class="def">

[2]操作这些元素的属性

原生的API：

var attValue = xxxDom.attrName ;
xxxDom.attrName = attrValue;

我们自己封装的方法：

方法1：常规属性操作

/**
 *  操作DOM对象的属性
 * @param {} dom 要处理的DOM对象 
 * @param {*} attrName 
 *        1  string类型，表示是属性的名字  checked
 *        2  object类型， 我们认识是要设置一组属性 {size:100,name:卡卡西}
 * @param {*} attrValue  可选的参数，如果没有传递，就是获取属性值，如果传递了就是设置属性值        
 *      
 */
function $attr(dom,attrName,attrValue){
    if(!dom || !attrName){
        return; //如果DOM不存在，直接返回
    }
    // 判断第二个参数是什么类型
    if((typeof attrName)== 'string'){  // attrName = "value"
        // 判断是否有第三个参数，如果有就是设置属性值，如果没有就是获取属性值
        if(attrValue){
            dom.setAttribute(attrName,attrValue);
        }else{
            return dom.getAttribute(attrName);
        }
        return;
    }else if((typeof attrName) == 'object'){  //attrName = {value:"漩涡鸣人",size:20,type:"button"}
        var obj = attrName;
        // 要同时设置多个属性值
        for(var aname in obj){// 可以通过for循环取出对象的属性和value
            dom.setAttribute(aname,obj[aname]);
        }
        return;
    }
    // 没有其他情况 报错
    throw "参数有误:"+attrName;
}

使用方法

    <input type="text" id="uname" value="宇智波佐助">
    <script>
        var unameDom = $("#uname");
        // 获取value的值
        var value = $attr(unameDom,"value");
        console.log("通过$attr获取的属性值："+value);
        // 设置value的值
        $attr(unameDom,"value","旗木卡卡西");
        // 设置多个属性值
        $attr(unameDom,{value:"漩涡鸣人",size:20,type:"button"})
        // 错误的调用方法
        // $attr(unameDom,123)
    </script>

特殊的属性操作： innerHTML，innerText, class

/**
 * 给一个或者多个元素...
 *  如果className存在就删除 如果不存在就添加
 * @param {*} obj 
 * @param {*} className 
 */
function $switchClass(obj,className){
    if(!obj || !className){
        return;
    }
    // 判断是一个还是一组？
    if(obj.length && obj.length > 1){
        //集合
        for(var x = 0;x < obj.length;x ++){
            if( obj[x].className.indexOf(className)!=-1){// 类名本身存在
                $removeClass( obj[x],className);
            }else{
                $addClass( obj[x],className);
            }
        }
    }else{
        if(obj.className.indexOf(className)!=-1){// 类名本身存在
            $removeClass(obj,className);
        }else{
            $addClass(obj,className);
        }
    }
}
/**
 * 给一个或者多个元素删除指定的类名
 * @param {*} obj 
 * @param {*} className 
 */
function $removeClass(obj,className){
    if(!obj || !className){
        return;
    }
    // 判断是一个还是一组？
    if(obj.length && obj.length > 1){
        //集合
        for(var x = 0;x < obj.length;x ++){
            obj[x].className = obj[x].className.replaceAll(className,"");
        }
    }else{
        obj.className = obj.className.replaceAll(className,"");
    }
}
/**
 * 给一个或者多个元素添加指定的类名
 * @param {*} obj  可以是一个对象，也可以是一组对象
 * @param {*} className 
 */
function $addClass(obj,className){
    if(!obj || !className){
        return;
    }
    // 判断是一个还是一组？
    if(obj.length && obj.length > 1){
        //集合
        for(var x = 0;x < obj.length;x ++){
            obj[x].className = (obj[x].className?obj[x].className:"") + " " + className;
        }

• 还没有人评论，欢迎说说您的想法！