jQuery(一)

news2025/1/18 3:18:36

文章目录

    • 1. 基本介绍
    • 2.原理示意图
    • 3.快速入门
        • 1.下载jQuery
        • 2.创建文件夹，放入jQuery
        • 3.引入jQuery
        • 4.代码实例
    • 4.jQuery对象与DOM对象转换
        • 1.基本介绍
        • 2.dom对象转换JQuery对象
        • 3.JQuery对象转换dom对象
        • 4.jQuery对象获取数据
          • 获取value使用val（）
          • 获取内容使用text（）
    • 5.jQuery选择器
        • 1.基本介绍
        • 2.基本选择器
          • 1.基本介绍
          • 2. 代码实例
        • 3.层级选择器
          • 1.基本介绍
          • 2.代码实例
        • 4.基础过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 5.内容过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 6.可见度过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 7.属性过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 8.子元素过滤选择器
          • 1.基本介绍
          • 2.代码实例
          • 3.细节说明
        • 9.表单属性过滤选择器
          • 1.基本介绍
          • 2.代码实例
        • 10.表单选择器
          • 1.基本介绍
          • 2.代码实例
        • 11.常用选择器
          • **一般使用父子/基本选择器 —> 属性选择器 —> 过滤即可解决大多数情况**
          • 1.基本选择器
          • 2.可见度过滤选择器
          • 3.子元素过滤选择器
          • 4.属性过滤选择器
          • 5.表单属性过滤选择器
          • 6.表单选择器
    • 6.作业
        • 1.练习一
        • 2.练习二

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1569192.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

翻译: 硅谷软件工程师面试：准备所需的一切

翻译: 硅谷软件工程师面试：准备所需的一切

没有人有时间去做成百上千道LeetCode题目&#xff0c;好消息是你实际上并不需要做那么多题目就能够在FAANG公司找到工作&#xff01; 我曾经在Grab工作&#xff0c;这是东南亚的一家共享出行公司&#xff0c;但我对工作感到沮丧&#xff0c;想要进入FAANG公司&#xff0c;但我…
阅读更多...
编译好的C++应用程序拷贝到其它电脑，提示dll未找到依赖项的解决方法。

编译好的C++应用程序拷贝到其它电脑，提示dll未找到依赖项的解决方法。

编译好的C应用程序拷贝到其它电脑上&#xff0c;运行时出现提示dll未找到依赖项。 由于dll依赖于其它dll&#xff0c;在开发用电脑上的环境不能完全与其它电脑相同。 解决办法是找到调用到的dll依赖的所有dll&#xff0c;拷贝到运行目录下。 在开发电脑上&#xff1a; 1、开…
阅读更多...
一款功能强大且易于使用的视频剪辑应用程序

一款功能强大且易于使用的视频剪辑应用程序

一款功能强大且易于使用的视频剪辑应用程序&#xff0c;它提供了丰富多样的转场特效和滤镜&#xff0c;让用户能够轻松地为视频添加各种炫酷的效果。与其他视频编辑软件相比&#xff0c;剪映国际版的最大亮点在于其完全免费使用。首先&#xff0c;剪映国际版为用户提供了丰富的…
阅读更多...
ChatGPT/GPT4科研应用与绘图技术及论文写作

ChatGPT/GPT4科研应用与绘图技术及论文写作

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…
阅读更多...
初识MySQL(中篇)

初识MySQL(中篇)

使用语言 MySQL 使用工具 Navicat Premium 16 代码能力快速提升小方法&#xff0c;看完代码自己敲一遍&#xff0c;十分有用 目录 1.SQL语言 1.1 SQL语言组成部分 2.MySQL数据类型 2.1 数值类型 2.2 字符串类型 2.3 日期类型 3.创建数据表 3.1 创建数据表方法1 …
阅读更多...
Lan仿朋友圈系统开源源码 表白墙 打造朋友圈工具 仿朋友圈界面 朋友圈模拟器在线

Lan仿朋友圈系统开源源码 表白墙 打造朋友圈工具 仿朋友圈界面 朋友圈模拟器在线

（购买本专栏可免费下载栏目内所有资源不受限制，持续发布中，需要注意的是，本专栏为批量下载专用，并无法保证某款源码或者插件绝对可用，介意不要购买！购买本专栏住如有什么源码需要，可向博主私信，第二天即可发布！博主有几万资源） Lan仿朋友圈系统开源，可用于表白墙等…
阅读更多...
【DA-CLIP】test.py解读，调用DA-CLIP和IRSDE模型复原计算复原图与GT图SSIM、PSNR、LPIPS

【DA-CLIP】test.py解读，调用DA-CLIP和IRSDE模型复原计算复原图与GT图SSIM、PSNR、LPIPS

文件路径daclip-uir-main/universal-image-restoration/config/daclip-sde/test.py 代码有部分修改 导包 import argparse import logging import os.path import sys import time from collections import OrderedDict import torchvision.utils as tvutilsimport numpy as…
阅读更多...
clickhouse 源码编译部署

clickhouse 源码编译部署

clickhouse 源码编译部署 版本 21.7.9.7 点击build project&#xff0c;编译工程&#xff0c;经过一定时间&#xff08;第一次编译可能几个小时&#xff0c;后续再编译&#xff0c;只编译有改动的文件&#xff09;生成release目录 在cmake-build-release → programs目录下…
阅读更多...
CATIA软件 焊点坐标(BiW Welding SpotPoint)导出txt文本的操作方法

CATIA软件 焊点坐标(BiW Welding SpotPoint)导出txt文本的操作方法

通常我们客户给的工件是带焊点球的形式&#xff0c;且可导出焊点坐标。如下图所示的焊点位置标识及坐标&#xff0c;即是CATIA中Automotive BiW Fastening模块下的BiW Welding SpotPoint焊点定义。 遇到这样的形式&#xff0c;要导出焊点坐标txt文本&#xff0c;可按如下图片找…
阅读更多...
C语言—用EasyX实现反弹球消砖块游戏

C语言—用EasyX实现反弹球消砖块游戏

代码效果如下 #undef UNICODE #undef _UNICODE #include<graphics.h> #include<conio.h> #include<time.h> #include<stdio.h>#define width 640 #define high 480 #define brick_num 10int ball_x, ball_y; int ball_vx, ball_vy; int radius; int ba…
阅读更多...
Chatgpt掘金之旅—有爱AI商业实战篇|语言翻译|（五）

Chatgpt掘金之旅—有爱AI商业实战篇|语言翻译|（五）

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 引言 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。随着AI技术的快速发展和应用领域的不断拓展&#xf…
阅读更多...
《QT实用小工具·十二》邮件批量发送工具

《QT实用小工具·十二》邮件批量发送工具

1、概述 源码放在文章末尾 该项目实现了邮件的批量发送&#xff0c;如下图所示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef SMTPCLIENT_H #define SMTPCLIENT_H#include <QtGui> #include <QtNetwork> #if (QT_VERSION > QT_VERSION_CHECK(5,0,…
阅读更多...
AcWing-游戏

AcWing-游戏

1388. 游戏 - AcWing题库 所需知识&#xff1a;博弈论&#xff0c;区间dp 由于双方都采取最优的策略来取数字&#xff0c;所以结果为确定的&#xff0c;有可能会有多个不同的过程&#xff0c;但是我们只需要关注最终结果就行了。 方法一&#xff1a; 定义dp[i][j] 表示区间…
阅读更多...
从“量子”到分子：探索计算的无限可能 | 综述荐读

从“量子”到分子：探索计算的无限可能 | 综述荐读

在2023年年末&#xff0c;两篇划时代的研究报告在《科学》&#xff08;Science&#xff09;杂志上引发了广泛关注。这两篇论文分别来自两个研究小组&#xff0c;它们共同揭示了单氟化钙分子间相互作用的研究成果&#xff0c;成功地在这些分子间创造出了分子量子比特。这一成就不…
阅读更多...
AI大模型与网球运动结合的应用场景及案例分析

AI大模型与网球运动结合的应用场景及案例分析

AI大模型与网球运动结合的未来前景是广阔的&#xff0c;它不仅能够提升运动员的训练和比赛表现&#xff0c;还能改善教练的策略制定、增强观众的观赛体验以及优化网球赛事的管理。以下是几个具体的应用场景&#xff1a; 1. 运动员技能和表现分析 AI大模型可以通过分析高速摄像…
阅读更多...
ROS 2边学边练（12）-- 创建一个工作空间

ROS 2边学边练（12）-- 创建一个工作空间

上一篇我们已经接触过工作空间的概念&#xff0c;并简单了解体验了一点构建包、测试包的流程&#xff0c;此篇会深入一点学习工作空间相关内容。 前言 一个工作空间是包含了ROS 2的功能包的目录&#xff08;文件夹&#xff09;&#xff0c;在使用ROS 2之前我们得激活一下目标工…
阅读更多...
希尔排序和快排里的小区间优化

希尔排序和快排里的小区间优化

希尔排序 希尔排序是插入排序的优化。 当一串数是逆序时&#xff0c;那么每插入一个数&#xff0c;前面的数都会向后面挪动。 那么这是插入排序的时间复杂度&#xff0c;就会达到O(n^2) 希尔排序是对数组里的数进行预排序。 防止插入排序出现最坏的情况。 预排序&#xf…
阅读更多...
2014最新AI学法减分交管12123小程序源码最新玩法

2014最新AI学法减分交管12123小程序源码最新玩法

2014最新AI学法减分交管12123小程序源码最新玩法利用ChatGPT实现拍照搜题 利用ChatGPT实现拍照搜题 学法减分这个项目是几年之前的项目&#xff0c;老朋友都知道&#xff0c;以前我用Python实现了向量检索&#xff0c;也就是当时和大家说到的AI题库&#xff0c;那时候国内还没…
阅读更多...
[lesson05]引用的本质分析

[lesson05]引用的本质分析

引用的本质分析 引用的意义 引用作为变量别名而存在&#xff0c;因此在一些场合可以代替指针 引用相对于指针来说具有更好的可读性和实用性 注意&#xff1a; 函数中的引用形参不需要进行初始化&#xff01;&#xff01; 特殊的引用 const引用 在C中可以声明const引用 cons…
阅读更多...
957: 逆置单链表

957: 逆置单链表

学习版 【C语言】 #include<iostream> using namespace std; typedef struct LNode {char data;struct LNode* next;LNode(char x) :data(x), next(nullptr) {} }LNode; void creatlist(LNode *&L) {int n;char e;cin >> n;LNode* p1, * p2;p1 L;for (int i…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023