开源库类 jQuery

最新推荐文章于 2024-05-10 09:45:33 发布

原创最新推荐文章于 2024-05-10 09:45:33 发布 · 337 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍jQuery库的基本概念、特点及使用方法。jQuery是一个JavaScript函数库，简化了HTML文档的遍历、事件处理、动画等功能。文章详细解释了jQuery的安装、基本语法，并通过实例展示了如何隐藏不同类型的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，jQuery简介：

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery知识点：

html:裸体的人

css:穿了衣服的人

js:让人动起来

向页面添加jQuery库：

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

请注意，<script> 标签应该位于页面的 <head> 部分。

2，jQuery特点：

（1）快速获取文档元素

jQuery的选择机制构建与CSS选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了Javascript中获取页面元素的方式。

（2）提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡出淡入，元素移除等动态效果。

（3）创建AJAX无刷新页面

ALAX是异步的Javascript和ML的简称，可以开发出非常灵敏无刷新的网页。

3，jQuery的基本语法：

除了直接引用本地的jQuery库文件外，我们还可以使用CDN公共服务来引入jQuery。目前，像谷歌，微软，百度等公司都推出了公共的jQuery库的CND服务。

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

如何使用jQuery:

1，导入<script src="jquery-3.2.1.js"></script>

或者<script src="jquery-3.2.1.min.js"></script>

2，语法规则：$("")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       #nav{
           background-color: darkgray;
           width: 600px;
           height:40px;
           margin: 0 auto  ;
       }
       ul{
           list-style: none;}
       ul li{
           float: left;
           line-height:40px;
           text-align: center;
           position: relative;
       }
       a{
           text-decoration: none;
           color: blue;
            padding: 0  10px;
           display: block;
       }
       a:hover{
           background-color:green;
           color: #4bffe8;
       }
       ul li ul {
           position: absolute;
           top:40px;
           left:0px;
           display: none;
       }
       ul li ul li{
           float: none;
           background-color: #f7ff3d;
          margin-top: 2px;
       }

       ul li ul li a{
           background-color: hotpink;
       }
       ul li:hover ul{
           display: block;
       }
   </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a><li>
        <li><a href="#">课程大厅</a>
        <ul>
            <li><a href="#">javajqurrerjqurrer</a><li>
            <li><a href="#">jqurrer</a><li>
            <li><a href="#">js</a><li>
        </ul>
        <>
        <li><a href="#">学习中心</a>
        <ul>
            <li><a href="#">javajqurrerjqurrer</a><li>
            <li><a href="#">jqurrer</a><li>
            <li><a href="#">js</a><ul>
        </ul>
            <li>
            <li><a href="#">经典案例</a><li>
            <li><a href="#">关于我们</a><ul>
            </ul>

</div>
</body>
</html>