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>
<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的更多相关文章
- Spark Streaming揭秘 Day32 WAL框架及实现
Spark Streaming揭秘 Day32 WAL框架及实现 今天会聚焦于SparkStreaming中非常重要的数据安全机制WAL(预写日志). 设计要点 从本质点说,WAL框架是一个存储系统, ...
- day32 进程
上午: # 1 开启子进程 #target #args # if __name__ == '__main__' #start() # 2.其它的方法: #方法: #terminate() #is_al ...
- day32
今日内容 1.基于TCP协议(通信循环) 2.基于TCP协议(连接循环) 3.粘包问题 4.模拟SSH实现远程执行命令 服务器端 ################################### ...
- day32——进程、操作系统
day32 进程的基础 程序 一堆静态的代码文件 进程 一个正在运行的程序进程.抽象的概念 被谁运行? 由操作系统操控调用交于CPU运行 操作系统 管理控制协调计算机中硬件与软件的关系 操作系统的 ...
- day32 HTML
day32 HTML 什么是前端 只要是跟用户打交道的界面都可以称之为前端 # eg:电脑界面, 手机界面,平板界面, 什么是后端? eg:python, java,php,go, 不跟用户直接打交道 ...
- javascript DOM,它到底是什么-------Day32
这一晚上看的我是头疼不已啊,为什么呢? 终究是半路出家,我对javascript的理解仅仅停留在:调用javascript,改变页面样式,元素和实现一些事件的响应,尽管须要的时候可能会用,可是到底使用 ...
- Python全栈之路-Day32
1 类的__slots__ #!/usr/bin/env python # __Author__: "wanyongzhen" # Date: 2017/4/25 # 只能定义__ ...
- Day3-2 函数之递归
递归 定义:一个函数在 内部调用自己,就称为递归. # 如何让10不停的除以2,直到不能除为止. n = 10 while True: n = int(n /2) print(n) if n == 0 ...
- day32 process模块用法
昨日作业: 服务端: 服务端: from socket import * from multiprocessing import Process def server(ip,port): server ...
- day32基于tcp协议的远程执行命令
客户端 from socket import *import structimport json client = socket(AF_INET, SOCK_STREAM)client.connect ...
随机推荐
- AOKO奥科美2.5英寸外置硬盘盒开箱
上次在坛子里发布了一个帖子,然后根据坛友们的反馈,换购了另一个SATA固态硬盘.另一个是配套的硬盘盒,当时在某宝上搜了一圈,最终购买了这款硬盘盒,主要是因为它的外观,旁边有散热片.这款硬盘盒在某宝上不 ...
- RabbitMQ基础学习Full版
RabbitMQ 消息队列在软件中的应用场景 异步处理上(优于原先的方式) 为什么优于呢? 首先,通常情况下,如上图我们其实不用消息队列的情况下,其实也可以不用100ms,不用allof即可 那么优势 ...
- 下载、安装Git并拷贝GitHub项目到本地的流程
本文介绍分布式开源版本控制系统Git的下载.安装,并基于Git实现克隆GitHub中项目代码的方法. Git是一款开源软件,因此我们直接在Git的官方下载地址下载最新版本的Git即可.其中,在 ...
- CentOS在无网络环境下，用离线源yum安装软件
先说大致步骤: 1.前提假设:当前无网络的目标服务器是A,我们需要先准备一台服务器B: 2.在B上面用yum先把软件安装完成. 3.然后用createrepo将B中的包拷贝出来,并传到A上(用U盘或者 ...
- Vue+SpringBoot+ElementUI实战学生管理系统-7.专业管理模块
1.章节介绍 前一篇介绍了院系管理模块,这一篇编写专业管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码 源码是捐赠方式获取,详细请QQ联系我 :)! 3.实现效果 专业列表 修改专业 4.模块 ...
- Oracle开发人员守则
以下为Oracle大师级语录: Oracle Database developers should follow is to do everything they can in SQL. What t ...
- virtualapp安装应用流程源码分析
1. HomeActivity 为处理的入口 @Override protected void onActivityResult(int requestCode, int resultCode, In ...
- MySQL的随机排序（random orderby）
MySQL的随机排序(random orderby)是指在查询数据库时,将结果集以随机的方式排列.这种排序方式可以用于有趣的应用场景,例如实现随机音乐播放.广告推荐等. 要实现MySQL的随机排序,可 ...
- RK3568开发笔记（三）：RK3568虚拟机基础环境搭建之更新源、安装网络工具、串口调试、网络连接、文件传输、安装vscode和samba共享服务
前言 开始搭建RK3568的基础虚拟机,具备基本的通用功能,主要包含了串口工具minicom,远程登陆ssh,远程传输filezilla,代码编辑工具vscode. 虚拟机 文档对对虚拟机 ...
- 【算法day5】排序算法的稳定性及其汇总
稳定性 定义:值相同的元素在排序完成之后能否保证原有的次序不变(同样值的个体之间,如果不因为排序而改变相对次序,这个排序就是有稳定性的,否则就没有) 举例: [2,1,3,1]-->[1,1,2 ...