jQuery表单选择器

JavaScript操作DOM元素与事件处理

最新推荐文章于 2024-09-07 09:11:35 发布

原创最新推荐文章于 2024-09-07 09:11:35 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

这篇博客展示了如何使用JavaScript获取和操作DOM元素，包括文本输入框、单选按钮和复选框的值。通过fun1()、fun2()和fun3()函数，分别演示了读取text、radio和checkbox的值，并利用jQuery库进行值的获取。博客内容涵盖了基本的DOM操作和事件处理，适合初学者理解JavaScript与页面交互的基础知识。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript" src="jss/jquery-3.4.1.js"></script>
    <script>
        function fun1(){
            //使用表单选择器
            let text=$(":text");
            //弹出text中的值
            alert(text.val());
        }
        function fun2(){
            let radio=$(":radio");
            for (let i=0;i<radio.length;i++) {
                let sex = radio[i];
                alert(sex.value);
            }
        }
        function fun3(){
            let checkbox=$(":checkbox");
            for (let i=0;i<checkbox.length;i++){
                let sport=checkbox[i];
                //转成jquery对象
                let jsport=$(sport);
                //alert(sport.value);
                //调用jquery函数
                alert(jsport.val());
            }
        }
    </script>
        <input type="text" value="我是text"><br>
        <input type="radio" value="男">男<br>
        <input type="radio" value="女">女<br>
        <input type="checkbox" value="bike">骑行<br>
        <input type="checkbox" value="swim">游泳<br>
        <input type="checkbox" value="camp">露营<br>
        <input type="button" value="读取text的值" onclick="fun1()">
        <input type="button" value="读取radio的值" onclick="fun2()">
        <input type="button" value="读取checkbox的值" onclick="fun3()">
    </body>
</html>