JQuery基础语法小结

JQuery基础语法小结

JQuery是一套JavaScript库，能够帮助我们更方便地访问和处理文档对象模型（DOM），简化了JavaScript开发。本篇攻略将会介绍JQuery常用的基础语法。

引入JQuery库

在使用JQuery之前需要在网页中引入JQuery库，可以从官方网站上下载，也可以使用CDN加速服务。

<!-- 从官方网站引入 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 使用CDN加速服务 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

语法格式

JQuery语法格式为：$(selector).action()，即先选择元素，再操作元素。其中$为JQuery的简写，可以用JQuery替代。

常用选择器

JQuery有多种选择器，可以方便地选择DOM元素。以下是几种常用的选择器。

• ID选择器：通过id选择元素，以“#”开头。

$("#id")

• 类选择器：通过类名选择元素，以“.”开头。

$(".class")

• 元素选择器：通过标签名选择元素。

$("tagname")

• 后代选择器：选择元素的所有后代元素。

$("parent descendant")

• 子元素选择器：选择元素的直接子元素。

$("parent > child")

常用方法

JQuery提供了多种方法，可以用于操作DOM元素。

• 属性操作方法

通过attr()方法可以获取或设置HTML元素的属性值。

// 获取属性值
$("#ele").attr("attrname")
// 设置属性值
$("#ele").attr("attrname", "value")

• 类名操作方法

通过addClass()、removeClass()、toggleClass()方法可以添加、移除、切换类名。

// 添加类名
$("#ele").addClass("classname")
// 移除类名
$("#ele").removeClass("classname")
// 切换类名，如果存在则移除，不存在则添加
$("#ele").toggleClass("classname")

示例说明

以下是两个用JQuery实现的简单示例：

1. 点击按钮实现文本隐藏或显示。

HTML代码：

<p id="text">这是一些文本</p>
<button id="btn">隐藏/显示</button>

JavaScript代码：

$("#btn").click(function() {
    $("#text").toggle();
});

1. 当窗口滚动到一定位置时，显示GoTop按钮。

HTML代码：

<button id="goTop">Go Top</button>

JavaScript代码：

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $("#goTop").fadeIn();
    } else {
        $("#goTop").fadeOut();
    }
});