jQuery 链 chaining

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
    $("#btnInfo1").click(function(){
      // Chaining允许我们在一条语句中运行多个jQuery方法
            $("#div1").slideUp(2000).slideDown(2000);
        });
    })

    </script>
    <div id="div1" style="width:60px;height:60px;background-color:red;"></div><br>
  <button id="btnInfo1" type="button">Chaining</button>
</body>
</html>

jQuery 回调 callback

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
    $("#btnInfo1").click(function(){
            $("#div1").hide("slow",function(){
                alert("图层现在被隐藏了");
            });
        });
    })

    </script>
    <div id="div1" style="width:60px;height:60px;background-color:red;"></div><br>
  <button id="btnInfo1" type="button">callback</button>
</body>
</html>

jQuery 动画 animate

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
    $("#btnInfo1").click(function(){
            var div = $("#div1");
            div.animate({height:'200px', opacity:'0.4'}, "slow");
            div.animate({width:'200px', opacity:'0.8'}, "slow");
            div.animate({height:'100px', opacity:'0.4'}, "slow");
            div.animate({width:'100px', opacity:'0.8'}, "slow");
        });
    })

    </script>
  <button id="btnInfo1" type="button">动画</button>
    <div id="div1" style="background:#000000;height:100px;width:100px;position:absolute;"></div><br>
  
</body>
</html>

jQuery 淡入淡出 fadeIn fadeTo fadeToggle

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
    
    $("#btnInfo1").click(function(){
            $("#div4").fadeIn();
            $("#div5").fadeIn("slow");
            $("#div6").fadeIn(3000);
        });

        $("#btnInfo2").click(function(){
            $("#div1").fadeTo("slow", 0.2);
            $("#div2").fadeTo("slow", 0.4);
            $("#div3").fadeTo("slow", 0.6);
        });

    $("#btnInfo3").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
        });
    })

    </script>
  <div id="div4" style="width:60px;height:60px;display:none;background-color:red;"></div><br>
    <div id="div5" style="width:60px;height:60px;display:none;background-color:green;"></div><br>
    <div id="div6" style="width:60px;height:60px;display:none;background-color:blue;"></div>

    <div id="div1" style="width:60px;height:60px;background-color:red;"></div><br>
    <div id="div2" style="width:60px;height:60px;background-color:green;"></div><br>
    <div id="div3" style="width:60px;height:60px;background-color:blue;"></div>
  <button id="btnInfo1" type="button">fadeIn淡入</button>
    <button id="btnInfo2" type="button">fadeTo淡出</button>
  <button id="btnInfo3" type="button">fadeToggle切换</button>
</body>
</html>

jQuery 获取单选按钮radio选中的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
        $("#btnInfo").click(function() {
            //$(".divInfo").hide();
      alert($('input[name="sex"]:checked').val());
         });
    })

    </script>
  <div class="divInfo">
        <input type="radio" name="sex" value="1" />男
        <input type="radio" name="sex" value="2" />女
    </div>
    <button id="btnInfo" type="button">jQuery</button>
</body>
</html>

jQuery 实现全选、全不选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 全选
        $("#selectAll").click(function(){
        $("#cbList :checkbox").attr("checked", true);
    });

        // 全不选
    $("#unSelect").click(function(){
        $("#cbList :checkbox").attr("checked", false);
    });
    })

    </script>

  <div id="cbList">
      <input type="checkbox" value="9001"/>蒋<br>
    <input type="checkbox" value="9002"/>智<br>
    <input type="checkbox" value="9003"/>昊<br>
  </div>
  <input type="checkbox" value="全选" id="selectAll"/>全选
  <input type="checkbox" value="全不选" id="unSelect"/>全不选
</body>
</html>

jQuery 获取select选中的文本与值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
        $("#btnInfo").click(function() {
      // 获取select选中的text
      alert($("#ddlInfo").find("option:selected").text());
      // 获取select选中的value
      alert($("#ddlInfo ").val());
      // 获取select选中的索引:
            alert($("#ddlInfo ").get(0).selectedIndex);
      // 设置select选中的索引
            $("#ddlInfo ").get(0).selectedIndex = 1; //index为索引值
         });
    })

    </script>
  <div class="divInfo">
        <select id="ddlInfo">
            <option value="jzh">jzh</option>
            <option value="chanpinxue.cn">idodo</option>
        </select>
    </div>
    <button id="btnInfo" type="button">jQuery</button>
</body>
</html>

jQuery 设值 text() html() val() attr()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
        $("#btnA").click(function(){
        $("#info").text("haha");
    });
    
        $("#btnB").click(function(){
        $("#info").html("<b>haha</b>");
    });

    $("#btnC").click(function(){
      $("#website").attr("href", "http://chanpinxue.cn/about");
    });

    $("#btnD").click(function(){
      $("#name").val("jiangzhihao");
    });
    })

    </script>
    <p id="info">测试<b>A</b></p>
  <p><a href="http://chanpinxue.cn" id="website">chanpinxue.cn</a></p>
  <p>名称: <input type="text" id="name" value="jzh"></p>
    <button id="btnA" type="button">A</button>
  <button id="btnB" type="button">B</button>
  <button id="btnC" type="button">C</button>
  <button id="btnD" type="button">D</button>
</body>
</html>

jQuery 取值 text() html() val() attr()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
        $("#btnA").click(function(){
        alert("Text: " + $("#info").text());
    });
    
        $("#btnB").click(function(){
        alert("HTML: " + $("#info").html());
    });

    $("#btnC").click(function(){
      alert($("#website").attr("href"));
    });

    $("#btnD").click(function(){
      alert("值为: " + $("#name").val());
    });
    })

    </script>
    <p id="info">测试<b>A</b></p>
  <p><a href="http://chanpinxue.cn" id="website">chanpinxue.cn</a></p>
  <p>名称: <input type="text" id="name" value="jzh"></p>
    <button id="btnA" type="button">A</button>
  <button id="btnB" type="button">B</button>
  <button id="btnC" type="button">C</button>
  <button id="btnD" type="button">D</button>
</body>
</html>

jQuery 元素选择器 #id 选择器 .class 选择器

1、元素选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function(){
        // 按钮单击时执行
        $("#btnInfo").click(function() {
            //$(".divInfo").hide();
            $("p").hide();
         });
    })

    </script>
    <p>测试1。</p>
  <p>测试2。</p>
  <div class="divInfo"><h2>jQuery按钮事件</h2></div>
    <button id="btnInfo" type="button">jQuery</button>
</body>
</html>

2、#id 选择器 阅读全文