JQuery概念及其简单的原理

news/2024/7/10 23:40:53 标签: JQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

原本的方法

<head>
    <meta charset="UTF-8">
    <title>01-自定义js框架</title>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        //1. 根据id获取元素对象
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");

        //2. 获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);

    </script>
</body>
</html>

使用封装方法,根据id获取元素对象

<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>

        var div1 = get("div1");
        var div2 = get("div2");

        //2. 获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);

        //封装方法,根据id获取元素对象
        function get(id) {
            var obj = document.getElementById(id);
            return obj;
        }

    </script>
</body>

运用框架的思想,把 刚刚封装起来的方法存在另一个单独的js文件上,然后在需要用到的时候调用它

//封装方法,根据id获取元素对象
        function get(id) {
            var obj = document.getElementById(id);
            return obj;
        }

在html页面调用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-自定义js框架</title>
    <script src="./Js/Jquery1.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>

        var div1 = get("div1");
        var div2 = get("div2");

        //2. 获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);
    </script>
</body>
</html>

运行结果
在这里插入图片描述

在这里插入图片描述


http://www.niftyadmin.cn/n/1782320.html

相关文章

H3C MSR双ADSL线路策略路由

技术要点&#xff1a;H3CMSR双ADSL线路策略路由需求&#xff1a;2根电信ADSL&#xff0c;实现内网奇数和偶数IP各走1根ADSL设备&#xff1a;H3CMSRV5平台命令脚本和重点注释&#xff1a;#aclnumber3000rule1permitipsource192.168.1.00.0.0.255#interfaceDialer1natoutbound300…

谨慎的沉默就是精明的回避

加措活佛-慈爱基金(jiacuo) 不要轻易和人发生争执&#xff0c;当有人和我们争执时&#xff0c;就让他赢&#xff0c;因为我们并没有因此而损失什么。所谓的赢&#xff0c;他又能赢到什么&#xff1f;得到什么呢&#xff1f;所谓的输&#xff0c;你又输到什么&#xff1f;失去什…

JQuery 快速入门

步骤 下载JQuery导入JQuery的Js文件使用 JQuery文件放在Web文件目录下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>JQuery快速入门</title><script src"./js/jquery-3.3.1.js&q…

CISCO3925双电信光纤策略路由

技术要点&#xff1a;CISCO3925双电信光纤策略路由需求&#xff1a;指定2个网段走G0/0口按照策略路由出访外网&#xff1b;剩余网段走G0/1口按照默认路由出访外网。设备&#xff1a;CISCO3925interfaceGigabitEthernet0/0ipaddress1.1.1.1255.255.255.248ipnatoutsideipvirtual…

当C++遇到iOS应用开发---Dict集合

在Object-c中&#xff0c;字典&#xff08;KEY/VALUE&#xff09;使用NSDictionary 和NSMutableDictionary(可变长)。使用语法如下&#xff1a;NSDictionary *dict [NSDictionary dictionaryWithObjectsAndKeys:"value1","key1","value2","…

js解析Json字符串的方法

要把一个xml字符串转&#xff08;“1,2,3,4,5,6,7,8,1,2”&#xff09;换成数组的形式&#xff0c;每个值都应该是number类型的&#xff0c;想当然的就用了split方法&#xff0c;结果。。。问题来了&#xff0c;服务器要求数组的值是数字&#xff0c;而split是字符方法&#xf…

JQuery : 事件绑定入口函数样式控制

事件绑定 <head><meta charset"UTF-8"><title>JQuery快速入门</title><script src"./js/jquery-3.3.1.js"></script> </head> <body> <input type"button" value"点我" id"b…

spring servlet3.0 fragment aop 问题

2019独角兽企业重金招聘Python工程师标准>>> 以前没有搞过 servlet fragment 和 spring 的整合 巨坑 今天在spring的时候, 由于自己这部分开发的有AOP 需求, 于是在spring的配置文件中加入 AOP 配置, 结果 切面的执行次数 变成了4次 坑 调试 系统的 AOP config …