【JavaWeb】JQuery练习（37）

最新推荐文章于 2022-09-01 19:43:47 发布
最新推荐文章于 2022-09-01 19:43:47 发布
阅读量107 收藏
点赞数
分类专栏： Java 文章标签： js html html5 checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alpha_xia/article/details/108077428
版权

引言

  • 将进酒，杯莫停；

隔行换色

需求描述

为表格的奇数行选择红色背景，偶数行蓝色；

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        table,tr,td{
            border: 1px solid;
          table-layout: inherit;
        }
    </style>
    <script>
        $(function () {
          $("tr:gt(1):even").css("backgroundColor","red")
        })
        $(function () {
            $("tr:odd").css("backgroundColor","blue")
        })
    </script>
</head>
<body>
<table  align="center" cellpadding="20px">
    <th>
        <td>序号</td>
        <td>姓名</td>
        <td>班级</td>
        <td>地址</td>
    </th>
    <tr>
        <td></td>
        <td>1</td>
        <td>高冷</td>
        <td>1班</td>
        <td>蒙城县</td>
    </tr>
    <tr>
        <td></td>
        <td>2</td>
        <td>高能</td>
        <td>2班</td>
        <td>北京市</td>
    </tr>
    <tr>
        <td></td>
        <td>3</td>
        <td>高效</td>
        <td>3班</td>
        <td>上海市</td>
    </tr>
    <tr>
        <td></td>
        <td>4</td>
        <td>高效</td>
        <td>3班</td>
        <td>上海市</td>
    </tr>
    <tr>
        <td></td>
        <td>5</td>
        <td>高效</td>
        <td>3班</td>
        <td>上海市</td>
    </tr>
    <tr>
        <td></td>
        <td>6</td>
        <td>高效</td>
        <td>3班</td>
        <td>上海市</td>
    </tr>
</table>

</body>
</html>

演示

(ps)红蓝配有点丑~~~

在这里插入图片描述

全选/全不选

需求描述

每行的选择状态与第一行一致；

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选/全不选</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script>
        function selectAll(obj) {
         // alert(obj.checked)
            $(".check").prop("checked",obj.checked)
        }
    </script>
</head>
<body>
<table  align="center" cellpadding="20px">
    <tr>
        <td><input type="checkbox" class="checkAll()" onclick="selectAll(this)">全选</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>序号</td>
        <td>姓名</td>
        <td>班级</td>
        <td>地址</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>1</td>
        <td>高冷</td>
        <td>1班</td>
        <td>蒙城县</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" checked="true"></td>
        <td>2</td>
        <td>高能</td>
        <td>2班</td>
        <td>北京市</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>3</td>
        <td>高效</td>
        <td>3班</td>
        <td>上海市</td>
    </tr>
</table>
</body>
</html>

演示

在这里插入图片描述

表情选择

需求描述

模仿聊天框来添加表情包；

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ表情选择</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        img{
            height: 50px;
            width: 50px;
        }
        li{
            float: left;
            width: 100px;
            height: 100px;
        }
        p{
            float: left;
        }
    </style>
    <script>
       $(function () {
           $("ul img").click(function(){
               //2.追加到p标签中即可。
              $(".word").append($(this).clone())
           });
       })
    </script>
</head>
<body>
   <ul class="face">
       <li><img src="../img/p1.gif"></li>
       <li><img src="../img/p2.gif"></li>
       <li><img src="../img/p3.gif"></li>
       <li><img src="../img/p4.gif"></li>
       <li><img src="../img/p5.gif"></li>
   </ul>
   <br><br><br><br>
   <p class="word">
       请开始你的表演:
   </p>
</body>
</html>

演示

在这里插入图片描述

高冷小伙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb - jQuery
sunqianLOL的博客
09-22 365
jQuery <!-- jQuery 介绍 什么是 jQuery？ 顾名思义，也就是 JavaScript 和查询(Query)，它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想!!! 它的核心思想是 write less,do more(写的更少，做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为
JavaWeb day10-Jquery综合练习
qq_42640205的博客
09-19 193
利用ajax实现用户注册校验 同步请求和异步请求 同步：发送同步请求，服务器响应后，页面整体刷新 异步：发送异步请求，服务器响应后，页面局部刷新 本次练习只需在注册界面局部刷新提示检验信息，所以使用异步请求，故千万不能使用转发和重定向。 什么是ajax Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 用于浏览器和服务器之间的异步请求机制 jQuery框架下的ajax函数 什么是json字符
Javaweb jQuery功能练习
weixin_45829957的博客
08-23 142
1、jQuery 的属性操作 jQuery 属性操作： html() 它可以设置和获取起始标签和结束标签中的内容。跟dom 属性innerHTML 一样。 text() 它可以设置和获取起始标签和结束标签中的文本。跟dom 属性innerText 一样。 val() 它可以设置和获取表单项的value 属性值。跟dom 属性value 一样 val 方法同时设置多个表单项的选中状态： <!DOCTYPE html> <html lang="zh_CN"> <.
JavaWeb jQuery
weixin_65637841的博客
07-21 263
1.jQuery 介绍 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 好处！！！ jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、......
javaWeb-jQuery
维他柠檬茶的博客
02-22 702
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 jQuery一、jQuery是什么？二、js与jQuery1.jQuery的引入2.js与jQuery的使用差别三、jQuery的核心函数介绍1.传入的参数为【函数】时2.传入的参数为【HTML字符串】时3.传入的参数为【选择器字符串】时4.传入的参数为【Dom对象】时四、如何区分js原生Dom对象和jQuery对象1.Dom对象特点2.jQuery对象特点五、jQuery对象的本质六、Dom对象与jQuery对象的相互转换七、jQuery
JavaWeb——jQuery
一个憨憨写的胡言乱语
10-07 281
JavaWeb——jQuery1、介绍2、jQuery的使用2.1、jQuery的核心函数 1、介绍 也就是JavaScript和Query，是辅助JavaScript开发的JS类库，它的核心思想是，写的更少，做的更多，实现了很多浏览器的兼容问题。 2、jQuery的使用 2.1、jQuery的核心函数 是jQuery的核心函数，能完成jQuery的很多功能，是jQuery的核心函数，能完成jQuery的很多功能，是jQuery的核心函数，能完成jQuery的很多功能，{}就是调用$这个函数 传入
JavaWeb__JQuery
wanananhh的博客
09-01 238
Jquery
JavaWeb_jQuery
binnnnnnn_的博客
05-05 106
1、jQuery 介绍 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。 jQuery 好处！！
jQuery练习
weixin_58562753的博客
11-29 286
jQuery练习
JavaWeb上机练习11.zip
04-20
【JavaWeb上机练习11.zip】是一个包含JavaWeb编程实践的压缩文件，由原创作者田超凡制作。这个文件可能包含一系列的源代码、HTML、CSS、JavaScript、Servlet、JSP等文件，用于帮助学习者掌握JavaWeb开发的基础知识和...
JavaWeb-学院图书借阅系统，用于javaWeb考试前练习
04-13
- **jQuery**：简化JavaScript操作，提高前端开发效率。 - **Bootstrap**：流行的前端框架，提供响应式布局和预设的UI组件，快速构建美观的页面。 6. **文件上传与下载** - **Commons-FileUpload**：Apache ...
javaWeb当当购书网(jsp+mysql+jquery+css)
最新发布
05-29
本项目是一套基于javaWeb当当购书网，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含：项目源码、项目文档、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格...
javaweb相关查询文档
08-02
JavaWeb相关查询文档包含了多个重要的技术手册，这些资源对于学习和理解JavaWeb开发至关重要。以下是对每个文件内容的详细说明： 1. **CSS2.0.chm**：这是关于CSS（层叠样式表）2.0的官方帮助文档。CSS是用于描述...
JavaWEB学习demo
04-20
可能有使用jQuery、XMLHttpRequest或Fetch API进行Ajax请求的示例，以及JSON数据的序列化和反序列化。 通过深入研究这些示例，学习者可以更好地理解Java Web开发的工作原理，并能动手实践，为自己的项目积累经验。...
Java实现人脸识别(各项目结构都有案例说明)
高高冷的博客
12-06 6272
功能简述 感觉人脸识别功能有点意思，就尝试写了一个小demo，然后将其整合到自己的项目中；下面是基于Java实现的人脸识别demo。 功能流程 调用摄像头获取图像 判断是否为新用户 然后就会跳转： 下面会具体分析 SDK 这个人脸识别的功能是调用的第三方SDK，自己不会写~~。 注册之后，可以免费使用100个应用；且适用于多平台，我这里是windows64位； 下载后的SDK目录如下： 里面有说明文档、jar包以及依赖文件和一个demo。 JavaWeb版 这里是官网给的JavaWeb版案例，我
单例模式中的双重锁详解
高高冷的博客
11-28 5861
双重检查 public class SingletonExample { private volatile static SingletonExample singletonExample; public SingletonExample getInstance(){ if (singletonExample==null){ synchronized (SingletonExample.class){ if (singl
Spring MVC框架介绍&基本使用总结
高高冷的博客
08-12 1503
1. 基本概念 1.1 什么是SpringMVC 所谓MVC，就是模型(Model)，视图(View)，控制器(Controller)。是一种软件设计规范。通过业务逻辑、数据、显示的方式来组织代码。 模型(Model) 视图(View) 控制器(Controller) 1.2 MVC的执行流程 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89cKevik-1628728815225)(C:\Users\CoolGuy\AppData\Roaming\Typora\
项目提交到GitHub(全流程)
高高冷的博客
10-13 993
项目提交到GitHub(全流程) 持续输出学习心得干货，欢迎关注收藏 1.准备工作 1.1创建Github账号 账号肯定是必须要有滴~~ 官网跳转 1.2安装Git工具 下载链接 选择需要的版本进行下载即可，安装时直接默认“下一步”即可。 不会的话可以参考这篇博客 1.3本地创建SSH Key 1.创建SSH Key。 在用户主目录（C:\Users\Administrator）下，看看有没有.ssh文件，如果有，再看文件下有没有id_rsa和id_rsa.pub这两个文件
javaweb怎么学习
03-28
1. 先学习Java基础知识，包括语法、面向对象编程、数据结构和算法等。 2. 学习JavaWeb的基础知识，包括Servlet、JSP、JDBC等。 3. 学习Web开发框架，如Spring、Spring MVC、MyBatis等。 4. 学习前端开发技术，如HTML、CSS、JavaScript、jQuery等。 5. 学习数据库技术，如MySQL、Oracle等。 6. 练习实际项目，通过实践来加深对JavaWeb技术的理解和掌握。 7. 参加培训课程或者参加相关的在线学习平台，如MOOC、慕课网等。 8. 参考相关的书籍、博客、论坛，获取更多的学习资料和经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高冷小伙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值