day32-JQuery05

jQuery05

9.作业

9.1homework01

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework01</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        //对多选框进行操作,输出选中的多选框的个数比把选中爱好的名称显示
        $(function () {
            //绑定事件
            $("button").click(function () {
                //选择所有的checkbox,再过滤
                var $input = $("input:checked");
                alert("选中的个数= " + $input.length)
                $input.each(function () {
                    alert("值= " + this.value)
                })
            })
        })
    </script>
</head>
<body>
<input type="checkbox" name="sports" value="篮球" checked>篮球
<input type="checkbox" name="sports" value="排球">排球
<input type="checkbox" name="sports" value="羽毛球">羽毛球
<input type="checkbox" name="sports" value="乒乓球">乒乓球
<button>选中的个数</button>
</body>
</html>

9.2homework02

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework02</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //使单选下拉框的'2号'被选中
            $("#b1").click(function () {
                //设置2号的属性值selected为true
                //$("#sid1 > option").eq(1).attr("selected", true)
                //或者
                $("#sid1").val("2号")

            })

            //使多选下拉框中的'2号'和'5号'被选中
            $("#b2").click(function () {
                // //设置2号和5号的属性值selected为true
                // $("#sid2 > option").eq(1).attr("selected", true)
                // $("#sid2 > option").eq(4).attr("selected", true)
                //或者
                $("#sid2").val(["2号", "5号"])
            })

            // 使复选框的'复选2'和'复选4'被选中
            $("#b3").click(function () {
                // 设置2号和4号的属性值checked为true
                // $("input[type='checkbox']").eq(1).attr("checked", true)
                // $("input[type='checkbox']").eq(3).attr("checked", true)
                //或者
                //注意val的值是value的
                $("input[type='checkbox']").val(["fx2", "fx4"])
            })

            //使单选框的'单选2'被选中
            $("#b4").click(function () {
                //设置2号属性值checked为true
                // $("input[type='radio']").eq(1).attr("checked", true)
                //或者
                //注意:这里的val需要传数组!!
                $("input[type='radio']").val(["dx2"])
            })

            //打印已经被选中的值
            $("#b5").click(function () {
                //获取所有选中的值
                var strVal = "";
                //1.下拉单选框
                strVal += "下拉单选框=" + $("#sid1 > option:checked").val();
                //2.多选下拉框
                strVal += "  多选下拉框=";
                $("#sid2 > option:checked").each(function () {
                    strVal += this.value;
                })
                //3.复选框
                strVal += "  复选框=";
                $("input[type='checkbox']:checked").each(function () {
                    strVal += this.value;
                })
                //4.单选框
                strVal += "  单选框=" + $("input[type='radio']:checked").val();
                alert(strVal);
            })
        })
    </script>
</head>
<body>
<button id="b1">使单选下拉框的'2号'被选中</button>
<br/><br/>
<button id="b2">使多选下拉框中的'2号'和'5号'被选中</button>
<br/><br/>
<button id="b3">使复选框的'复选2'和'复选4'被选中</button>
<br/><br/>
<button id="b4">使单选框的'单选2'被选中</button>
<br/><br/>
<button id="b5">打印已经被选中的值</button>
<br/><br/>
<select id="sid1">
    <option>1号</option>
    <option>2号</option>
    <option>3号</option>
    <option>4号</option>
    <option>5号</option>
    <option>6号</option>
</select>
&nbsp;
<select id="sid2" multiple="multiple" size="7">
    <option>1号</option>
    <option>2号</option>
    <option>3号</option>
    <option>4号</option>
    <option>5号</option>
    <option>6号</option>
</select>
<br/>
<input type="checkbox" name="fx" value="fx1">复选1
<input type="checkbox" name="fx" value="fx2">复选2
<input type="checkbox" name="fx" value="fx3">复选3
<input type="checkbox" name="fx" value="fx4">复选4
<br/>
<input type="radio" name="dx" value="dx1">单选1
<input type="radio" name="dx" value="dx2">单选2
<input type="radio" name="dx" value="dx3">单选3
</body>
</html>

9.3homework03

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework03</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //全选
            $("#b1").click(function () {
                // 如果使用attr()方法会有问题:
                // 如果你点击全选按钮,会给所有复选框添加checked属性,如果之后你再取消某个复选框,
                // 重新点击全选按钮,浏览器不会选择之前被取消的框框,因为浏览器会认为这个框已经存在checked属性了
                // 因此不要使用这个-->$("input[name='sports']").attr("checked", "")

                // 简单地讲就是 prop("checked", true) 将选择的对象的状态设置为选中
                // prop("checked", false) 将选择的对象的状态设置为不选中
                $("input[name='sports']").prop("checked", true)
            })

            //全不选
            $("#b2").click(function () {
                // prop("checked", false) 将选中的对象的状态设置为不选中
                $("input[name='sports']").prop("checked", false)
            })

            //反选
            $("#b3").click(function () {
                //判断当前的选择框选择状态
                //遍历处理
                $("input[name='sports']").each(function () {
                    if (this.checked) {
                        $(this).prop("checked", false)
                    } else {
                        $(this).prop("checked", true)
                    }
                })
            })

            //复选框的全选/全不选
            $("input[name='All_notAll']").click(function () {
                //判断当前的All_notAll复选框的状态
                if (this.checked) {//表示希望全选
                    $("input[name='sports']").prop("checked", true)
                } else {
                    $("input[name='sports']").prop("checked", false)
                }
            })
        })
    </script>
</head>
<body>
请选择你的爱好!<br/>
<input type="checkbox" name="All_notAll">全选/全不选<br/>
<input type="checkbox" name="sports" value="足球"/>足球
<input type="checkbox" name="sports" value="篮球"/>篮球
<input type="checkbox" name="sports" value="游泳"/>游泳
<input type="checkbox" name="sports" value="唱歌"/>唱歌<br/>
<button id="b1">全选</button>
<button id="b2">全不选</button>
<button id="b3">反选</button>
<button id="b4">提交</button>
</body>
</html>

9.4homework04

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework04</title>
    <script type="text/javascript" src="../script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">

        //完成点击删除用户信息的功能
        function deleteUser($a) {
            //先弹出一个确认对话框
            var b = window.confirm("是否要删除" + $a.attr("id") + "用户信息?")
            if (!b) {
                return false;
            }
            //获取a父节点的父节点tr
            $a.parent().parent().remove();
            return false;
        }

        $(function () {
            //我们将初始化的用户也绑定一个事件
            $("a").click(function () {
                //隐式传入this
                //调用deleteUser 时候,需要对this 包装成$(this)
                return deleteUser($(this));
            })
            /**
             * 思路分析:
             * 1.使用到jqueryDOM操作
             * 2.添加的内容应该为表格的一行 table>tr
             *   <tr>
             *         <td>姓名</td>
             *         <td>email</td>
             *         <td>电话</td>
             *         <td><a href="">delete</a></td>
             *    </tr>
             *  3.先逐步构建
             *   先获得名字以及它所在的td
             *   然后是email,td
             *   然后是电话,td
             *   最后是delete,td
             *  4.构建一个tr,将前面的td放到tr中
             *  5.tr放到table tbody中
             */

            //绑定事件
            $("#b1").click(function () {
                //获取数据
                // var $data = $("input[type='text']");

                //创建名字及所在的td
                var $nameTd = $("<td/>");
                var nameVal = $("#name").val();
                $nameTd.append(nameVal)

                //创建email及所在的td
                var $emailTd = $("<td/>");
                var emailVal = $("#email").val();
                $emailTd.append(emailVal)

                //创建电话及所在的td
                var $telTd = $("<td/>");
                var tellVal = $("#tel").val();
                $telTd.append(tellVal)

                //创建delete及所在的td
                var $deleteTd = $("<td/>");
                //创建超链接
                var $a = $("<a/>");
                $a.html("Delete");
                //给超链接创建一个id属性,属性值为当前的name
                $a.attr("id", nameVal)
                //给超链接创建一个href属性
                $a.attr("href", "deleteEmp?id=" + nameVal)
                //完成点击删除的功能
                $a.click(function () {
                    //如果返回的是false,就会停留在原页面,不会跳转
                    return deleteUser($a)
                })
                $deleteTd.append($a)

                //创建tr并内部插入之前创建的td
                var $tr = $("<tr/>");
                $tr.append($nameTd)
                $tr.append($emailTd)
                $tr.append($telTd)
                $tr.append($deleteTd)
                //添加到表格中
                $("table tbody").append($tr)
            })
        })
    </script>
</head>
<body>
<center>
    姓名:<input type="text" id="name"/>
    email:<input type="text" id="email"/>
    电话:<input type="text" id="tel"/><br/><br/>
    <input id="b1" type="button" value="提交">
    <hr/>
    <table border="1" width="300">
        <tr>
            <td>姓名</td>
            <td>email</td>
            <td>电话</td>
            <td></td>
        </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>
    </table>
</center>
</body>
</html>
0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • JQuery03 4.jQuery选择器03 4.4表单选择器 应用实例 表单选择器应用实例 $(function () { ...

  • honeySwitch提供了类似手机switch开关的效果风格,它不仅适用于PC端,也适用于移动端。index.html Honey Switch ...

  • JQuery04 6.jQuery的DOM操作02 6.9常用遍历节点方法 取得匹配元素的所有子元素组成的集合:children(),该方法只考虑子元素而不考虑任何后代元素 取得匹配元素后面的...

  • jQuery01 参考文档1:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn) ...

  • JQuery动态生成的按钮无法触发问题与解决方法 起因: 利用JQuery动态添加的按钮无法通过$(selector).click方法触发点击事件 //在网页加载完成后动态添加表格 $(functio...

  • 在项目开发过程中,在对元素进行样式控制时应用到的方法如下: function showOthers(obj){ // 通过jquery方式获取元素值 var type = $(obj).att...

  • JQuery02 4.jQuery选择器02 4.3过滤选择器 4.3.1基础过滤选择器 $("li:first") //第一个li $("li:last") //最后一个li $("l...

  • 基于jQuery的三种AJAX请求 1. 介绍 get请求 通常用于 获取服务端资源(向服务器要资源) 例如:根据URL地址,从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资...

  • 🍀作者主页:在下周周ovo 🍀系列专栏:从零开始百天学习前端基础 🍀其他平台:博客园 1️⃣前言:jQuery必备网站 jQuery下载地址 jQuery中文文档 jQuery插件库 1️...

  • JavaScript/jQuery 如何清空重置选择文件控件 input[type="file"]?请看代码JS://选择 input 元素 const input = document.queryS...

  • 1、安装jquery npm i jquery -D 2、在webpack.base.conf.js里加入 var webpack = require("webpack") 3、在module.exp...