一、隔行换色

<!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. WinExec， ShellExecute，CreateProcess 区别

    其中以WinExec最为简单,ShellExecute比WinExec灵活一些,CreateProcess最为复杂. WinExec 有两个参数,前一个指定路径,后一个指定显示方式. ShellExe ...

  2. xcode11新项目删除main.storyboard 两种方法

    方法一 心急的童鞋按照老操作完成后再按照如下操作即可 /** 弃用storboard 1.info.plist去除 <key>UIApplicationSceneManifest</ ...

  3. JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能

    一.去官网下载webuploader文件上传插件 https://fex.baidu.com/webuploader/ 下载好后把它放到Javaweb项目的文件夹中(我放到了webcontent下面的 ...

  4. C#使用SMTP协议发送验证码到QQ邮箱

    C#使用SMTP协议发送验证码到QQ邮箱 在程序设计中,发送验证码是常见的一个功能,用户在注册账号时或忘记密码后,通常需要发送验证码到手机短信或邮箱来验证身份,此篇博客介绍在C#中如何使用SMTP协议 ...

  5. JavaScript 书写位置

    类似于 CSS 样式,JavaScript 也有三种不同位置的书写方式. 1.写在行内 <input type="button" value="按钮" o ...

  6. 模块化规范：CMD和AMD的区别

    https://www.zhihu.com/question/20351507/answer/14859415 AMD(异步模块定义) 是 RequireJS 在推广过程中对模块定义的规范化产出.CM ...

  7. OCR1：开源库

    OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形状翻译 ...

  8. 搭建前端监控系统（五）Nodejs怎么搭建消息队列

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  9. mysql数据库SQL执行分析，优化前必备分析

    概述 一般我们在对mysql数据库做优化,肯定需要对慢sql去做分析才能开始优化,那么有什么分析的方法呢?下面通过对sql执行时间和执行情况来做分析. 一.SQL 执行时间分析 通过找到执行时间长的 ...

  10. Linux操作系统-CentOS7启动流程和服务管理

    Linux操作系统-CentOS7启动流程和服务管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.systemd POST --> Boot Sequence --&g ...