Jquery——js库

1. jQuery 基础操作

jQuery 是一个快速、小巧的 JavaScript 库,设计用于简化 HTML 文档的遍历、事件处理、动画设计和 Ajax 交互。jQuery 使用户能够更快地编写 JavaScript 代码,并且能够更容易地处理 HTML 文档、事件、动画和 Ajax。

加载 jQuery

要使用 jQuery,首先需要在 HTML 文档中加载 jQuery 库。可以通过 CDN 或下载到本地来加载。

<!-- 通过 CDN 加载 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

选择器

jQuery 提供了强大的选择器,可以方便地选择 HTML 元素。

// 选择所有 p 元素
$("p")

// 选择 id 为 myId 的元素
$("#myId")

// 选择类名为 myClass 的元素
$(".myClass")

// 选择所有 div 元素
$("div")

2. jQuery 事件绑定

jQuery 提供了一个简单的方法来绑定事件到 HTML 元素。

// 绑定 click 事件到所有 p 元素
$("p").click(function() {
    alert("You clicked a paragraph!");
});

3. jQuery 操作内容、属性

jQuery 提供了方法来操作元素的内容和属性。

// 设置元素的文本内容
$("#myId").text("Hello, World!");

// 获取元素的文本内容
var text = $("#myId").text();

// 设置元素的 HTML 内容
$("#myId").html("<b>Hello, World!</b>");

// 获取元素的 HTML 内容
var html = $("#myId").html();

// 设置元素的属性
$("#myId").attr("class", "myClass");

// 获取元素的属性
var classValue = $("#myId").attr("class");

4. 样式与动画

jQuery 提供了方法来操作元素的样式和动画。

// 设置元素的 CSS 样式
$("#myId").css("color", "red");

// 淡入淡出动画
$("#myId").fadeIn();
$("#myId").fadeOut();

// 滑动动画
$("#myId").slideUp();
$("#myId").slideDown();

5. jQuery 创建与删除 JS 相关元素

jQuery 提供了方法来创建和删除元素。

// 创建新的 div 元素
var newDiv = $("<div></div>");

// 将新元素添加到 body 中
$("body").append(newDiv);

// 删除元素
$("#myId").remove();

6. jQuery 实现 Ajax 异步并跨域

jQuery 提供了 $.ajax() 方法来实现 Ajax 请求,支持跨域请求。

$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.log(error);
    }
});

7. jQuery 实现点击菜单

jQuery 可以用来实现点击菜单的功能。

<ul id="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

<script>
$(document).ready(function() {
    $("#menu li").click(function() {
        alert("You clicked: " + $(this).text());
    });
});
</script>

jquery比js更加简洁,并且更加强大。
在这里插入图片描述

相关推荐

  1. Numpy

    2024-04-02 14:12:05       24 阅读
  2. flask<span style='color:red;'>库</span>

    flask

    2024-04-02 14:12:05      10 阅读
  3. MXNet

    2024-04-02 14:12:05       4 阅读
  4. linux动态,静态

    2024-04-02 14:12:05       21 阅读
  5. 静态和动态

    2024-04-02 14:12:05       7 阅读

最近更新

  1. Uipath用计划任务启动 bat脚本语句

    2024-04-02 14:12:05       0 阅读
  2. 【C语言】归并排序算法实现

    2024-04-02 14:12:05       0 阅读
  3. Element-UI el-autocomplete带输入建议的输入框组件

    2024-04-02 14:12:05       0 阅读
  4. 正则表达式?: ?= ?! 的用法详解

    2024-04-02 14:12:05       0 阅读
  5. CSS中的display: flex;

    2024-04-02 14:12:05       0 阅读

热门阅读

  1. ES6中的Map与Set

    2024-04-02 14:12:05       5 阅读
  2. C语言中向函数中传递函数指针的方法

    2024-04-02 14:12:05       6 阅读
  3. 简单设计模式讲解

    2024-04-02 14:12:05       5 阅读
  4. C++命名空间详解

    2024-04-02 14:12:05       8 阅读
  5. 【Ubuntu】可配置环境变量位置

    2024-04-02 14:12:05       6 阅读
  6. 洛谷 1803.凌乱的yyy

    2024-04-02 14:12:05       5 阅读