一、隔行换色

<!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. 浅谈maven setting.xml 设置的mirrorof标签作用。

    https://blog.csdn.net/whbing1471/article/details/53983779 A 看这一段 背景:写好的java项目放置到linux服务器上进行编辑的时候,由于m ...

  2. C# 连接数据库的配置方法

    写在前面 在项目的开发过程中我门常常遇到会忘记数据库连接的配置的写法的尴尬处境.俗话说,好记性不如烂笔头.所以,mark一下. 1.Sqlserver数据库连接 <connectionStrin ...

  3. 【转】socket通信-C#实现tcp收发图片音视频等字节流数据

    在日常碰到的项目中,经常碰到需要收发二进制数据的场景.比如要发送一张图片,要发送一首音频,要发送一个压缩包,要发送一个视频等等.这些数据并非字符串,而是二进制字节流数据.那么如何如何使用SharpSo ...

  4. 关闭Postman 证书的验证

    1.问题背景 使用自己生成的SSL证书,用Postman访问失败.需要忽略SSL证书的验证 2.关闭Postman 证书的验证 在Settings-General中 关闭SSL certificate ...

  5. intent 参数的规范

    对于采用 intent 参数的 Activity Manager 命令,您可以使用以下选项指定 intent: -a action 指定 intent 操作,如“android.intent.acti ...

  6. Java自学-异常处理 自定义异常

    Java 自定义异常 示例 1 : 创建自定义异常 一个英雄攻击另一个英雄的时候,如果发现另一个英雄已经挂了,就会抛出EnemyHeroIsDeadException 创建一个类EnemyHeroIs ...

  7. JavaWeb第三天--JavaScript

    JavaScript 1. JavaScript概述 1.1 JavaScript是什么?有什么作用? HTML:就是用来写网页的.(人的身体) CSS:就是用来美化页面的.(人的衣服) JavaSc ...

  8. psexec与wmi在内网渗透的使用

    psexec是一个很好的管理工具,在内网渗透中也被广泛使用. 但太“出名”也往往会遭来各种麻烦. 在有安全监听.防护的内网中使用psexec会容易触发告警. 1.psexec用法(前提:对方要开启ad ...

  9. React的基本知识和优缺点

    阮一峰 React入门实例教程 知识点 1.html模板3个预加载的js文件,script的type属性 2.ReactDOM.render() 3.JSX语言:允许js和html的混写 4.comp ...

  10. Python的object和type理解及主要对象层次结构

    一.Object与Type 1.摘自Python Documentation 3.5.2的解释 Objects are Python’s abstraction for data. All data ...