jQuery练习六

最新推荐文章于 2022-10-13 09:14:07 发布
最新推荐文章于 2022-10-13 09:14:07 发布
阅读量102 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syh945/article/details/83886779
版权
ex-6.html 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
		<script type="text/javascript">
		$(function(){

			function setFileCount() {
				$(".fileCount").each(function(index){
					$(this).text('附件' + (index + 1)) ;
				}) ;
			}

			$("#addFile").click(function(){
				$("<tr></tr>").append("<td class='fileCount'></td>")
							  .append($("<td><input type='file' name='file'><button>Delete</button></td>"))
							  .insertBefore("#content")
							  .find("button")
							  .click(function(){
							  	$(this).parent().parent().remove() ;
								setFileCount() ;
							  }) ;

				setFileCount() ;
				return false ;
				});
			}) ;


		</script>

    </head>
    <body>
        <form name="mailForm" method="post" action="/javamail/mail.do" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>
                        主题:
                    </td>
                    <td>
                        <input type="text" name="subject" value="">
                    </td>
                </tr>
                <tr>
                    <td>
                        收件人:
                    </td>
                    <td>
                        <input type="checkbox" name="mailTo" value="hello@itcast.cn">hello
						<input type="checkbox" name="mailTo" value="test@itcast.cn">test
						<input type="checkbox" name="mailTo" value="abc@itcast.cn">abc
						<input type="checkbox" name="mailTo" value="msn@itcast.cn">msn
                    </td>
                </tr>
                <tr>
                    <td class='fileCount'>
                        附件1:
                    </td>
                    <td>
                        <input type="file" name="file" value="">
                        <button id="addFile">
                            AddFile
                        </button>
                    </td>
                </tr>
                <tr id="content">
                    <td>
                        邮件内容:
                    </td>
                    <td>
                        <textarea name="content">
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Submit">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

syh945
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery的几个小练习
paradoxzl的博客
07-14 641
学习jQuery过程中的小练习
JQuery练习题3
m0_56628949的博客
06-28 176
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：MVC 作者：空白 撰写时间：2021年6月28日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 首先，让我们来看一下布局： 再引入一个jQuery文件 一共有十个小题： 第一题答案以及样式如下： 第二题.
JQuery练习案列
m0_71467744的博客
10-13 426
内部实现事件函数，并采用类选择器，将表中复选框的checked属性值设置为与当前复选框的值一样。在
jQuery练习
qq_42609916的博客
04-16 126
表格数据操作 <body> <style type="text/css"> table,th,td{ border: black 1px solid; border-collapse: collapse; } </style> <table> <thead> <...
jQuery练习——下拉菜单
m0_55394328的博客
09-12 3541
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。 笔者还是前端的菜鸟，还请大家多多指教呀~
jQuery练习题
sshhzyq的博客
12-22 587
1.开关灯：点击按钮更改背景颜色 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <style> img { display: block; margin: 10px auto;
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1251
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
jQuery练习-全屏滚动
m0_59946059的博客
08-12 743
全屏滚动可以看作竖向的轮播图，通过鼠标的滚轮的上滑或下滑操作，向上或向下滑动一整屏。实现思路如下：设置行高100%的盒子，设定溢出隐藏（overflow: hidden）属性，盒子里嵌套着一个大盒子，用于装下轮播显示的小盒子。每一次滑动滚轮或点击向下的按钮，改变大盒子的top属性，向上或向下滚动。...
JQuery练习
SALAMU123的博客
09-30 87
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库 JQuery基本筛选器 线上引入Jquery: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> ...
jQuery练习t110
虾米大王的学习历程
01-21 180
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ font-size: 13px; } .iframe{ width: 260p.
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
JQuery使用练习
09-26
本练习旨在帮助你熟悉并掌握jQuery的基本用法，包括选择器、事件、文档处理、函数以及属性的运用。 首先，让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器，允许你高效地选取DOM元素。例如，`$("#id")`...
基于微信小程序奶茶点餐小程序设计与实现.docx
08-27
基于微信小程序奶茶点餐小程序设计与实现.docx
点火时序控制系统硬件设计毕业论文（设计）.doc
08-27
点火时序控制系统硬件设计毕业论文（设计）.doc
扫雷游戏 java课程设计（源码+论文）
最新发布
08-27
项目描述: 使用Java独立开发了一款高级扫雷游戏，具备自定义难度设置、智能化提示、实时计时和排行榜功能。通过面向对象设计模式实现了模块化代码结构，增强了程序的可维护性和扩展性。 主要功能: 自定义难度: 用户可以自由设置游戏的雷区大小和雷数。 智能提示: 提供智能化的地雷提示，提高游戏的趣味性与挑战性。 实时计时与排行榜: 实现了实时计时功能，并记录历史最佳成绩，增强用户体验。
springboot411箱包存储系统pf.zip
08-27
箱包存储系统可以对箱包存储系统信息进行集中管理，可以真正避免传统管理的缺陷。箱包存储系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，箱包存储系统都可以轻松应对。所以，箱包存储系统的运用是让箱包存储系统信息管理升级的最好方式。它可以实现信息处理的便利化要求，还可以规范信息处理的流程，让事务处理成为管理人员手中的一件简单事，而不是之前手工处理时的困难事。尽管箱包存储系统具备较完善的功能，但是也需要管理人员利用闲暇时间提升自身素质以及个人能力，在操作箱包存储系统时可以最大化运用箱包存储系统提供的功能，让系统在满足高效率处理数据的同时，也能始终稳定运行，还可以确保数据的可靠性与数据处理的质量。
驾驭数据洪流：深入MySQL API的数据访问与操作
08-27
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
jquery案例练习
06-20
jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax等功能。以下是一些常见的jQuery案例练习： 1. **选择器练习**：使用`$("#id")`或`$(".class")`选择HTML元素，如获取或修改特定ID或类名的元素内容。 ```javascript // 获取id为"example"的元素 var element = $("#example"); // 修改类名为"highlighted"的元素文本 $(".highlighted").text("Hello, jQuery!"); ``` 2. **事件绑定**：给元素添加事件监听器，比如点击事件(`click()`)。 ```javascript $("#myButton").on("click", function() { alert("Button clicked!"); }); ``` 3. **动画效果**：使用`.fadeIn()`、`.slideUp()`等方法创建动画。 ```javascript $("#myDiv").fadeIn(1000); // 慢慢淡入 $("#myOtherDiv").slideUp(500); // 慢慢滑出 ``` 4. **Ajax请求**：发送异步数据到服务器，比如获取数据填充表格。 ```javascript $.ajax({ url: "data.json", type: "GET", success: function(data) { $("#myTable").html(data); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值