jQuery的dom操作综合练习

最新推荐文章于 2022-09-19 19:43:35 发布

Kaizd

最新推荐文章于 2022-09-19 19:43:35 发布

阅读量397

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/Kaizd/article/details/111466519

版权

本文主要介绍了jQuery的DOM操作综合练习，包括CSS选择和JS操作，适合初学者巩固jQuery基础知识。

摘要由CSDN通过智能技术生成

jQuery的dom操作综合练习

今天跟大家分享的是 jQuery Dom操作综合练习呦！
css部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
    <style>
        #eidtOk{
   
            display: none;
        }
    </style>
</head>
<body>
    <form id="addForm">
        <input type="text"  id="user"> <br>
        男<input type="radio" name="sex"  value="男" checked>
        女<input type="radio" name="sex"  value="女"><br>

        唱歌<input type="checkbox" name="" value="唱歌">
        跳舞 <input type="checkbox" name="" value="跳舞">
        篮球 <input type="checkbox" name="" value="篮球">
        <br>

        <select name="" id="city">
            <option value="陕西">陕西</option>
            <option value="山西">山西</option>
            <option value="河南">河南</option>
            <option value="河北">河北</option>
            <option value="湖南">湖南</option>
            <option value="湖北">湖北</option>
        </select>
        <br>
        <textarea name="" id="msg" cols="30" rows="10"></textarea>
        
        <br>
        <input type="button" value="添加" id="btn" />
        <input type="text" value="" id="index" style="display: none;">
        <input type="button" value="确认修改" id="eidtOk" />


    </form>

     <table border="1">
         <thead>
             <tr>
                 <th>序号</th>
                 <th>姓名</th>
                 <th>性别</th>
                 <th>爱好</th>
                 <th>城市</th>
                 <th>介绍</th>
                 <th>操作</th>
             </tr>
         </thead>
         <tbody id="tbody">
             <!-- <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td>
                     <button>删除</button>
                 </td>
             </tr> -->
         </tbody>
     </table>


    <script src="./01.js"></script>
</body>
</html>

js部分

var i=0;
$("#btn").on("click", function () {
   
    // 文本框
    var user = $("#user").val();

    // 单选框
    var sex = $("#addForm :radio:checked").val();

    // 复选框
    var checkbox = $("#addForm :checkbox:checked")

    var hobby =