jQuery 符号

介绍jQuery中的美元符号 $的含义和用法，以及如何避免$ 符号冲突。

$ 符号简介

在 jQuery 中，$ 符号是 jQuery 的简写形式，它是 jQuery 函数的别名。

// 两种写法等价
$("#test").hide();
jQuery("#test").hide();

$ 符号的作用

1. 选择元素

$("p");           // 选择所有 p 元素
$(".test");       // 选择所有 class="test" 的元素
$("#test");       // 选择 id="test" 的元素

2. 创建元素

$("<p>新段落</p>");

3. 执行函数

$(function(){
  // 文档就绪后执行
});

$ 符号冲突

冲突原因

当多个 JavaScript 库都使用 $ 符号时，就会产生冲突。

// Prototype 也使用 $ 符号
var $ = function(id) {
  return document.getElementById(id);
};

// jQuery 也使用 $ 符号
$("#test").hide();  // 冲突！

解决冲突

方法 1：使用 noConflict()

$.noConflict();

// 使用 jQuery 代替 $
jQuery("#test").hide();

方法 2：自定义别名

var jq = $.noConflict();

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

方法 3：在函数内部使用 $

$.noConflict();

jQuery(document).ready(function($){
  $("#test").hide();  // 在函数内部可以使用 $
});

方法 4：使用立即执行函数

$.noConflict();

(function($){
  $(function(){
    $("#test").hide();
  });
})(jQuery);

示例

<!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;
    margin: 10px auto;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
  .code-block {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery $ 符号</h1>

  <div class="demo-section">
    <h3>$ 符号用法</h3>
    <div class="code-block">
$符号的作用：<br>
1. 选择元素：$("p")<br>
2. 创建元素：$("&lt;p&gt;新段落&lt;/p&gt;")<br>
3. 执行函数：$(function(){})
    </div>
  </div>

  <div class="demo-section">
    <h3>功能测试</h3>
    <div class="box" id="testBox">测试盒子</div>
    <button onclick="testDollar()">使用 $ 符号</button>
    <button onclick="testjQuery()">使用 jQuery</button>
    <button onclick="testNoConflict()">测试 noConflict</button>
    <button onclick="resetBox()">重置</button>
  </div>
</div>

<script>
function testDollar() {
  $("#testBox").fadeOut(500).fadeIn(500);
}

function testjQuery() {
  jQuery("#testBox").slideUp(500).slideDown(500);
}

function testNoConflict() {
  var jq = $.noConflict();
  jq("#testBox").css("background-color", "#e74c3c").text("noConflict").delay(1000).queue(function(next){
    jq(this).css("background-color", "#3498db").text("测试盒子");
    next();
  });
  
  // 恢复 $ 符号
  $ = jQuery;
}

function resetBox() {
  $("#testBox").css("background-color", "#3498db").text("测试盒子").show();
}
</script>

</body>
</html>

总结

$ 符号是 jQuery 的核心，理解其用法和冲突解决方法非常重要：

$ 是 jQuery 的简写
多个库使用 $ 时会产生冲突
使用 noConflict() 解决冲突
可以自定义别名或在函数内部使用 $

上一章：jQuery 基础语法

下一章：文档就绪函数