jQuery的扩展与noConflict小结

最新推荐文章于 2021-02-26 06:51:32 发布

上进的鸭

最新推荐文章于 2021-02-26 06:51:32 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/whoisleft/article/details/76383119

版权

<1>关于jQuery插件扩展

jQuery的写法让添加新功能很方便。新的功能的模块，也就是插件（pulg-in）。jQuery插件是普通的Javascript代码文件，在网页使用的时候，用<script>元素引入就好，就和其他的JavaScript类库一样。（要注意引入的顺序，书上提到的是，必须在jQuery之后引入插件，在插件被调用的前面，也就提一下，大家都知道的)。

有两种扩展方法

（1）使用$直接创建

在自定义插件的js文件myjQuery.js中：

$.myjq=function () {
    alert("hello myjquery");
}

然后再另外一个js文件中以jq的形式调用：

$(document).ready(function () {
        $.myjq();
})

代码myjq是自己命名的插件，function里面是函数内容;
（2）使用jQuery.fn来创建

开发jQuery的插件，必须要知道jQuery.fn是所有jQuery对象的原型对象。就相当于Java里的老祖宗类Object的对象，怎么说来着，叫多态思想，就是可以父类的变量可以指向子类对象。

在自定义插件的js文件myjQuery.js中：

$.fn.myjq=function () {
    $(this).text("hello");
}

然后成为jQuery的一种方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ExtendsIndex</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/myjQuery.js"></script>
    <script src="js/ExtendsIndex.js"></script>
</head>
<body>
    <div></div>
    <script>
        $("div").myjq();
    </script>
</body>
</html>

<2>关于noconfict

Query是有良好的封装，全局只有一个jquery对象，不会污染顶级域名。

jQuery默认使用"$"操作符，prototype等其他框架也是是使用"$"，于是，如果jQuery在其他库之后引入，那么jQuery将获得"$"使用权。这样的情况也很容易理解，毕竟JS是从上到下流式执行的。

同样的道理，如果在其他使用"$"的库之前引入jQuery，那么jQuery将不会占用"$"。

在jQuery中默认的是使用 $ 符号作为 jQuery 的简写（把jquery和$绑定），好比本来jquery("p")就可以写成$("p"); 如果添加了$.noConflict();之后就相当于解除了$与jquery的

绑定，解除之后你可以自己定义jquery的简写。

例如下列代码:

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

$有可能会被其他的框架冲突，此时应在JavaScript的顶部增加一句

$.noConflict();

接下来直接用jQuery替代$，解决冲突问题.

如果嫌名字长，还有以下操作

var m=jQuery.noConflict();

或者

var m=jQuery;

前者更佳;

初学jq，如果理解有误，请多指正

上进的鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫