JQuery与JS比较

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
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值