java web-11.4Jquery基础案例

心已赠人 2023-02-11 07:26 22阅读 0赞

## 案例-隔行换色 ##

需求：将数据行的奇数行背景色设置为pink，偶数行背景色设置为yellow  
分析：  
1.获取奇数行的tr并设置背景色为pink  
2.获取数据行的偶数行的tr，设置背景色为yellow

<script>
            //入口函数
            $(function () { 
                //1.获取奇数行的tr并设置背景色为pink
                $("tr:gt(1):odd").css("backgroundColor","pink");
               // 2.获取数据行的偶数行的tr，设置背景色为yellow
                $("tr:gt(1):even").css("backgroundColor","yellow");
            })
        </script>

## 案例-全选全不选 ##

需求：点击最上面的checkbox，下面全选，或全不选  
分析：需要保证下面的选中状态和第一个复选框的选中状态一致即可

<script>
               //分析：需要保证下面的选中状态和第一个复选框的选中状态一致即可
            function selectAll(obj) { 
                //获取下面的复选框
                $(".itemSelect").prop("checked",obj.checked);
            }
        </script>

## 案例-qq表情选择 ##

需求，一排qq表情，点击表情，将其追加到发言框中

<script>
            //入口函数
            $(function () { 
                //1.给img图片添加onclick事件
                $("ul img").onclick(function () { 
                    // 2.追加到p标签即可
                    $(".word").append($(this).clone())
                })
            })
        </script>

## 案例-下拉列表选中条 ##

需求：实现下拉列表选中条目左右选择功能

<script>
            //入口函数
            $(function () { 
               //toRight
                $("#toRight").click(function () { 
                    //获取右边的下拉列表对象,append(左边下拉列表选中的option)
                    $("#rightName").append($("#leftName > option:selected"));
                });
                //toLeft
                $("#toLeft").click(function () { 
                    //appendTo 获取右边选中的option，将其移动到左边下拉列表中
                    $("#rightName > option:selected").appendTo($("#leftName"));
                })
            })
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关实践提升：Java Web开发基础案例

Java Web开发基础案例可以涵盖以下几个方面： 1. **HTTP协议理解**： - 创建一个简单的RESTful API，如一个博客系统，允许用户创建、查看和删除

「爱情、让人受尽委屈。」/ 2024年10月16日 19:33/ 0 赞/ 27 阅读

相关 Java Web开发基础：Servlet与JSP应用案例

在Java Web开发中，Servlet和JSP是两个核心的技术。 1. Servlet： Servlet是一种轻量级的Java对象，它们负责响应客户端发送的HTTP请求。S

谁践踏了优雅/ 2024年10月11日 00:57/ 0 赞/ 97 阅读

相关 114.同期及上期数据对比处理-案例

--雇员数据 CREATE TABLE Employee( ID int, --雇员编号(主键) Name nvarc

我就是我/ 2024年02月19日 19:02/ 0 赞/ 29 阅读

相关 jquery 基础+Tab栏切换案例

类操作在原生JS里面className会覆盖元素原来有的类名 jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名添加类名 add

Bertha 。/ 2023年07月08日 05:48/ 0 赞/ 62 阅读

相关 Java Web基础

Http协议 HTTP是实现客户端和服务器端通信的重要协议。一个完整的请求消息是由请求行、请求头和实体内容三部分组成。 HTTP请求行包含三个部分，分别是请求方

拼搏现实的明天。/ 2023年06月06日 03:46/ 0 赞/ 35 阅读

相关 java web-11.1Jquery基础

JQuery基础 1.概念：（1）一个JavaScript框架，简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后

Dear 丶/ 2023年03月14日 08:12/ 0 赞/ 41 阅读

相关 java web-11.4Jquery基础案例

案例-隔行换色需求：将数据行的奇数行背景色设置为pink，偶数行背景色设置为yellow 分析： 1.获取奇数行的tr并设置背景色为pink 2.获取数据行

心已赠人/ 2023年02月11日 07:26/ 0 赞/ 23 阅读

相关 JQuery-学习笔记04【基础——JQuery基础案例】

> [Java后端学习路线笔记汇总表【黑马程序员】][Java_ _] > > 1. [JQuery-学习笔记01【基础——JQuery基础】][JQuery-_

男娘i/ 2022年10月30日 11:18/ 0 赞/ 246 阅读

相关 Java_Web基础--JDBC/HTML/Servelet/Web/JSP/jQuery(你必须要懂得基础)

风离紫竹--tryzq521@126.com <table style="width:841px"> <tbody> <tr> <td style="wid

古城微笑少年丶/ 2022年09月21日 05:53/ 0 赞/ 258 阅读

相关 Web前端JQuery入门实战案例

![标题图][1240] > 前端`jquery`入门到实战为什么要学习`Jquery`?因为生活。案例： <!DOCTYPE html> <htm

旧城等待，/ 2021年09月18日 03:34/ 0 赞/ 372 阅读