一、隔行换色

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script  src="../../js/jquery-3.3.1.min.js"></script>

        <script>

            //需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow

            $(function () {

                //1. 获取数据行的奇数行的tr，设置背景色为pink

                $("tr:gt(1):odd").css("backgroundColor","pink");

                //2. 获取数据行的偶数行的tr,设置背景色为yellow

                $("tr:gt(1):even").css("backgroundColor","yellow");

            });

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="800" align="center" >

            <tr>

                <td colspan="5"><input type="button" value="删除"></td>

            </tr>

            <tr style="background-color: #999999;">

                <th><input type="checkbox"></th>

                <th>分类ID</th>

                <th>分类名称</th>

                <th>分类描述</th>

                <th>操作</th>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>0</td>

                <td>手机数码</td>

                <td>手机数码类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1</td>

                <td>电脑办公</td>

                <td>电脑办公类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>2</td>

                <td>鞋靴箱包</td>

                <td>鞋靴箱包类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>3</td>

                <td>家居饰品</td>

                <td>家居饰品类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

        </table>

    </body>

</html>

二、全选&全不选

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script  src="../../js/jquery-3.3.1.min.js"></script>

        <script>

            //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可

            function selectAll(obj){

                //获取下边的复选框

                $(".itemSelect").prop("checked",obj.checked);

            }

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="800" align="center" >

            <tr>

                <td colspan="5"><input type="button" value="删除"></td>

            </tr>

            <tr>

                <th><input type="checkbox" onclick="selectAll(this)" ></th>

                <th>分类ID</th>

                <th>分类名称</th>

                <th>分类描述</th>

                <th>操作</th>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>1</td>

                <td>手机数码</td>

                <td>手机数码类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>2</td>

                <td>电脑办公</td>

                <td>电脑办公类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>3</td>

                <td>鞋靴箱包</td>

                <td>鞋靴箱包类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>4</td>

                <td>家居饰品</td>

                <td>家居饰品类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

        </table>

    </body>

</html>

三、qq表情选择

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>QQ表情选择</title>

     <script  src="../../js/jquery-3.3.1.min.js"></script>

    <style type="text/css">

    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}

    ul{overflow: hidden;}

    li{float: left;width: 48px;height: 48px;cursor: pointer;}

    .emoji img{ cursor: pointer; }

    </style>

    <script>

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

        $(function () {

            //1.给img图片添加onclick事件

            $("ul img").click(function(){

                //2.追加到p标签中即可。

                $(".word").append($(this).clone());

            });

        });

    </script>

</head>

<body>

    <div class="emoji">

        <ul>

            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>

            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>

        </ul>

        <p class="word">

            <strong>请发言：</strong>

            <img src="img/12.gif" height="22" width="22" alt="" />

        </p>

    </div>

</body>

</html>

四、多选下拉列表左右移动

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script  src="../../js/jquery-3.3.1.min.js"></script>

        <style>

            #leftName , #btn,#rightName{

                float: left;

                width: 100px;

                height: 300px;

            }

            #toRight,#toLeft{

                margin-top:100px ;

                margin-left:30px;

                width: 50px;

            }

            .border{

                height: 500px;

                padding: 100px;

            }

        </style>

        <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>

    </head>

    <body>

        <div class="border">

            <select id="leftName" multiple="multiple">

                <option>张三</option>

                <option>李四</option>

                <option>王五</option>

                <option>赵六</option>

            </select>

            <div id="btn">

                <input type="button" id="toRight" value="-->"><br>

                <input type="button" id="toLeft" value="<--">

            </div>

            <select id="rightName" multiple="multiple">

                <option>钱七</option>

            </select>

        </div>

    </body>

</html>

jQuery基础案例的更多相关文章

  1. Jquery基础教程第二版学习记录

    本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...

  2. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  3. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  4. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  5. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  6. 【jQuery基础学习】09 jQuery与前端（这章很水）

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  7. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  8. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  9. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

随机推荐

  1. ASP.NET中App_Data等文件夹的作用

    文件夹名称 文件类型  注 释  Bin .dll 包含应用程序所需的任何预生成的程序集 App_Browsers .browser 包含应用程序特有的浏览器定义文件,ASP.NET用它来识别各浏览器 ...

  2. c# mvc webapi的put报405错误

    程序在本机调试可正常修改,本机是iis11 放到服务器上,报错了:405.服务器iis7.0 返回的错误页面: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  3. 获取Excel

    默认Excel文档为 代码如下   需要下载  "EPPlus.Core" var file = Directory.GetCurrentDirectory() + "\ ...

  4. docker mac 命令行登录报错处理 : Error saving credentials: error storing credentials - err: exit status 1

    参考:https://blog.csdn.net/xufwind/article/details/88756557 比较新版本的docker命令行登录会出现以下错误: Error saving cre ...

  5. Maven中 jar包冲突原理与解决办法

    Maven中jar包冲突是开发过程中比较常见而又令人头疼的问题,我们需要知道 jar包冲突的原理,才能更好的去解决jar包冲突的问题.本文将从jar包冲突的原理和解决两个方面阐述Maven中jar包冲 ...

  6. Node.js 连接 MongoDB数据库

    安装指令:npm install mongodb var mongodb = require("mongodb");// console.log(mongodb); var Mon ...

  7. android shap画圆（空心圆、实心圆）

    实心圆: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" ...

  8. 标记重要和强调的文本 strong & em

    strong元素表示内容的重要性,而em则表示内容的着重点. 根据内容需要,这两个元素既可以单独使用,也可以一起使用. 例如: ... <body> <p><strong ...

  9. 92.vue---新手从本地项目开发到服务器线上运行爬坑。

    因为我做的是后台,所以不用做SEO 参考 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发.因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余.如果你的项目不关注这方面的问题,也 ...

  10. 阿里云ECS使用vnc远程连接(Ubuntu + CentOS)

    阿里云ECS使用vnc远程连接https://blog.csdn.net/m0_37264397/article/details/78271896 在Linux实例上自动安装并运行VNC Server ...