垦荒学园

简体中文

English

简体中文

English

切换主题

jQuery 基本语法和选择器 ​

在成功引入 jQuery 之后，我们就可以开始学习 jQuery 的基本语法和选择器了。jQuery 的语法简洁明了，易于学习和使用。

jQuery 语法基础 ​

1. jQuery 工厂函数 $ ​

jQuery 的核心是 $ 函数（也称为 jQuery 函数），它是 jQuery 的工厂函数，用于选择元素和创建 jQuery 对象。

javascript
// 基本语法
$(selector).action();
  • $：jQuery 的工厂函数
  • selector：选择器，用于选择 HTML 元素
  • action()：对选中的元素执行的操作

2. 文档就绪函数 ​

在操作 DOM 元素之前，需要确保文档已经完全加载。jQuery 提供了文档就绪函数来处理这种情况：

javascript
// 完整写法
$(document).ready(function() {
    // 你的代码
});

// 简写形式
$(function() {
    // 你的代码
});

// 使用箭头函数（ES6）
$(() => {
    // 你的代码
});

jQuery 选择器 ​

jQuery 选择器允许你选择和操作 HTML 元素。jQuery 选择器基于 CSS 选择器，但功能更加强大。

1. 基本选择器 ​

元素选择器 ​

选择所有指定类型的 HTML 元素：

javascript
// 选择所有 div 元素
$('div');

// 选择所有 p 元素
$('p');

// 选择所有 input 元素
$('input');

ID 选择器 ​

选择具有指定 ID 的元素：

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

类选择器 ​

选择具有指定类名的所有元素：

javascript
// 选择 class 为 "myClass" 的所有元素
$('.myClass');

通用选择器 ​

选择所有元素：

javascript
// 选择所有元素
$('*');

2. 层次选择器 ​

后代选择器 ​

选择作为指定元素后代的所有元素：

javascript
// 选择 div 内部的所有 p 元素
$('div p');

// 选择 .container 内部的所有 .item 元素
$('.container .item');

子元素选择器 ​

选择作为指定元素直接子元素的所有元素：

javascript
// 选择 div 的直接子元素 p
$('div > p');

// 选择 .container 的直接子元素 .item
$('.container > .item');

相邻兄弟选择器 ​

选择紧接在指定元素后面的兄弟元素：

javascript
// 选择紧跟在 h1 后面的 p 元素
$('h1 + p');

// 选择紧跟在 .header 后面的 .content 元素
$('.header + .content');

通用兄弟选择器 ​

选择指定元素后面的所有兄弟元素：

javascript
// 选择 h1 后面的所有 p 元素
$('h1 ~ p');

// 选择 .header 后面的所有 .content 元素
$('.header ~ .content');

3. 基本过滤选择器 ​

:first 选择器 ​

选择第一个匹配的元素：

javascript
// 选择第一个 p 元素
$('p:first');

// 选择第一个 .item 元素
$('.item:first');

:last 选择器 ​

选择最后一个匹配的元素：

javascript
// 选择最后一个 p 元素
$('p:last');

// 选择最后一个 .item 元素
$('.item:last');

:even 选择器 ​

选择索引为偶数的元素（从 0 开始）：

javascript
// 选择偶数行的 tr 元素
$('tr:even');

:odd 选择器 ​

选择索引为奇数的元素（从 0 开始）：

javascript
// 选择奇数行的 tr 元素
$('tr:odd');

:eq(index) 选择器 ​

选择索引等于指定值的元素：

javascript
// 选择索引为 2 的 li 元素
$('li:eq(2)');

:gt(index) 选择器 ​

选择索引大于指定值的元素：

javascript
// 选择索引大于 2 的 li 元素
$('li:gt(2)');

:lt(index) 选择器 ​

选择索引小于指定值的元素：

javascript
// 选择索引小于 2 的 li 元素
$('li:lt(2)');

4. 内容过滤选择器 ​

:contains(text) 选择器 ​

选择包含指定文本的元素：

javascript
// 选择包含 "Hello" 文本的 div 元素
$('div:contains("Hello")');

:empty 选择器 ​

选择不包含子元素的元素：

javascript
// 选择空的 td 元素
$('td:empty');

:has(selector) 选择器 ​

选择包含指定子元素的元素：

javascript
// 选择包含 p 元素的 div 元素
$('div:has(p)');

:parent 选择器 ​

选择包含子元素的元素：

javascript
// 选择包含子元素的 td 元素
$('td:parent');

5. 可见性过滤选择器 ​

:hidden 选择器 ​

选择隐藏的元素：

javascript
// 选择隐藏的元素
$(':hidden');

:visible 选择器 ​

选择可见的元素：

javascript
// 选择可见的元素
$(':visible');

6. 属性选择器 ​

[attribute] 选择器 ​

选择具有指定属性的元素：

javascript
// 选择具有 title 属性的元素
$('[title]');

// 选择具有 href 属性的元素
$('[href]');

[attribute=value] 选择器 ​

选择属性值等于指定值的元素：

javascript
// 选择 type 属性等于 "text" 的 input 元素
$('input[type="text"]');

// 选择 class 属性等于 "button" 的元素
$('[class="button"]');

[attribute!=value] 选择器 ​

选择属性值不等于指定值的元素：

javascript
// 选择 type 属性不等于 "submit" 的 input 元素
$('input[type!="submit"]');

[attribute^=value] 选择器 ​

选择属性值以指定值开头的元素：

javascript
// 选择 href 属性以 "https" 开头的元素
$('[href^="https"]');

[attribute$=value] 选择器 ​

选择属性值以指定值结尾的元素：

javascript
// 选择 src 属性以 ".jpg" 结尾的元素
$('[src$=".jpg"]');

[attribute*=value] 选择器 ​

选择属性值包含指定值的元素：

javascript
// 选择 title 属性包含 "image" 的元素
$('[title*="image"]');

7. 子元素过滤选择器 ​

:first-child 选择器 ​

选择作为父元素第一个子元素的元素：

javascript
// 选择作为父元素第一个子元素的 li 元素
$('li:first-child');

:last-child 选择器 ​

选择作为父元素最后一个子元素的元素：

javascript
// 选择作为父元素最后一个子元素的 li 元素
$('li:last-child');

:nth-child(index) 选择器 ​

选择作为父元素第 n 个子元素的元素：

javascript
// 选择作为父元素第二个子元素的 li 元素
$('li:nth-child(2)');

// 选择作为父元素奇数位置子元素的 li 元素
$('li:nth-child(odd)');

// 选择作为父元素偶数位置子元素的 li 元素
$('li:nth-child(even)');

8. 表单选择器 ​

:input 选择器 ​

选择所有 input、textarea、select 和 button 元素：

javascript
// 选择所有表单控件
$(':input');

:text 选择器 ​

选择 type="text" 的 input 元素：

javascript
// 选择文本输入框
$(':text');

:password 选择器 ​

选择 type="password" 的 input 元素：

javascript
// 选择密码输入框
$(':password');

:radio 选择器 ​

选择 type="radio" 的 input 元素：

javascript
// 选择单选按钮
$(':radio');

:checkbox 选择器 ​

选择 type="checkbox" 的 input 元素：

javascript
// 选择复选框
$(':checkbox');

:submit 选择器 ​

选择 type="submit" 的 input 元素：

javascript
// 选择提交按钮
$(':submit');

:button 选择器 ​

选择 type="button" 的 input 元素和 button 元素：

javascript
// 选择按钮
$(':button');

:image 选择器 ​

选择 type="image" 的 input 元素：

javascript
// 选择图像按钮
$(':image');

:reset 选择器 ​

选择 type="reset" 的 input 元素：

javascript
// 选择重置按钮
$(':reset');

:file 选择器 ​

选择 type="file" 的 input 元素：

javascript
// 选择文件输入框
$(':file');

:enabled 选择器 ​

选择所有启用的元素：

javascript
// 选择所有启用的 input 元素
$('input:enabled');

:disabled 选择器 ​

选择所有禁用的元素：

javascript
// 选择所有禁用的 input 元素
$('input:disabled');

:selected 选择器 ​

选择所有被选中的 option 元素：

javascript
// 选择所有被选中的 option 元素
$('option:selected');

:checked 选择器 ​

选择所有被选中的 radio 和 checkbox 元素：

javascript
// 选择所有被选中的单选按钮和复选框
$(':checked');

jQuery 对象和 DOM 对象 ​

1. jQuery 对象 ​

通过 jQuery 选择器获取的对象是 jQuery 对象，它可以使用 jQuery 的方法：

javascript
// jQuery 对象
var $div = $('div');
$div.css('color', 'red'); // 使用 jQuery 方法

2. DOM 对象 ​

通过原生 JavaScript 获取的对象是 DOM 对象，它只能使用原生 JavaScript 的方法：

javascript
// DOM 对象
var div = document.getElementsByTagName('div')[0];
div.style.color = 'red'; // 使用原生 JavaScript 方法

3. 两者之间的转换 ​

jQuery 对象转换为 DOM 对象： ​

javascript
// 方法一：通过索引
var $div = $('div');
var div = $div[0]; // 获取第一个元素

// 方法二：使用 get() 方法
var div = $div.get(0); // 获取第一个元素

DOM 对象转换为 jQuery 对象： ​

javascript
// DOM 对象转换为 jQuery 对象
var div = document.getElementById('myDiv');
var $div = $(div); // 转换为 jQuery 对象

完整示例 ​

以下是一个展示 jQuery 基本语法和选择器的完整示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 基本语法和选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
        .hidden {
            display: none;
        }
        .container {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>jQuery 基本语法和选择器示例</h1>
    
    <div class="container">
        <h2>基本选择器</h2>
        <p id="para1">这是一个段落（ID: para1）</p>
        <p class="content">这是一个段落（Class: content）</p>
        <p>这是另一个段落</p>
        <div>这是一个 div 元素</div>
    </div>
    
    <div class="container">
        <h2>层次选择器</h2>
        <div class="parent">
            <p>父 div 中的段落 1</p>
            <p>父 div 中的段落 2</p>
            <span>父 div 中的 span</span>
        </div>
        <p>与父 div 同级的段落</p>
    </div>
    
    <div class="container">
        <h2>过滤选择器</h2>
        <ul>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
            <li>列表项 4</li>
            <li>列表项 5</li>
        </ul>
        <div>包含文本的 div</div>
        <div></div>
        <div class="hidden">隐藏的 div</div>
    </div>
    
    <div class="container">
        <h2>属性选择器</h2>
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="提交">
        <a href="https://www.example.com">外部链接</a>
        <a href="/local/page.html">内部链接</a>
    </div>
    
    <script>
        $(function() {
            // 基本选择器示例
            $('#para1').css('color', 'red'); // ID 选择器
            $('.content').addClass('highlight'); // 类选择器
            $('div').css('border', '1px solid blue'); // 元素选择器
            
            // 层次选择器示例
            $('.parent p').css('font-weight', 'bold'); // 后代选择器
            $('.parent > span').css('color', 'green'); // 子元素选择器
            $('.parent + p').css('background-color', '#f0f0f0'); // 相邻兄弟选择器
            
            // 过滤选择器示例
            $('li:first').css('color', 'red'); // 第一个元素
            $('li:last').css('color', 'blue'); // 最后一个元素
            $('li:even').css('background-color', '#eee'); // 偶数元素
            $('li:odd').css('background-color', '#ddd'); // 奇数元素
            $('li:eq(2)').css('font-size', '20px'); // 索引为 2 的元素
            
            // 内容过滤选择器示例
            $('div:contains("包含文本")').css('border', '2px solid green'); // 包含指定文本
            $('div:empty').text('这是原来空的 div'); // 空元素
            $('div:visible').css('opacity', '0.8'); // 可见元素
            
            // 属性选择器示例
            $('input[type="text"]').css('background-color', '#ffffcc'); // 属性值等于
            $('input[type!="submit"]').css('border', '1px solid #ccc'); // 属性值不等于
            $('a[href^="https"]').css('color', 'purple'); // 属性值以指定值开头
            $('a[href$=".html"]').css('color', 'orange'); // 属性值以指定值结尾
            
            // 表单选择器示例
            $(':text').css('width', '200px'); // 文本输入框
            $(':password').css('width', '200px'); // 密码输入框
            $(':submit').css('background-color', '#4CAF50'); // 提交按钮
        });
    </script>
</body>
</html>

通过本章的学习，你应该已经掌握了 jQuery 的基本语法和选择器的使用方法。在下一章中，我们将学习如何使用 jQuery 进行 DOM 操作。