JQuery与JS比较

最新推荐文章于 2024-05-07 11:07:47 发布

小栗子的普

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量200

点赞数 1

分类专栏： jQuery 文章标签： jQuery js 多库冲突对象转换

本文链接：https://blog.csdn.net/weixin_43885459/article/details/84779698

版权

jQuery 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1.添加事件函数

-JS

例 html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            
        }
    </style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="切换颜色" />
</body>
</html>

用JS实现这样一种功能，当点击按钮时，背景颜色变成绿色，再点击一下按钮，背景颜色切换成原来的颜色。JS有以下三种方法

① 在html代码中直接添加一个onclick事件，在JS中调用这个事件

html代码：

<input type="button" value="切换颜色" onclick="change1(this)"/>

JS代码

<script>
    var div1=document.getElementById("div1");
function change1(){

    if(div1.style.backgroundColor!="red"){
        div1.style.backgroundColor="red";
    }else{
        div1.style.backgroundColor="green";

    }
}
</script>

方法2 增加一个事件监听

html代码

<body>
<div id="div1"></div>
<input type="button" value="切换颜色" onclick="change1()" id="btn"/>

</body>

js代码

<script>
    var div1=document.getElementById("div1");
    var btn=document.getElementById('btn');
    btn.addEventListener('click',function(){
        if(div1.style.backgroundColor!="red"){
            div1.style.backgroundColor="red";
        }else{
            div1.style.backgroundColor="green";

        }
    })

</script>

3.匿名函数

html与第二个方法一样
js代码如下：

<script>
    var div1=document.getElementById("div1");
    var btn=document.getElementById('btn');
    btn.onclick=function(){
        if(div1.style.backgroundColor!="red"){
            div1.style.backgroundColor="red";
        }else{
            div1.style.backgroundColor="green";

        }
    }

</script>

三个方法的结果如下
点击一下按钮如下图
在这里插入图片描述

再点击一下如下图
在这里插入图片描述

2.jQuery

例：实现这样一种效果：当点击按钮时，div隐藏，再点击一次按钮，div就会出现
html 代码

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="切换颜色"  id="btn"/>

</body>

jQuery代码如下

<script src="../js/jquery-3.1.1.min.js"></script>
<script>
    $("#btn").click(function(){
       $("#div1").toggle();
   })
</script>

注：想使用jQuery，先引进jQuery，第一行就是一个引入；jQuery中想获取某个元素使用$();的形式
结果如下
当点击按钮时，div隐藏
在这里插入图片描述
再点击一次按钮，div又会出现

JS与jQuery对象相互转换

例：实现这样一种效果：当点击按钮时，div隐藏，再点击一次按钮，div就会出现
html 代码

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
<div id="div"></div>
<input type="button" value="切换颜色"  id="btn"/>

</body>

-jQuery对象转换为js对象代码如下

<script src="../js/jquery-3.1.1.min.js"></script>
<script>
    var jq = $("#btn");//jQuery获取元素
    var js = jq[0];//将jQuery对象转换为js对象
    js.onclick=function(){
        var div1 = $("#div1")[0];
        if(div1.style.display=="none"){
            div1.style.display="block";
        }else{
            div1.style.display="none";
        }
    }
</script>

-js对象转换为jQuery代码如下

<script src="../js/jquery-3.1.1.min.js"></script>
<script>
    var js = document.getElementById("btn");
    var jq = $(js);
    jq.click(function(){
    $(document.getElementById("div1")).toggle();//切换元素的可见状态，如果可见就隐藏；如果隐藏就可见
    })
</script>

jQuery如何解决多库冲突

如果代码中有多个数据库，而数据库的顺序如下

<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/prototype.js"></script>

此时$代表的不是jQuery，而是prototype，该如何解决这一问题，有三种方法，如下

<script>
    //jQuery解决多库问题
    //首先先放弃
    //方法1
    var $j = jQuery.noConflict();//jQuery放弃$(为了简便，可以定义一个变量);
    $j("#xcy").hide();//与上行一样
    //方法2
    jQuery("#xcy").hide();
    //方法3
    //匿名函数自调用jquery
    !function($){
        $("#xcy").hide();
    }(jQuery);
    //函数外部，$代表的不是jQuery，而是prototype
</script>

小栗子的普

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery与JS比较

1.添加事件函数-JS例 html代码如下&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #div1{
复制链接

扫一扫

专栏目录