JQuery介绍及引用

最新推荐文章于 2024-06-22 14:50:48 发布

m0_74518627

最新推荐文章于 2024-06-22 14:50:48 发布

阅读量1.4k

点赞数 20

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_74518627/article/details/135255500

版权

一.什么事jquery

jQuery 是一个快速、小巧且富有特色的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的设计目标是“写更少的代码，做更多的事情”。

jQuery 的主要特点：

跨浏览器兼容性：jQuery 解决了各种浏览器的兼容性问题，开发者无需担心不同浏览器的差异。
简化 HTML 文档遍历：使用 jQuery，可以轻松地选择和操作 HTML 元素。
简化事件处理：jQuery 提供了一种简单的方法来处理用户交互，如点击、悬停等。
动画和特效：jQuery 提供了一系列的动画方法，使动画效果更为容易实现。
Ajax 简化：使用 jQuery，无需编写复杂的 XMLHttpRequest 代码，就可以轻松实现异步数据交互。
链式操作：jQuery 支持链式操作，使代码更简洁、易读。

原生JavaScript（以下简称JS）在使用时确实存在一些局限性，主要可以归纳为以下几点：
无法添加多个入口函数（window.onload）：当需要为页面加载添加多个处理函数时，原生JS无法实现，后面的处理函数会覆盖前面的。
API名称过长且难以记忆：原生JS的API名字通常较长，如document.getElementById()，这增加了记忆的难度。
代码冗余：在使用原生JS进行某些操作时，可能会产生冗余的代码，例如对多个元素进行相同的操作需要分别写出每个元素的代码。
浏览器兼容性问题：原生JS中的某些方法或属性在不同浏览器中可能存在兼容性问题，开发者需要花更多的时间来处理这些问题。
容错率低：在原生JS中，如果前面的代码出现错误，后面的代码可能无法执行，容错性较差。

总结：这些问题可能会使开发过程变得复杂和耗时。然而，通过使用一些JS库（如jQuery）可以有效地解决这些问题，提高开发效率。

二. jquery的引用

要在网页中引用jQuery库，你需要从jQuery的官网或其他可靠的源下载jQuery库文件，然后将其放置在你的网站服务器上。之后，你可以在HTML文件中使用<script>标签来引用它。

以下是一个基本的引用示例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>页面标题</title>  
    <script src="path/to/jquery.min.js"></script>  
</head>  
<body>  
    <!-- 页面内容 -->  
</body>  
</html>

在上面的示例中，<script src="path/to/jquery.min.js"></script>标签指定了jQuery库文件的路径。你需要将其中的path/to/替换为实际的文件路径。确保在引用jQuery之前加载其他JavaScript代码，以确保页面中的脚本按照预期的顺序执行。

检查jQuery的引用是否正确

要检查jQuery的引用是否正确，你可以按照以下步骤进行操作：

打开你的HTML文件，找到引用jQuery的<script>标签。
检查src属性的值是否正确指向jQuery库文件的路径。确保路径是正确的，并且文件确实存在于指定的位置。
在浏览器中打开HTML文件，然后打开开发者工具（通常通过按F12键或右键单击页面并选择"检查"来打开）。
在开发者工具中，转到"控制台"选项卡。
在控制台中，尝试运行一些简单的jQuery代码，例如$(document).ready(function() { console.log("页面已加载"); });。
如果jQuery引用正确，控制台应该会显示"页面已加载"。如果没有显示任何内容或出现错误消息，则说明jQuery引用可能存在问题。
检查控制台中的错误消息，以获取更多关于问题的详细信息。

如果你仍然无法解决问题，可以尝试在浏览器中打开HTML文件时按F5键刷新页面，以确保浏览器加载最新的脚本文件。此外，确保你的HTML文件正确地引用了jQuery库文件，并且该文件在引用其他脚本之前加载。

使用jquery的简单方法

text和html的方法

jQuery对象的本质

jQuery对象的本质是dom对象的数组+jQuery提供的一系列的功能函数

实例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a03_JQuery/a02_DOM对象和JQuery对象.html</title>
    <script src="js/jquery-3.7.0.js"></script>
    <script>
        $(function(){
            var arr=[12,"abc",true];
            var $btns=$("button")
            alert(1);
        });
    </script>
</head>
<body>
    <button id="btn1">very Good!!</button>
    <button id="btn2">使用DOM</button>
    <button id="btn3">使用Jquery对象调用JQuery方法</button>
    <button id="btn4">使用jQuery对象调用DOM方法</button>
    
</body>
</html>