Java Web实战详细教程（十三）jQuery的使用（JS和JQ对比）

        jQuery是一个非常优秀的JavaScript框架，使用jQuery可以轻松的实现JavaScript DOM操作。
        使用HBulider新建一个静态Web项目，快速学习一下jQuery的使用。
        我们通过一个案例，来对比JavaScript和jQuery的异同。在页面上开发一个div，里面有“你好”这个字符串，下面一个按钮，点击按钮，可以实现“你好”，变成“hello”。
效果图如下所示：
在这里插入图片描述
点击后：

使用JavaScript实现如下所示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function change(){
      
      
           let obj=document.getElementById("mes");
           obj.innerText="Hello";
        }
    </script>
</head>
<body>

<div id="mes">你好</div>
<button id="btn" onclick="change()">点击</button>
</body>
</html>

使用JavaScript实现的思路是，在标签的onclick事件属性上设置JavaScript函数change()，该函数里面，使用JavaScript DOM编程提供的document对象进行元素的查找，该对象提供了如下结果常用方法，以供开发者找到页面中的HTML元素：

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
document.getElementsByClassName()

找到该元素后，使用JavaScript DOM给其设置的属性进行赋值，即可实现页面的渲染。

使用jQuery实现如下所示：
注意，使用jQuery实现要引入jQuery.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        $().ready(function(){
    
    
            $("#btn").click(function(){
    
    
                $("#mes").text("Hello");
            })
        })
    </script>
</head>
<body>
<div id="mes">你好</div>
<button id="btn" >点击</button>
</body>
</html>

        使用jQuery实现的思路是，在文档加载成功后，通过jQuery的选择器找到某个HTML元素，给该元素绑定上事件函数，在该函数中，通过一个传递一个匿名函数对象，实现业务逻辑。jQuery中一般提供方法的形式，实现页面的渲染，符合封装思想。
        对比看到了两者的区别，可以明显感受到使用jQuery更加方便，当然前提是由一定的JavaScript DOM操作经验才能有更切身的体会，如果原生JS都没有写过多少，只会把JQ当做一个新技术，而造成学习的负担。
        学习jQuey主要是掌握它所提供的一系列的选择器：
在这里插入图片描述
——上图摘自《Spring Boot+Vue开发实战》 ^_

Java Web实战详细教程（十三）jQuery的使用（JS和JQ对比）

猜你喜欢