JQuery学习记录之一

qq_41847386

已于 2022-06-16 14:17:03 修改

阅读量93

点赞数

分类专栏： jQuery专栏文章标签： jquery 学习

于 2022-06-16 14:15:45 首次发布

本文链接：https://blog.csdn.net/qq_41847386/article/details/125273042

版权

jQuery专栏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery

一、基本介绍

官网: jquery官网

jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML、CSS…
提供方法、events、选择器，并且方便地为网站提供AJAX交互；
其宗旨就是: 写更少的代码，做更多的事

二、快速入门

首先引入jQuery库:

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery快速入门</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        /**
         *  先使用DOM编程
         *  document.getElementById("btn1") 返回的是dom对象
         */
         window.onload = function(){
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                alert("hello,jquery ====> 按钮1");
            }
         }

         /**
         *  再使用jQuery实现
         *  $("#id名称") / $(".class名称") 返回的是dom对象
         */
         $(function(){
            //写法一
            $("#btn02").click(function (){
                alert("hi jquery ===> 按钮2");
            })

            //写法二
            var $btn02 = $("#btn02");
            //jquery对象($btn02) 其实是数组对象
            console.log($btn02);
            $btn02.click(function (){
                alert("hi jquery ===> 按钮2~~");
            })

         });

    </script>
</head>
<body>
<input type="button" id="btn01" name="btn01" value="按钮1" /><br/>
<input type="button" id="btn02" name="btn02" value="按钮2" /><br/>

</body>
</html>

三、jQuery对象和DOM对象

1. 什么是jQuery对象

jQuery对象就是对DOM对象进行包装后产生的对象

比如：$(“#test”).html 意思是指:
获取id为test的元素内的html代码。其中html()是jQuery里的方法。
$(“#test”).html 等价于 document.getElementById(“id”).innerHTML

jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法$(“#id”).html
var $variable: 代表jQuery对象； var variable: 代表DOM对象

2. DOM对象转成jQuery对象

对于一个DOM对象，只要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
$(DOM对象)，这样就可以使用jQuery方法了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom对象转成jquery对象</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            //username就是dom对象
            var username = document.getElementById("username");
            alert("username value= " +　username.value);

            //把username转成jquery对象
            var $username = $(username);
            alert("$username value= " + $username.val());
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username" name="username" value="dom对象转成jquery对象">
</body>
</html>

3. jQuery对象转成DOM对象

两种转换方式将一个jQuery对象转成DOM对象: [index]和.get(index) ==>index一般是0
为什么可以这样转换，是因为jQuery对象是一个数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象转成dom对象</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){

            //得到jquery对象
            var $username = $("#username");
            alert("$username value= " + $username.val());

            //方式一
            var username = $username[0];
            //username = [object HTMLInputElement]
            alert("jquery对象转成dom对象= " + username);
            alert("username value= " + username.value);

            //方式二
            var username = $username.get(0);
            alert("username value= " + username.value + "~~~");
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username" name="username" value="jquery对象转成dom对象">
</body>
</html>

四、jQuery选择器

简单介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器简单介绍</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){

            //如果是dom对象(注意body中的id="username~")
            var username = document.getElementById("username");
            //alert("username value= " +　username.value);//会报错

            //若希望dom对象可以处理null
            if(username){
                alert("username value= " +　username.value);
            }else{
                alert("没有获取到对应id的dom对象");
            }

            //若是jquery对象
            var $username = $("#username");
            alert("$username value= " + $username.val());//提示undefined


        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username~" name="username" value="jquery对象转成dom对象">
</body>
</html>

基本选择器(id、class、标签名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的基本选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
        div.mini{
            width: 160px;
            height: 130px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 16px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //改变id为one的元素的背景色为 #0000FF
            $("#b1").click(function (){
                $("#one").css("background","#0000FF");
            })

            //改变class为mini的元素的背景色为 #FF0033
             $("#b2").click(function (){
                $(".mini").css("background","#FF0033");
            })

            //改变元素名为<div>的所有元素的背景色为 #00FFFF
            $("#b3").click(function (){
                $("div").css("background","#00FFFF");
            })

            //改变所有元素的背景色为 #00FF33
             $("#b4").click(function (){
                $("*").css("background","#00FF33");
            })

            //改变所有的<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" />
    <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>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的层次选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
        div.mini{
            width: 160px;
            height: 130px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 16px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //改变body内的所有div的背景色为 #0000FF
            $("#b1").click(function (){
                $("div").css("background","#0000FF");
            })

            //改变body内 子div元素的背景色为 #FF0033
             $("#b2").click(function (){
                $("body > div").css("background","#FF0033");
            })

            //改变id为one的下一个div元素的背景色为 #00FFFF
            $("#b3").click(function (){
                $("#one + div").css("background","#00FFFF");
            })

            //改变id为two元素后面的所有兄弟div元素的背景色为 #0000FF
             $("#b4").click(function (){
                $("#two ~ div").css("background","#0000FF");
            })

            //改变所有的<span>元素和id为two class为.mini的元素的背景色为 #3399FF
             $("#b5").click(function (){
                $("#two").siblings("div").css("background","#3399FF");
            })

        })
    </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元素的背景色为 #00FFFF" id="b3" />
    <input type="button" value="改变id为two元素后面的所有兄弟div元素的背景色为 #0000FF" id="b4" />
    <input type="button" value="改变id为two的元素所有div兄弟元素元素的背景色为 #3399FF" id="b5" />
    <hr/>
    <div id="one" class="mini">div id为one</div>
    <div id="two" >
        div id为two
        <div id="two1">id two1</div>
        <div id="two2">id two2</div>
    </div>
    <div id="three" class="mini" >
        div id为three
        <div id="three1">id three01</div>
    </div>
</body>
</html>

基础过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的基础过滤选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
        div.mini{
            width: 160px;
            height: 130px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 16px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //改变第一个div元素的背景色为 #0000FF
            $("#b1").click(function (){
                $("div:first").css("background","#0000FF");
            })

            //改变body内 子div元素的背景色为 #FF0033
             $("#b2").click(function (){
                $("div:last").css("background","#FF0033");
            })

            //改变class不为one的所有div元素的背景色为 #00FFFF
            $("#b3").click(function (){
                $("div:not(.one)").css("background","#00FFFF");
            })

            //改变索引值为偶数div元素的背景色为 #0000FF
             $("#b4").click(function (){
                $("div:even").css("background","#0000FF");
            })

            //改变索引值为偶数div元素的背景色为的元素的背景色为 #3399FF
             $("#b5").click(function (){
                $("div:odd").css("background","#3399FF");
            })

            //改变索引值大于3的div元素的背景色为
            $("#b6").click(function (){
                $("div:gt(3)").css("background","#3399FF");
            })

            //改变索引值等于3的div元素的背景色为
            $("#b7").click(function (){
                $("div:eq(3)").css("background","#3399FF");
            })

            //改变索引值小于3的div元素的背景色为
             $("#b8").click(function (){
                $("div:lt(3)").css("background","#3399FF");
            })

            //改变所有的标题元素的背景色为
            $("#b9").click(function (){
                $(":header").css("background","#3399FF");
            })

        })
    </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元素的背景色为 #FF0033" id="b2" />
    <input type="button" value="改变class不为one的所有div元素的背景色为 #00FFFF" 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="改变所有的标题元素的背景色为 #3399FF" id="b9" />
    <hr/>
    <div id="one" class="mini">div id为one</div>
    <div id="two" >
        div id为two
        <div id="two1">id two1</div>
        <div id="two2">id two2</div>
    </div>
    <div id="three" class="one" >
        div id为three
        <div id="three1">id three01</div>
    </div>
</body>
</html>

内容过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的内容过滤选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
        div.mini{
            width: 160px;
            height: 130px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 16px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //改变含有文本'di'的div元素的背景色为 red
            $("#b1").click(function (){
                $("div:contains('di')").css("background","red");
            })

            //改变不包含子元素(或者文本元素)的div元素的背景色为 pink
             $("#b2").click(function (){
                $("div:empty").css("background","pink");
            })

            //改变含有class为mini元素的div元素的背景色为 green
            $("#b3").click(function (){
                //这个是选择 有class='mini'的div父元素(div)
                //$("div:has('.mini')").css("background","green");

                //这个是选择有class='.mini' 的div
                $("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元素的背景色为 red" 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="xxx" >
        <div id="one" class="mini">div id为one</div>
    </div>
    <div id="two" >
        div id为two
        <div id="two1">id two1</div>
        <div id="two2">id two2</div>
    </div>
    <div id="three" class="one" >
        div id为three class one
        <div id="three1">id three01</div>
    </div>
    <div id="four" class="one">
        XXXXXXXXX
    </div>
    <div id="five" class="one"></div>
    <div id="mover">执行动画</div>
</body>
</html>

可见度过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的可见度过滤选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
        div.mini{
            width: 160px;
            height: 130px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 16px;
            font-family: Roman;
        }
        div.visible{
            display: none;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //改变所有可见的div元素的背景色为 red
            $("#b1").click(function (){
                $("div:visible").css("background","red");
            })

            //选取所有不可见的div,利用show()将它们显示出来,并设置元素的背景色为 pink
             $("#b2").click(function (){
                $("div:hidden").css("background","pink");
                $("div:hidden").show();
            })

            //选取所有的文本隐藏域,并打印它们的值
            $("#b3").click(function (){
                //先得到所有的hidden元素
                var $inputs = $("input:hidden");

                //遍历
<!--                for(var i = 0; i < $inputs.length; i++){-->
<!--                    var input = $inputs[i];-->
<!--                    console.log("input值 = " + input.value);-->
<!--                }-->
                //each()方法
                $inputs.each(function (){
                    console.log("值是(dom方式) = " + this.value);

                    console.log("值是(jquery方式) = " + $(this).val());
                })
            })

        })
    </script>

</head>
<body>

    <input type="button" value="改变所有可见的div元素的背景色为 red" id="b1" /><br/><br/>
    <input type="button" value="选取所有不可见的div,利用show()将它们显示出来,并设置元素的背景色为 pink" 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>

属性过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的属性过滤选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
        div.mini{
            width: 160px;
            height: 130px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 16px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){

            $("#b1").click(function (){
                $("div[title]").css("background","green");
            })

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

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

            $("#b4").click(function (){
                $("div[title^='te']").css("background","green");
            })

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

            $("#b6").click(function (){
                $("div[title*='es']").css("background","red");
            })

            $("#b7").click(function (){
                $("div[id][title*='es']").css("background","red");
            })
        })
    </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元素" 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/>

    <hr/>

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

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

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

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

    <div id="two" title="ale">
        div id为two
    </div>
    <div id="three" class="one" >
        div id为three
    </div>

</body>
</html>

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的子过滤选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
       
    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){

            $("#b1").click(function (){
                $("div .one:nth-child(2)").css("background","yellow");
            })

            $("#b2").click(function (){
                $("div .one:nth-child(1)").css("background","green");
                //$("div .one:first-child").css("background","green");
            })

            $("#b3").click(function (){
                $("div .one:last-child").css("background","red");
            })

            $("#b4").click(function (){
                 $("div .one:only-child").css("background","pink");
            })


        })
    </script>

</head>
<body>

    <input type="button" value="每个class为one的div父元素下的第二个子元素,设置背景色为#0000FF" id="b1" /><br/><br/>
    <input type="button" value="每个class为one的div父元素下的第一个子元素,设置背景色为#0000FF" id="b2" /><br/><br/>
    <input type="button" value="每个class为one的div父元素下的最后个子元素,设置背景色为#0000FF" id="b3" /><br/><br/>
    <input type="button" value="如果class为one的div父元素下仅有一个子元素,那么选中该元素,设置背景色为#0000FF" id="b4" /><br/><br/>

    <hr/>

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

    </div>
    <div class="one">
        <div id="five" class="one">
            XXXXXXXX id = five
        </div>
    </div>


</body>
</html>

表单属性过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的表单属性选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //利用jquery对象的 val()方法,改变表单内type=text可用<input>元素的值
            $("#b1").click(function (){
                $("input[type='text']:enabled").val("羽毛球");
            })

            //利用jquery对象的 val()方法,改变表单内type=text不可用<input>元素的值
            $("#b2").click(function (){
                $("input[type='text']:disabled").val("橄榄球");
            })

            //利用jquery对象的 length属性,获取多选框选中的个数
            $("#b3").click(function (){
                alert($(":checkbox:checked").length);

                //alert($("input[type='checkbox']:checked").length);
            })

            //利用jquery对象的 text()方法,获取下拉框选中的内容
            $("#b4").click(function (){
                 //alert($("select option:selected").text());
                 var $jobs = $("select option:selected");

                  //以下三种方式,都可以打印出选择的value值
<!--                 $.each($jobs,function(){-->
<!--                    alert($(this).val());-->
<!--                 })-->

<!--                 $.each($jobs,function(i,n){-->
<!--                    alert($(n).val());-->
<!--                 })-->

<!--                 $jobs.each(function(){-->
<!--                    alert($(this).val());-->
<!--                 })-->

                    $jobs.each(function(i,n){
                        alert("ok~" + $(n).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/>

    <hr/>

    <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="edu" name="edu">
        <option value="博士">~博士~</option>
        <option value="硕士">~硕士~</option>
        <option value="本科">~本科~</option>
        <option value="小学">~小学~</option>
    </select>

</body>
</html>

表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的表单选择器</title>
    <style type="text/css">
        div,span{
            width: 240px;
            height: 240px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }

    </style>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            //选择所有button
            var btn = $(":button");
            alert("button numbers= " +　btn.length);

            var btn2 = $("input[type='button']");//得到type="button"的元素
            alert("btn2 numbers= " + btn2.length);
            alert("btn标签个数= " + $("button").length);//得到<button />按照元素标签取值



        })
    </script>

</head>
<body>

   <form>
       <input type="text"/><br/>
       <input type="checkbox"/><br/>
       <input type="radio"/><br/>
       <input type="image" src="../imgs/g1.png" height="100px"/><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 value="city">上海</option>
       </select><br/>
       <textarea></textarea><br/>
       <button>按钮2</button><br/>
       <button>按钮3</button><br/>

   </form>

</body>
</html>