jQuery 介绍
jQuery 与现代前端
jQuery 与 Vue 对比
jQuery 与 React 对比
安装方式概览
下载 jQuery
CDN 引入方式
NPM 安装方式
开发版与生产版区别
版本选择与升级
jQuery 基础语法
jQuery 符号
文档就绪函数
链式调用
jQuery 对象与 DOM 对象
对象相互转换
jQuery 选择器
基本选择器
层次选择器
过滤选择器
表单选择器
属性选择器
内容选择器
  1. jQuery 基础入门
  2. jQuery 基础语法

jQuery 基础语法

详细介绍jQuery的语法基础，包括jQuery符号、文档就绪函数、链式调用、jQuery对象与DOM对象以及对象相互转换等内容。

jQuery 基础语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法结构

$(selector).action()
  • $：定义 jQuery
  • selector：查询和查找 HTML 元素
  • action()：执行对元素的操作

示例

$(this).hide()         // 隐藏当前元素
$("p").hide()          // 隐藏所有段落
$(".test").hide()      // 隐藏所有 class="test" 的所有元素
$("#test").hide()      // 隐藏所有 id="test" 的元素

文档就绪函数

为什么需要文档就绪函数

jQuery 代码通常需要在文档完全加载后才能执行。如果在文档加载完成前执行代码，可能会导致操作失败。

$(document).ready()

$(document).ready(function(){
  // jQuery 方法
});

简写形式

$(function(){
  // jQuery 方法
});

与 window.onload 的区别

特性$(document).ready()window.onload
执行时机DOM 结构加载完成所有资源（图片、CSS等）加载完成
执行次数可多次执行只能执行一次
执行速度快慢

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 语法基础示例</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .syntax-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .code-block {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
  }
  .demo-box {
    padding: 15px;
    margin-top: 15px;
    background-color: white;
    border-radius: 5px;
    border: 2px solid #3498db;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
  .test-element {
    padding: 10px;
    margin: 5px 0;
    background-color: #3498db;
    color: white;
    border-radius: 5px;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 语法基础</h1>

  <div class="syntax-section">
    <h3>基础语法</h3>
    <div class="code-block">
$(selector).action()
    </div>
    <p><strong>说明：</strong></p>
    <ul>
      <li><strong>$</strong>：定义 jQuery</li>
      <li><strong>selector</strong>：查询和查找 HTML 元素</li>
      <li><strong>action()</strong>：执行对元素的操作</li>
    </ul>
  </div>

  <div class="syntax-section">
    <h3>文档就绪函数</h3>
    <div class="code-block">
$(document).ready(function(){
  // jQuery 代码
});

// 简写形式
$(function(){
  // jQuery 代码
});
    </div>
  </div>

  <div class="syntax-section">
    <h3>语法测试</h3>
    <div class="demo-box">
      <div id="test1" class="test-element">测试元素 1</div>
      <div id="test2" class="test-element">测试元素 2</div>
      <div id="test3" class="test-element">测试元素 3</div>
      <p id="test4" class="test-element">测试段落</p>
      <button onclick="testById()">按 ID 隐藏</button>
      <button onclick="testByClass()">按 Class 隐藏</button>
      <button onclick="testByTag()">按标签隐藏</button>
      <button onclick="testThis()">隐藏当前</button>
      <button onclick="showAll()">显示全部</button>
    </div>
  </div>

  <div class="syntax-section">
    <h3>选择器示例</h3>
    <div class="demo-box">
      <input type="text" id="input1" placeholder="输入文本">
      <input type="text" id="input2" placeholder="输入文本">
      <button onclick="getValues()">获取值</button>
      <div id="result" style="margin-top: 15px; padding: 10px; background-color: #e8f5e9; border-radius: 5px;"></div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  console.log("文档已就绪，jQuery 可以开始工作");
});

function testById() {
  $("#test1").hide();
}

function testByClass() {
  $(".test-element").hide();
}

function testByTag() {
  $("div").hide();
}

function testThis() {
  $(this).hide();
}

function showAll() {
  $(".test-element").show();
}

function getValues() {
  var values = [];
  $("input[type='text']").each(function(){
    values.push($(this).val());
  });
  $("#result").text("输入值：" + values.join(", "));
}
</script>

</body>
</html>

jQuery 符号

$ 符号

jQuery 使用 $ 符号作为 jQuery 的简写。

$("#test").hide();

避免 $ 符号冲突

如果其他 JavaScript 库也使用 $ 符号，可以使用 noConflict() 方法。

var jq = $.noConflict();
jq("#test").hide();

链式调用

jQuery 支持链式调用，可以在一条语句中运行多个 jQuery 方法。

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

链式调用原理

链式调用的原理是每个 jQuery 方法都会返回 jQuery 对象本身。

// 等价于
$("#p1").css("color", "red");
$("#p1").slideUp(2000);
$("#p1").slideDown(2000);

链式调用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 链式调用示例</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 200px;
    border-radius: 8px;
    cursor: pointer;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 链式调用</h1>

  <div class="demo-section">
    <h3>链式调用示例</h3>
    <div class="box" id="demoBox">点击我</div>
    <button onclick="chainDemo()">执行链式调用</button>
    <button onclick="resetBox()">重置</button>
  </div>

  <div class="demo-section">
    <h3>链式调用代码</h3>
    <pre style="background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 5px;">
$("#demoBox")
  .css("background-color", "#e74c3c")
  .text("颜色已改变")
  .fadeOut(1000)
  .fadeIn(1000)
  .slideUp(1000)
  .slideDown(1000);</pre>
  </div>
</div>

<script>
function chainDemo() {
  $("#demoBox")
    .css("background-color", "#e74c3c")
    .text("颜色已改变")
    .fadeOut(1000)
    .fadeIn(1000)
    .slideUp(1000)
    .slideDown(1000);
}

function resetBox() {
  $("#demoBox")
    .css("background-color", "#3498db")
    .text("点击我")
    .show();
}
</script>

</body>
</html>

jQuery 对象与 DOM 对象

jQuery 对象

jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。

var $div = $("div");  // jQuery 对象

DOM 对象

DOM 对象是通过原生 JavaScript 获取的元素对象。

var div = document.getElementsByTagName("div");  // DOM 对象

区别

特性jQuery 对象DOM 对象
获取方式$()原生方法
返回值jQuery 对象DOM 元素
方法jQuery 方法原生方法
索引访问.eq(index)[index]

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 对象与 DOM 对象</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .box {
    width: 150px;
    height: 150px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 150px;
    border-radius: 8px;
    margin: 10px;
    display: inline-block;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
  .info-box {
    padding: 15px;
    margin-top: 15px;
    background-color: white;
    border-radius: 5px;
    border: 2px solid #3498db;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 对象与 DOM 对象</h1>

  <div class="demo-section">
    <h3>对象测试</h3>
    <div class="box" id="box1">盒子 1</div>
    <div class="box" id="box2">盒子 2</div>
    <div class="box" id="box3">盒子 3</div>
    <div>
      <button onclick="testJQueryObject()">jQuery 对象</button>
      <button onclick="testDOMObject()">DOM 对象</button>
      <button onclick="testConversion()">对象转换</button>
    </div>
    <div id="result" class="info-box"></div>
  </div>
</div>

<script>
function testJQueryObject() {
  var $box = $(".box");
  $("#result").html(`
    <p><strong>jQuery 对象：</strong></p>
    <p>类型：${Object.prototype.toString.call($box)}</p>
    <p>长度：${$box.length}</p>
    <p>jQuery 版本：${$box.jquery}</p>
    <p>使用 jQuery 方法：${$box.css('background-color')}</p>
  `);
}

function testDOMObject() {
  var box = document.getElementsByClassName("box");
  $("#result").html(`
    <p><strong>DOM 对象：</strong></p>
    <p>类型：${Object.prototype.toString.call(box)}</p>
    <p>长度：${box.length}</p>
    <p>第一个元素：${box[0].id}</p>
    <p>使用 DOM 方法：${box[0].style.backgroundColor}</p>
  `);
}

function testConversion() {
  // jQuery 对象转 DOM 对象
  var $box = $(".box");
  var domBox = $box[0];
  
  // DOM 对象转 jQuery 对象
  var box = document.getElementById("box1");
  var $box2 = $(box);
  
  $("#result").html(`
    <p><strong>对象转换：</strong></p>
    <p>jQuery 转 DOM：${domBox.id}</p>
    <p>DOM 转 jQuery：${$box2.attr('id')}</p>
  `);
}
</script>

</body>
</html>

对象相互转换

jQuery 对象转 DOM 对象

// 方法 1：使用索引
var domObj = $jqueryObj[0];

// 方法 2：使用 get() 方法
var domObj = $jqueryObj.get(0);

DOM 对象转 jQuery 对象

var $jqueryObj = $(domObj);

转换示例

// jQuery 对象
var $div = $("div");

// 转换为 DOM 对象
var div = $div[0];
div.style.color = "red";

// DOM 对象
var p = document.getElementsByTagName("p")[0];

// 转换为 jQuery 对象
var $p = $(p);
$p.css("color", "blue");

总结

jQuery 语法基础包括：

  1. 基础语法：$(selector).action()
  2. 文档就绪函数：$(document).ready()
  3. jQuery 符号：$ 符号的使用和冲突解决
  4. 链式调用：多个方法串联执行
  5. jQuery 对象与 DOM 对象：两者的区别和转换

掌握这些基础知识，是学习 jQuery 的第一步。

上一章：版本选择与升级
下一章：jQuery 符号