jQuery综合代码--(方便复习)

简介: jQuery综合代码--(方便复习)

注意本文涉及到的jQuery的全部基础知识点配套专栏的jQuery和JSON里面的文章看跟好

列一

多选框进行操作, 输出选中的多选框的个数并且把选中爱好的 名称显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对多选框进行操作</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () { //页面加载完毕
            //1. 绑定事件
            //2. 选择对象
            //3. 进行处理
            $("#b1").click(function () {
                //思路:选择所有的checkbox -> 过滤 checked
                var $input = $("input[type='checkbox']:checked");
                console.log("你选择的个数= " + $input.length);
                //显示名称, 遍历 $input
                $input.each(function () {
                    //隐式this
                    console.log("选择的爱好是= " + $(this).val())
                })
            })
        })
    </script>
</head>
<body>
<h1>对多选框进行操作</h1>
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="网球"/>网球
<input type="checkbox" name="hobby" value="排球"/>排球
<input type="button" id="b1" value="点击测试"/>
</body>
</html>

列二

根据图片完成要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据给出的示意图,完成相应的功能</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 使单选下拉框的'2号'被选中
            $("#input1").click(function () {
                //思路,怎么样才是表示选择了某个option
                //通过设置val, 表示选择
                $("#one").val("2号");
            })
            //2. 使多选下拉框选中的'2号'和'5号'被选中
            // 思路和上面类似
            // 如何选择第二个button
            // input:eq(1) 表示选择第二个input对象
            $("input:eq(1)").click(function () {
                $("#many").val(["5号","2号"]);
            })
            //使复选框的'复选2'和'复选4'被选中
            //思路和上面类似
            $("input:eq(2)").click(function () {
                //这里小伙伴注意,val的值是 value属性
                $("input[type='checkbox']").val(["check2","check4"])
            })
            //使单选框的'单选2'被选中
            $("input:eq(3)").click(function () {
                $("input[type='radio']").val(["radio2"]);
            })
        })
    </script>
</head>
<body>
<input type="button" id="input1" value="使单选下拉框的'2号'被选中"/><br>
<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<br/>
<select id="one">
    <option>1号</option>
    <option>2号</option>
    <option>3号</option>
</select>
<select id="many" multiple="multiple" style="height:120px;">
    <option selected="selected">1号</option>
    <option>2号</option>
    <option>3号</option>
    <option>4号</option>
    <option>5号</option>
    <option selected="selected">6号</option>
</select>
<br/>
<br/>
<input type="checkbox" name="c" value="check1"/> 复选1
<input type="checkbox" name="c" value="check2"/> 复选2
<input type="checkbox" name="c" value="check3"/> 复选3
<input type="checkbox" name="c" value="check4"/> 复选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>

列三

根据给出的示意图,完成相应的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据给出的示意图,完成相应的功能. homework03.html</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 点击按钮,完成全选
            $("#CheckedAll").click(function () {
                //留一个小? 我们不使用 attr -> prop
                //$("input[name='items']").attr("checked", "")
                //1. 简单的讲就是prop("checked", true) 就将选择的对象的状态设置为选中
                //2. prop("checked", false), 就将选择的对象的状态设置为未选中
                $("input[name='items']").prop("checked", true);
            })
            //2. 全不选
            $("#CheckedNo").click(function () {
                //这里将选择的对象, 的状态设置为,未选中
                $("input[name='items']").prop("checked", false);
            })
            //3. 反 选
            $("#CheckedRev").click(function () {
                //判断当前是不是选中状态, 进行遍历处理
                $("input[name='items']").each(function () {
                    //alert("当前的状态= " + this.checked)
                    if(this.checked) {
                        $(this).prop("checked", false)
                    } else {
                        $(this).prop("checked", true);
                    }
                })
            })
            //4. 全选/全不选
            $("#checkedAll_2").click(function () {
                //判断当前的<input type="checkbox" id="checkedAll_2"/>全选/全不选 状态
                if(this.checked) {//表示希望全选
                    //把所有的name='items' 的checkbox的状态设置为选中
                    $("input[name='items']").prop("checked", true);
                } else {
                    $("input[name='items']").prop("checked", false);
                }
            })
        })
    </script>
</head>
<body>
<form method="post" action="">
    请选择您的爱好!
    <br><input type="checkbox" id="checkedAll_2"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="游泳"/>游泳
    <input type="checkbox" name="items" value="唱歌"/>唱歌
    <br/>
    <input type="button" id="CheckedAll" value="全 选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反 选"/>
    <input type="button" id="send" value="提 交"/>
</form>
</body>
</html>

列四

使用 JQuery 实现动态添加用户效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 JQuery 实现动态添加用户效果</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //点击删除超链接,完成删除某个用户的任务
        /*
            <tr>
                <td>Jerry</td>
                <td>jerry@sohu.com</td>
                <td>8000</td>
                <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>
            </tr>
         */
        function deleteUser($a) {
            //弹出一个确认的对话框
            var b = window.confirm("你确认要删除 " + $a.attr("id") + " 用户信息");
            if(!b){
                return false;
            }
            //继续处理删除
            //1. 通过$a 找到父tr
            $a.parent().parent().remove();
            return false;
        }
        $(function () {
            //我们将初始化的用户,也绑定删除的事件
            $("a").click(function () {
                //隐式传入this
                //调用deleteUser 时候,需要对this 包装成$(this)
                return deleteUser($(this));
            })
            $("#addUser").click(function () {
                /*
            思路分析==> 代码[功能逐步实现(1) 添加 (2) 删除]
            1. 使用到jquery dom 相关技术
            2. 添加的内容/对象 到 table > tbody
            <tr>
                <td>Jerry</td>
                <td>jerry@sohu.com</td>
                <td>8000</td>
                <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>
            </tr>
            3 如果去构建一个 上面的tr juqery对象
            4.逐步构建
            (1)nameTD, 名字从输入得到
            (2)emailTD,  telTD, deleteTD
            (3)构建 TR, 把前面的td, 加入.
            5.将 tr , 加入 table tbody
            */
                var $nameTD = $("<td/>");
                var nameVal = $("#name").val();
                $nameTD.append(nameVal);
                var $emailTD = $("<td/>");
                var emailVal = $("#email").val();
                $emailTD.append(emailVal);
                var $telTD = $("<td/>");
                var telVal = $("#tel").val();
                $telTD.append(telVal);
                //构建deleteTD
                var $deleteTD = $("<td/>");
                var $a = $("<a/>");
                $a.html("Delete");
                $a.attr("id", nameVal);
                $a.attr("href", "deleteEmp?id=" + nameVal);
                //绑定了 完成点击删除的功能
                $a.click(function (){
                    //专门写一个函数,完成删除任务
                    //解读:如果我们返回的false ,则表示放弃提交,页面就会停留在原页面
                    return deleteUser($a);
                })
                $deleteTD.append($a);
                //创建tr对象
                var $tr = $("<tr/>");
                $tr.append($nameTD);
                $tr.append($emailTD);
                $tr.append($telTD);
                $tr.append($deleteTD);
                //将tr加入到table > tbody
                $("#usertable tbody").append($tr);
            })
        })
    </script>
</head>
<body>
<center>
    <br><br>
    添加用户:<br><br>
    姓名: <input type="text" name="name" id="name"/>&nbsp;&nbsp;
    email: <input type="text" name="email" id="email"/>&nbsp;&nbsp;
    电话: <input type="text" name="tel" id="tel"/><br><br>
    <button id="addUser">提交</button>
    <br><br>
    <hr>
    <br><br>
    <table id="usertable" border="1" cellpadding="5" cellspacing=0>
        <tbody>
        <tr>
            <th>姓名</th>
            <th>email</th>
            <th>电话</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a id="Tom" href="deleteEmp?id=Tom">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>
        </tr>
        </tbody>
    </table>
</center>
</body>
</html>

td>

5000

Delete



Jerry

jerry@sohu.com

8000

Delete



目录
相关文章
|
5月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
68 7
jQuery幸运大转盘抽奖活动代码
|
11月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
52 0
|
JavaScript 开发者
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
92 0
|
2月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
32 1
|
5月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
90 1
|
4月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
31 0
|
5月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
|
5月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
5月前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
37 1
jQuery模态框弹窗提示代码
下一篇
无影云桌面