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、付费专栏及课程。

余额充值