jQuery扩展-noconflict

Extendsindex.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../../Scripts/jquery-3.4.1.min.js"></script>
    <script src="myJquery.js"></script>
    <script src="Extendsindex.js"></script>
</head>
<body>
    <div ></div>
    <!--noconflict-->
    <div>Hello</div>
    <button id="btn">按钮</button>
</body>
</html>

Extendsindex.js

//$(document).ready(function () {//文档加载完毕
//    $.myjq();//方式1
//    $("div").myjq();

//    //noconflict
//    $("#btn").on("click", function () {
//        $("div").text("new Hello");
//    });
//});

$.noConflict();//后续无需再使用美元符号，美元符号变回jQuery
jQuery(document).ready(function () {//文档加载完毕
    //noconflict
    jQuery("#btn").on("click", function () {
        jQuery("div").text("new Hello");
    });
});

myJquery.js　

//拓展
$.myjq = function () {
    alert("Hello myjQuery");
}
//第二种方式
$.fn.myjq = function () {
    $(this).text("Hello");//调用此函数，并添加内容
}

　　

posted @ 2023-05-05 22:13  它的眼角开过光  阅读(12)  评论(0)  编辑  收藏  举报