jQuery(一)

发布于：2024-04-04 ⋅ 阅读:(165) ⋅ 点赞:(0)

文章目录

1. 基本介绍

image-20240131191354216

2.原理示意图

image-20240131191742591

3.快速入门

1.下载jQuery

image-20240131192009350

2.创建文件夹，放入jQuery

image-20240131193716607

3.引入jQuery

image-20240131193921629

4.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
  <script>
    // window.onload = function (){
    //   //获取dom对象
    //   var elementById = document.getElementById("btn01");
    //   //绑定点击事件
    //   elementById.onclick = function (){
    //     alert("点击了按钮");
    //   }
    // }
    $(function () { //页面加载后执行函数
      var $btn01 = $("#btn01"); //获取按钮的jquery对象
      $btn01.click(function () { //绑定按钮的点击事件，jquery对象命名以$开头
        alert("hello,jquery..")
      })
    })
  </script>
</head>
<body>
<button id="btn01">按钮</button>
</body>
</html>

4.jQuery对象与DOM对象转换

1.基本介绍

image-20240131195503689

2.dom对象转换JQuery对象

image-20240131195624582

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
  <script>
    //通过dom对象来获取信息
    window.onload = function () {
      var elementById = document.getElementById("username");
      // var value = elementById.value;
      // alert(value);
      //把dom对象转换成JQuery对象
      var $val = $(elementById).val();
      alert($val);
    }
  </script>
</head>
<body>
用户名：<input type="text" id="username" name="username" value="孙显圣">
</body>
</html>
3.JQuery对象转换dom对象

image-20240131200445504

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
  <script>
    window.onload = function () {
      //得到jQuery对象
      var $username = $("#username");
      //转换成dom对象
      //1.jquery对象是一个数组，从数据里面取出的元素就是dom对象，如果获取的就是一个值，那么就使用下标[0]或者get(0)来获取
      var username1 = $username[0]; //方式一
      var username2 = $username.get(0); //方式二
      alert(username2.value + "1")
      alert(username1.value + "2")
    }
  </script>
</head>
<body>
用户名：<input type="text" id="username" name="username" value="孙显圣">
</body>
</html>
4.jQuery对象获取数据
获取value使用val（）
获取内容使用text（）

5.jQuery选择器

1.基本介绍

image-20240131201452918

2.基本选择器
1.基本介绍

image-20240131202957172

2. 代码实例
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 60px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">

    $(function () {
//1. 改变 id 为 one 的元素的背景色为 #0000FF
      $("#b1").click(function () {
        $("#one").css("background", "#0000FF")
      })
//2. 改变 class 为 mini 的所有元素的背景色为 #FF0033
      $("#b2").click(function () {
        $(".mini").css("background", "#FF0033")
      })
//3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF
      $("#b3").click(function () {
        $("div").css("background", "#00FFFF")
      })
//4. 改变所有元素的背景色为 #00FF33
      $("#b4").click(function () {
        $("*").css("background", "#00FF33")
      })
//5. 改变所有的<span>元素和 id 为 two class 为 .mini 的元素的背景色为    #3399FF
      $("#b5").click(function () {
        $("span, #two, .mini ").css("background", "#3399FF")
      })
    })
  </script>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改 变 元 素 名 为 <div> 的 所 有 元 素 的 背 景 色 为 #00FFFF"
       id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
韩顺平 Java 工程师
<input type="button" value=" 改变所有的<span>元素和 id 为 two class 为 .mini 的元素的背
景色为 #3399FF" id="b5"/>
<hr/>
<div id="one" class="mini">div id 为 one</div>
<div id="two">div id 为 two</div>
<div id="three" class="mini">div id 为 three</div>
<span id="s_one" class="mini">span one</span>
<span id="s_two">span two</span>
</body>
</html>
3.层级选择器
1.基本介绍

image-20240201094354699

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>层次选择器应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 80px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {

      //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
      $("#b1").click(function () {
        $("div").css("background", "#0000FF")
      })
      //2. 改变 <body> 内子 <div>[第一层div] 的背景色为 #FF0033
      $("#b2").click(function () {
        $("body > div").css("background", "#FF0033")
      })
      //3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
      $("#b3").click(function () {
        $("#one + div").css("background", "#0000FF")
      })
      //4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
      $("#b4").click(function () {
        $("#two ~ div").css("background", "#0000FF")
      })
      //5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
      $("#b5").click(function () {
        $("#two").siblings("div").css("background", "#0000FF")
      })
    })
  </script>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
<hr/>
<div id="one" class="mini">
  div id为one
</div>
<div id="two">
  div id为two
  <div id="two01">
    id two01
  </div>
  <div id="two02">
    id two02
  </div>
</div>

<div id="three" class="mini">
  div id为three
  <div id="three01">
    id three01
  </div>
</div>


</body>
</html>
4.基础过滤选择器
1.基本介绍

image-20240201100351162

image-20240201100557178

2.代码实例

image-20240201102242343

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础过滤选择器-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 80px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //元素的标号是从上到下，从左到右依次排号

      //*****改变第一个 div 元素的背景色为 #0000FF
      $("#b1").click(function () {
        // $("div:first").css("background", "#0000FF")
        $("div:eq(0)").css("background", "#0000FF")
      })
      //改变最后一个 div 元素的背景色为 #0000FF
      $("#b2").click(function () {
        $("div:last").css("background", "#0000FF")
      })
      //***改变class不为 one 的所有 div 元素的背景色为 #0000FF
      $("#b3").click(function () {
        $("div:not(.one)").css("background", "#0000FF")
      })
      //********改变索引值为偶数的 div 元素的背景色为 #0000FF
      $("#b4").click(function () {
        $("div:even").css("background", "#0000FF")
      })
      //********改变索引值为奇数的 div 元素的背景色为 #0000FF
      $("#b5").click(function () {
        $("div:odd").css("background", "#0000FF")
      })
      //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
      $("#b6").click(function () {
        $("div:gt(3)").css("background", "#0000FF")
      })
      //改变索引值为等于 3 的 div 元素的背景色为 #0000FF
      $("#b7").click(function () {
        $("div:eq(3)").css("background", "#0000FF")
      })
      //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
      $("#b8").click(function () {
        $("div:lt(3)").css("background", "#0000FF")
      })
      //****改变所有的标题元素的背景色为 #0000FF
      $("#b9").click(function () {
        $(":header").css("background", "#0000FF")
      })
    });
  </script>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>

<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class="mini">
  div id为one
</div>
<div id="two">
  div id为two
  <div id="two01">
    id two01
  </div>
  <div id="two02">
    id two02
  </div>
</div>

<div id="three" class="one">
  div id为three class one
  <div id="three01">
    id three01
  </div>
</div>
</body>
</html>
5.内容过滤选择器
1.基本介绍

image-20240201102338165

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内容过滤选择器应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 80px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
      $("#b1").click(function () {
        $("div:contains('di')").css("background", "#0000FF")
      })
      //**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink
      $("#b2").click(function () {
        $("div:empty").css("background", "pink")
      })
      //******改变含有 class 为 mini 元素的 div 元素的背景色为 green
      $("#b3").click(function () {
        $("div.mini").css("background", "green")
      })
      //****改变含有子元素(或者文本元素)的div元素的背景色为 yellow
      $("#b4").click(function () {
        $("div:parent").css("background", "yellow")
      })
      //****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
      $("#b5").click(function () {
        $("div:gt(3)").css("background", "#0000FF")
      })
      //***改变不含有文本 di; 的 div 元素的背景色 pink
      $("#b6").click(function () {
        $("div:not(:contains('di'))").css("background", "pink")
      })
    });
  </script>
</head>
<body>

<input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 black" id="b1"/>
<input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色 pink" id="b6"/>
<hr/>
<div id="xxxx">
  <div id="one" class="mini">
    div id为one
  </div>
</div>

<div id="two">
  div id为two
  <div id="two01">
    id two01
  </div>
  <div id="two02">
    id two02
  </div>
</div>

<div id="three" class="one">
  div id为three class one
  <div id="three01">
    id three01
  </div>
</div>

<div id="four" class="one">
  XXXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">
  执行动画
</div>
</body>
</html>
6.可见度过滤选择器
1.基本介绍

image-20240201104515792

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>可见度过滤选择器-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 30px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }

    div.visible {
      display: none;
    }
  </style>
  <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //*****改变所有可见的div元素的背景色为 #0000FF
      $("#b1").click(
        function () {
          $("div:visible").css("background", "red");
        }
      )
      //**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
      $("#b2").click(
        function () {
          $("div:hidden").css("background", "green");
          $("div:hidden").show();
        }
      )
      //**选取所有的文本隐藏域, 并打印它们的值
      $("#b3").click(
        function () {
          //1. 先得到所有的hidden 元素
          //2. $inputs 是一个jquery对象，而且是数组对象
          var $inputs = $("input:hidden");
          //alert("length= " + $inputs.length)
          //3. 遍历
          //方式1 - for
          // for (var i = 0; i < $inputs.length; i++) {
          //     //这里input 就是一个dom对象
          //     var input = $inputs[i];
          //     console.log("值是= " + input.value);
          // }
          //方式2 - jquery each() 可以对数组遍历
          //(1) each 方法，遍历时，会将 $inputs 数组的元素
          //    取出, 传给 function() {} -> this
          $inputs.each(function () {
            //这里可以使用this获取每次遍历的对象
            //this 对象是是dom对象
            console.log("值是(dom方式)=" + this.value);

            //也可以将this -> jquery 对象使用jquery方法取值
            console.log("值是(jquery方式)=" + $(this).val())
          })

        }
      )
    });
  </script>
</head>
<body>

<input type="button" value="改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"
       id="b2"/> <br/><br/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
<hr/>

<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>

<div id="one" class="visible">
  div id为one
</div>

<div id="two" class="visible">
  div id为two
</div>

<div id="three" class="one">
  div id为three
</div>

</body>
</html>
7.属性过滤选择器
1.基本介绍

image-20240201105743189

image-20240201110127035

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }


        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //*****含有属性title 的div元素.
            $("#b1").click(
                function () {
                    $("div[title]").css("background", "green");
                }
            )

            //****属性title值等于test的div元素
            $("#b2").click(
                function () {
                  $("div[title = 'test']").css("background", "blue");
                }
            )

            //属性title值不等于test的div元素(没有属性title的也将被选中)

            $("#b3").click(
                function () {
                  $("div[title != 'test']").css("background", "red");
                }
            )

            //属性title值 以te开始 的div元素
            $("#b4").click(
                function () {
                  $("div[title ^= 'te']").css("background", "yellow");
                }
            )

            //属性title值 以est结束 的div元素
            $("#b5").click(
                function () {
                  $("div[title $= 'est']").css("background", "white");
                }
            )

            //属性title值 含有es的div元素
            $("#b6").click(
                function () {
                  $("div[title *= 'es']").css("background", "black");
                }
            )

            //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
            $("#b7").click(
                function () {
                  $("div[id][title *= 'es']").css("background", "pink");
                }
            )

        });
    </script>
</head>
<body>

<input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
<input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>

<div id="one" title="test">
    div id为one test
</div>

<div id="one-1" title="texxx">
    div id为one-1 texxx
</div>

<div id="one-2" title="xxxest">
    div id为one-2 xxxest
</div>

<div id="one-3" title="xxxesxxxxxt">
    div id为one-3 xxxesxxxxxt
</div>

<div id="two" title="ate">
    div id为two
</div>

<div id="three" class="one">
    div id为three
</div>
</body>
</html>
8.子元素过滤选择器
1.基本介绍

image-20240201131653219

image-20240201131836693

2.代码实例

image-20240201141528332

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素过滤选择器示例-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 70px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //****每个class为one的div父元素下的第2个子元素
            $("#b1").click(
                function () {
                  // $("div .one:nth-child(2)").css("background", "yellow");
                  $(".one:nth-child(2)").css("background", "yellow");

                }
            )

            //*****每个class为one的div父元素下的第一个子元素
            $("#b2").click(
                function () {
                    // $(".one .one:nth-child(1)").css("background", "green");
                    $(".one:nth-child(1)").css("background", "green");
                }
            )


            //*****每个class为one的div父元素下的最后一个子元素
            $("#b3").click(
                function () {
                    $("div:last-child").css("background", "red");
                }
            )


            //**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
            $("#b4").click(
                function () {
                    $("div .one:only-child").css("background", "pink");
                }
            )

        });
    </script>
</head>
<body>

<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/><br/><br/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/><br/><br/>


<div class="one">
    <div id="one" class="one">
        XXXXXXXXX id=one
    </div>
    <div id="two" class="one">
        XXXXXXXXX id=two
    </div>
    <div id="three" class="one">
        XXXXXXXXX id=three
    </div>
    <div id="four" class="one">
        XXXXXXXXX id=four
    </div>
</div>

<div class="one">
    <div id="five" class="one">
        XXXXXXXXX id=five
    </div>
</div>
</body>
</html>
3.细节说明
  1. 中间带空格的定位方式就是父元素 子元素的形式
  2. 先找出满足条件的父元素，然后找出父元素下满足条件的子元素
9.表单属性过滤选择器
1.基本介绍

image-20240201135032225

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单对象属性过滤选择器-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

  </style>
  <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值

      $("#b1").click(
        function () {
          //$jquery对象.val() , 如果() 是空的，就表示返回value
          //$jquery对象.val('值') , 就表示给该对象value设置值
          $("input[type='text']:enabled").val("台球")
        }
      )

      //利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值

      $("#b2").click(
        function () {
          //$jquery对象.val() , 如果() 是空的，就表示返回value
          //$jquery对象.val('值') , 就表示给该对象value设置值
          $("input[type='text']:disabled").val("足球")
        }
      )
      //利用 jQuery 对象的 length 属性获取多选框/复选框选中的个数
      $("#b3").click(
        function () {
          var $input = $("input[type='checkbox']:checked");
          alert($input.length)
        }
      )
      //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
      $("#b4").click(
        function () {
          //如果我们希望选择指定的select , 可以加入属性过滤选择器
          //var $selects = $("select[属性='值'] option:selected");
          var $select = $("select option:checked");
          $select.each(function () {
            alert($(this).val())
          })
        }
      )

    });
  </script>
</head>
<body>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值"
       id="b2"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/><br/><br/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<h1>选项如下:</h1>
<select name="job" size=9 multiple="multiple">
  <option value="选项1">选项1^^</option>
  <option value="选项2">选项2^^</option>
  <option value="选项3">选项3^^</option>
  <option value="选项4">选项4^^</option>
  <option value="选项5">选项5^^</option>
  <option value="选项6">选项6^^</option>
</select>

<select id="hsp" name="edu">
  <option value="博士">博士^^</option>
  <option value="硕士">硕士^^</option>
  <option value="本科">本科^^</option>
  <option value="小学">小学^^</option>
</select>
</body>
</html>
10.表单选择器
1.基本介绍

image-20240201142128754

image-20240201142202560

2.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器-应用实例</title>
    <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //选择所有的button
            var $button = $(":button");
            alert("$button 大小=" + $button.length)//3

            //得到type="button" 的元素
            //老韩解读 $("input[type='button']") 只会得到 <input type="button" value="按钮1"/>
            var $button2 = $("input[type='button']");
            alert("$button2 大小=" + $button2.length)//1

            //得到<button />按照元素标签取值
            //老韩解读 $("button") 只会按照元素标签获取 <button>按钮2</button>
            var $button3 = $("button");
            alert("$button3 大小=" + $button3.length)//2
        });
    </script>
</head>
<body>
<form>
    <input type="text"/><br/>
    <input type="checkbox"/><br/>
    <input type="radio"/><br/>
    <input type="image" src="../image/2.png" height="100"/><br/>
    <input type="file"/><br/>
    <input type="submit"/><br/>
    <input type="reset"/><br/>
    <input type="password"/><br/>
    <input type="button" value="按钮1"/><br/>
    <select>
        <option/>
    </select><br/>
    <textarea></textarea><br/>
    <button>按钮2</button>
    <button>按钮3</button>
    <br/>
</form>
</body>
</html>
11.常用选择器
一般使用父子/基本选择器 —> 属性选择器 —> 过滤即可解决大多数情况
1.基本选择器

image-20240201142906159

2.可见度过滤选择器

image-20240201143025778

3.子元素过滤选择器

image-20240201141528332

image-20240201143231854

4.属性过滤选择器

image-20240201143117503

5.表单属性过滤选择器

image-20240201135032225

6.表单选择器

image-20240201143344642

6.作业

1.练习一

image-20240201143506407

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
  <script>
    $(function () { //页面加载后执行
      //选择所有的p
      var $p = $("p");
      //遍历
      $p.each(function () {
        var text = $(this).text();
        $(this).click(function () { //为每个p都绑定点击事件
          alert(text)
        })
      })
    })
  </script>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</body>
</html>

image-20240201144721376

2.练习二

image-20240201143538872

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      //先选择所有子元素，然后再使用基础过滤选择器选择不同的行来进行操作
      $("table tr:even").css("background", "red")
      $("table tr:odd").css("background", "blue")
    })
  </script>
</head>
<body>
<table border="1" width="500">
  <tr><td>1</td><td>1</td></tr>
  <tr><td>2</td><td>2</td></tr>
  <tr><td>3</td><td>3</td></tr>
  <tr><td>4</td><td>4</td></tr>
  <tr><td>5</td><td>5</td></tr>
  <tr><td>6</td><td>6</td></tr>
</table>
</body>
</html>

image-20240201145832930

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布