jQuery基础

jQuery是一个轻量级的，写得少、做得多的JavaScript函数库

目录

引入JQuery

jQuery的基本语法

jQuery选择器

jQuery事件

获取内容和属性

---

引入JQuery

在HTML页面中有两种方式可以引入jQuery：从官方下载jQuery库和使用CDN载入jQuery库。

jQuery官方下载网址。在下载页面中，有两个版本的jQuery可供下载。

Production version：用于实际网站中，已被精简和压缩。

Development version：用于测试和开发（未压缩，是可读的代码）。

下载完成后可以使用HTML的<script>标签引用它，示例代码如下：

<script src="jquery-3.5.1.min.js"></script>

如果不希望下载并存放jQuery，也可以通过CDN（内容分发网络）载入方式引用它。国内两个免费的CDN：Staticfile CDN和BootCDN。示例代码如下：

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>

 

jQuery的基本语法

通过jQuery可以查询HTML元素（selector），并对它们执行对应的“操作”（action）。基本语法格式如下：

$(selector).action()

示例：

$(this).hide()    // 隐藏当前元素

$("p").hide()    // 隐藏所有<p>元素

$("p.test").hide()    // 隐藏所有class="test"的<p>元素

$("#test").hide()    // 隐藏id="test"元素

大多数情况下，jQuery函数位于一个document ready函数中。

$(document).ready(function(){
    // 开始写jQuery代码
});

示例如下：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

这是为了防止文档在完全加载就绪之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。例如试图隐藏一个不存在的元素。

jQuery选择器

jQuery选择器允许对HTML元素组或单个元素进行操作。jQuery中所有选择器都以美元符号$()开头。

1、元素选择器

$("p")    // 在页面中选取所有<p>元素

2、#id选择器

$("#test")    // 选择id="test"的元素，因为id是唯一的，所以可以用于选择唯一的元素

3、.class选择器

$(".test")    // 选择class="test"的元素

不仅如此，jQuery选择器还可以组合各选器（可参考CSS的样式选择器的形式进行理解），还有一些其他的常用选择器，如：

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

$(this)    // 选择当前HTML元素

等。

jQuery事件

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

例如，在页面中指定一个单击事件，示例代码如下：

$("button").click(function(){
    $("p").hide();
});

 

获取内容和属性

jQuery中非常重要的功能就是操作DOM。jQuery提供了一系列与DOM相关的方法，这使得访问和操作元素及其属性变得很容易。

1、获得内容

可通过3个简单的jQuery方法操作DOM，获得内容。

$("#test").text()    // test()返回所选元素的文本内容。

$("#test").html()    // html()返回所选元素内容。

$("#input").val()    // val()返回表单字段的值。

以上3个方法在括号内加上参数值即为对应的设置方法，如：

var a=11;
$("#test").html(a);

var u='<p>Hello World!</p>' 
$("#test").html(u);

2、获得属性

jQuery的attr()方法可用于获取和设置属性值。语法格式如下：

attr("属性名")    // 获取属性值

attr("属性名", "属性值")    // 设置属性值

示例如下：

// 假设一个<a>标签的id为test

var url = $("#test").attr("href");    // 获得标签网址

var url = $("#test").attr("href", "http://www.baidu.com");    // 设置标签网址