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

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 选择器

<!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").html('<h2>hi,jzh</h2>');
         });
    })

    </script>

  <div id="divInfo"><h2>jQuery按钮事件</h2></div>
    <button id="btnInfo" type="button">jQuery</button>
</body>
</html>

3、class 选择器

<!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(){
        // 按钮单击时执行
        jQuery("#btnInfo").click(function() {
            jQuery(".divInfo").hide();
         });
    })

    </script>

  <div class="divInfo"><h2>jQuery按钮事件</h2></div>
    <button id="btnInfo" type="button">jQuery</button>
</body>
</html>

发表回复

您的电子邮箱地址不会被公开。