jQuery中的$(function())

一、小標題：jQuery的簡介

jQuery是一種JavaScript庫，為JavaScript開發者提供方便快捷的API，可輕鬆處理HTML文檔遍歷和操作，處理事件，添加動畫效果，訪問數據庫以及進行AJAX交互。它是由John Resig於2006年1月推出的，目前在Web開發中廣泛使用。

二、小標題：元素選擇器

在jQuery中，我們使用選擇器來選擇HTML元素，使用CSS選擇器對文檔進行遍歷和選擇。

$('p') //選擇所有的段落元素 
$('.class') //選擇所有的class為class的元素 
$('#id') //選擇所有的id為id的元素 
$('p.first') //選擇所有的class為first的段落元素 

選擇器返回的是一個jQuery對象，它有許多不同的方法，可應用於選擇的元素。

三、小標題：文檔就緒函數

$(document).ready()是jQuery中最重要的函數之一，用於確保文檔已經完全加載並準備好執行JavaScript代碼。

$(document).ready(function() { 
  //在此處編寫要執行的代碼 
});

$(document).ready()代碼塊內的代碼在DOM樹完成加載後立即執行，它可以確保代碼在任何DOM元素中操作之前執行，這非常重要。

四、小標題：縮寫

$(function() {});是$(document).ready()方法的縮寫，是一種更為簡潔的表達方式。

$(function() { 
  //在此處編寫要執行的代碼 
});

在一個函數內包裝代碼意味着可以使用「$」符號，這是因為在函數內部定義了局部變量，而它位於代碼的頂部，所以可以使用「$」符號作為全局變量.

五、小標題：常見用法

1. 改變CSS樣式：

使用$(function(){})，可以在頁面準備好之後更改CSS樣式，例如：

$(document).ready(function(){
  $("div").css("background-color", "red");
});

此代碼將選擇所有的<div>元素，並將其CSS的背景顏色更改為Red。

2. 綁定事件：

事件是在用戶執行某項操作時發生的動作，使用$(function(){})，可以在頁面準備好之後綁定事件，例如：

$(document).ready(function(){
  $("button").click(function(){
    alert("Hello World!");
  });
});

此代碼將選擇所有的按鈕元素，並在按鈕被單擊時顯示一個彈出框。

3. 進行AJAX交互：

使用AJAX技術，可以通過異步請求向服務器發送和接收數據，使用$(function(){})，可以在頁面準備好之後實現AJAX交互，例如：

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
      $("#div1").html(result);
    }});
  });
});

此代碼將選擇所有的按鈕元素，並在按鈕被單擊時向服務器發送一個請求，然後在頁面中顯示服務器返回的結果。

六、小標題：總結

$(function(){})是jQuery中最常見的表達方式，它可以確保代碼在DOM準備好之後執行，從而避免了許多與DOM操作相關的問題，同時它的簡潔性也是其一個重要的優點。

在實際的開發中，可以使用$(function(){})來創建可以與其他庫和組件進行良好互動的代碼。在編寫jQuery代碼時，請記得仔細檢查它的性能和可維護性，確保代碼的邏輯清晰易懂。