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

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

<script src="my_jquery_functions.js"></script>

$("p").click(function(){
    // 动作触发后执行的代码!!
});

$(selector).hide(speed,callback);
 
$(selector).show(speed,callback);
 
$(selector).toggle(speed,callback);

<button class="toggle-btn">点击切换</button>
<div>
    <p>我是隐藏的元素。</p>
    <p>我是隐藏的元素。</p>
    <p>我是隐藏的元素。</p>
</div>
<script>
    $(document).ready(function () {
        $(".toggle-btn").click(function () {
            $("div").toggle(500, "linear", function () {
                console.log("方法已完成！");
            });
        });
    });
</script>

<button class="toggle-btn">点击切换</button>
<div>
    <p>我是淡入、淡出效果的元素。</p>
    <p>我是淡入、淡出效果的元素。</p>
    <p>我是淡入、淡出效果的元素。</p>
</div>
<script>
    $(document).ready(function () {
        $(".toggle-btn").click(function () {
            $("div").fadeToggle(500, "linear", function () {
                console.log("方法已完成！");
            });
        });
    });
</script>

<button class="toggle-btn">点击切换</button>
<div>
    <p>我是滑动效果的元素。</p>
    <p>我是滑动效果的元素。</p>
    <p>我是滑动效果的元素。</p>
</div>
<script>
    $(document).ready(function () {
        $(".toggle-btn").click(function () {
            $("div").slideToggle(500, "linear", function () {
                console.log("方法已完成!");
            });
        });
    });
</script>

<button class="toggle-btn">点击切换</button>
<div style="background-color: #ff000020;">
    <p>我是动画效果的元素。</p>
    <p>我是动画效果的元素。</p>
    <p>我是动画效果的元素。</p>
</div>
<script>
    $(document).ready(function () {
        $(".toggle-btn").click(function () {
            var div = $("div");
            div.animate({
                height: 'toggle'
            }, 1000, function () {
                console.log("动画完成！");
            });
            div.animate({
                left: '250px',
                height: '+=150px',
                width: '+=150px'
            });
        });
    });
</script>

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

<input type="text" value="Hello World" id="input">
<p id="test" class="color: blue;">氢氦锂铍硼，<b>碳氮氧氟氖</b></p>
<script>
    $(document).ready(function () {
        const test = $("#test");
        console.log(test.html());
        console.log($("#input").val());
        console.log(test.text());
        console.log(test.attr("class"));
    });
</script>

$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("RUNOOB");
 
// 设置单个属性
$("#runoob").attr("href","http://www.runoob.com/jquery");
// 设置多个属性
$("#runoob").attr({
    "href" : "http://www.runoob.com/jquery",
    "title" : "jQuery 教程"
});

<input type="text" value="Hello World" id="input">
<p id="test" style="color: blue;">氢氦锂铍硼，<b>碳氮氧氟氖</b></p>
<script>
    $(document).ready(function () {
        $("#input").val(function (index, value) {
            console.log(index, value);
            return value.toUpperCase();
        });
        $("#test").html(function (index, value) {
            console.log(index, value);
            return value.replace(/氢氦锂铍硼，/g, "你好！");
        });
        $("#test").attr("style", function (index, value) {
            console.log(index, value);
            return value + " red";
        });
    });
</script>

function appendText() {
    var txt1 = "<p>文本-1。</p>";  // 使用 HTML 标签创建文本
    var txt2 = $("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3 = document.createElement("p");
    txt3.innerHTML = "文本-3。";  // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1, txt2, txt3);  // 追加新元素
}

<div>
    <ul>
        <li>
            <span>
                你的灵魂将受到折磨！
            </span>
        </li>
    </ul>
    <li>
        <b>
            我的魔法会把你撕成碎片！
        </b>
    </li>
</div>

<div>
    <ul>
        <li>
            <span>
                你的灵魂将受到折磨！
            </span>
        </li>
    </ul>
    <li>
        <b>
            我的魔法会把你撕成碎片！
        </b>
    </li>
</div>
<script>
    $(document).ready(function() {
        console.log($("span").parentsUntil("div"));
        $("span").parentsUntil("div").css("border", "1px solid red");
    });
</script>

$(selector).load(URL,data,callback);

<h1>你无法抵挡大自然的力量！</h1>
<h2>你将成为我的猎物！</h2>

<div id="div1">
    <h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            // 可以把 jQuery 选择器添加到 URL 参数。
            $("#div1").load("./test.txt h2", function (response, status, xhr) {
                if (statusTxt == "success")
                    alert("外部内容加载成功!");
                if (statusTxt == "error")
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
            });
        });
    });
</script>

$.get(URL,callback);
// 或
$.get( URL [, data ] [, callback ] [, dataType ] )

$.post(URL,callback);
// 或
$.post( URL [, data ] [, callback ] [, dataType ] )

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json 数据
$json_data = '["customername1","customername2"]';
//输出 jsonp 格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>