首页 前端知识 JQuery介绍及引用

JQuery介绍及引用

2024-05-09 11:05:17 前端知识 前端哥 71 627 我要收藏

一.什么事jquery 

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

jQuery 的主要特点:

  1. 跨浏览器兼容性:jQuery 解决了各种浏览器的兼容性问题,开发者无需担心不同浏览器的差异。
  2. 简化 HTML 文档遍历:使用 jQuery,可以轻松地选择和操作 HTML 元素。
  3. 简化事件处理:jQuery 提供了一种简单的方法来处理用户交互,如点击、悬停等。
  4. 动画和特效:jQuery 提供了一系列的动画方法,使动画效果更为容易实现。
  5. Ajax 简化:使用 jQuery,无需编写复杂的 XMLHttpRequest 代码,就可以轻松实现异步数据交互。
  6. 链式操作: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的引用是否正确,你可以按照以下步骤进行操作:

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

如果你仍然无法解决问题,可以尝试在浏览器中打开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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7701.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!