草庐IT

day32-JQuery05

liyuelian 2023-03-28 原文

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>

有关day32-JQuery05的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. STM32读取串口传感器数据(颗粒物传感器,主动上传) - 2

    文章目录1.开发板选择*用到的资源2.串口通信(个人理解)3.代码分析(注释比较详细)1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子,不过代码大概在F103系列的板子上都可以运行,我试过在野火103的霸道板上也可以,主要看一下串口对应的引脚一不一样就行了,不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源,采集数据一个,串口通信一个,板子对应引脚如下:串口1,TX:PA9,RX:PA10串口2,TX:PA2,RX:PA32.串口通信(个人理解)我就从串口采集传感器数据这个过程说一下我自己的理解,

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ? - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单,用户可以在其中添加一个唯一的电子邮件,并让电子邮件测试将其发送到该特定电子邮件。为了简单起见,我决定让测试电子邮件通过ajax执行,并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby-on-rails - rails : Find tasks that were created on a certain day? - 2

    我有一个任务列表(名称、starts_at),我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束),以便进行比较。 最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio

  5. 什么是0day漏洞?如何预防0day攻击? - 2

    什么是0day漏洞?0day漏洞,是指已经被发现,但是还未被公开,同时官方还没有相关补丁的漏洞;通俗的讲,就是除了黑客,没人知道他的存在,其往往具有很大的突发性、破坏性、致命性。0day漏洞之所以称为0day,正是因为其补丁永远晚于攻击。所以攻击者利用0day漏洞攻击的成功率极高,往往可以达到目的并全身而退,而防守方却一无所知,只有在漏洞公布之后,才后知后觉,却为时已晚。“后知后觉、反应迟钝”就是当前安全防护面对0day攻击的真实写照!为了方便大家理解,中科三方为大家梳理当前安全防护模式下,一个漏洞从发现到解决的三个时间节点:T0:此时漏洞即0day漏洞,是已经被发现,还未被公开,官方还没有相

  6. STM32的HAL和LL库区别和性能对比 - 2

    LL库和HAL库简介LL:Low-Layer,底层库HAL:HardwareAbstractionLayer,硬件抽象层库LL库和hal库对比,很精简,这实际上是一个精简的库。LL库的配置选择如下:在STM32CUBEMX中,点击菜单的“ProjectManager”–>“AdvancedSettings”,在下面的界面中选择“AdvancedSettings”,然后在每个模块后面选择使用的库总结:1、如果使用的MCU是小容量的,那么STM32CubeLL将是最佳选择;2、如果结合可移植性和优化,使用STM32CubeHAL并使用特定的优化实现替换一些调用,可保持最大的可移植性。另外HAL和L

  7. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了,但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  8. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - Rails 比较 date.end_of_day.to_datetime 和 date.to_datetime.end_of_day 返回的日期对象值时返回 false - 2

    ruby1.9.3dev(2011-09-23修订版33323)[i686-linux]轨道3.0.20最近为什么在与DateTimeonRails相关的RSpecs项目上工作我发现在给定日期以下语句发出的值date.end_of_day.to_datetime和date.to_datetime.end_of_day虽然它们表示相同的日期时间,但比较时返回false。为了确认这一点,我打开了Rails控制台并尝试了以下操作1.9.3dev:053>monday=Time.now.monday=>2013-02-2500:00:00+05301.9.3dev:054>monday.cla

随机推荐