JQuery案例(QQ表情包选择，下拉列表选中条目左右移动，抽奖，电灯开关，表单全选和全不选，轮播图，隔行换色)

最新推荐文章于 2023-11-15 22:17:49 发布
最新推荐文章于 2023-11-15 22:17:49 发布
阅读量764 收藏 5
点赞数 2
分类专栏： 案例 文章标签： 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ScholarTang/article/details/88541529
版权

一些简单的jQuery案例

QQ表情包选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ表情包选择</title>
</head>
<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>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    //定义入口函数
    $(function () {
        $("li > img").click(function () {
            //追加 克隆
            $("#div").append($(this).clone());
        });
    });
</script>
<div class="emoji">
    <ul>
        <li><img src="../img/06.gif"/></li>
        <li><img src="../img/07.gif"/></li>
        <li><img src="../img/08.gif"/></li>
        <li><img src="../img/09.gif"/></li>
        <li><img src="../img/10.gif"/></li>
        <li><img src="../img/11.gif"/></li>
        <li><img src="../img/12.gif"/></li>
    </ul>
</div>

<div id="div">
    <font color="fuchsia" size="3">请输入：</font></span>
        <img src="../img/11.gif"/>
</div>
</body>
</html>

效果

在这里插入图片描述

下拉列表选中条目左右移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表选中条目左右移动</title>
</head>
<style type="text/css">
    #div1,#div2,#div3{
        float: left;
    }

</style>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * 1.append()：父元素将子元素追加到末尾:对象1.append(对象2)：将对象2添加到对象1的内部，并且在末尾
     * 2.appendTo()：对象1.appendTo(对象2)：将对象1添加到对象2内部，并在末尾
     */
    //定义入口函数
    $(function () {
        //给向右按钮绑定点击事件
        $("#but1").click(function () {
            //append()：父元素将子元素追加到末尾:对象1.append(对象2)：将对象2添加到对象1的内部，并且在末尾
            //将s1中被选中的元素追加到s2的末尾
            $("#s2").append($("#s1 > option:selected"));
        });
        //给向左按钮绑定点击事件
        $("#but2").click(function () {
            //appendTo()：对象1.appendTo(对象2)：将对象1添加到对象2内部，并在末尾
            //将s1中选中的数据追加到s2的内部，并在末尾
            $("#s2 >option:selected").appendTo($("#s1"));


        });
    });
</script>
<body>
    <!--下拉列表-->
    <div id="div1">
    <select multiple="multiple" id="s1">
        <option>张三</option>
        <option>李四</option>
        <option>王五</option>
        <option>赵六</option>
    </select>
    </div>
    <div id="div2">
    <input type="button" value="-->" id="but1"/>
    <input type="button" value="<--" id="but2"/>
    </div>
    <div id="div3">
        <select multiple="multiple" id="s2">
            <option>钱七</option>
        </select>
    </div>
</body>
</html>

效果

在这里插入图片描述

抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
</head>
<style type="text/css">
    #small{
        border: darkorchid dotted 3px;
        width: 200px;
        height: 200px;
        /*position: absolute;*/
        /*top: 250px;*/
        /*left: 600px;*/
    }
    #big{
        border: fuchsia solid 2px;
        width: 400px;
        height: 400px;
        position: absolute;
        top: 150px;
        left: 500px;
        }
    #img1{
        width: 200px;
        height: 200px;
    }
    #img2{
        width: 400px;
        height: 400px;
    }
</style>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">


    /**
     * 有线程安全问题
     * @type {string[]}
     */

        //定义数组用来储存图片的URL
    var arr = [
        "imgs/1.jpg",
        "imgs/2.jpg",
        "imgs/3.jpg",
        "imgs/4.jpg",
        "imgs/5.jpg",
        "imgs/6.jpg",
        "imgs/7.jpg",
        "imgs/8.jpg",
        "imgs/9.jpg",
        "imgs/10.jpg"
    ];
    //定义全局变量
    var interval;
    var index;
    //定义函数入口
    $(function () {
        $("#start").css("disabled",true);
        $("#stop").css("disabled",false);
        //给开始按钮绑定点击事件
        $("#start").click(function () {
            $("#big").prop("style","display:none");
        //定义循环定时器,获取返回值 用来停止定时器
          interval = setInterval(function () {
              //生成随机数 1 - 10
              $("#start").prop("disabled",true);
              $("#stop").prop("disabled",false);
              index = Math.floor(Math.random() * (10+1));
              $("#img1").prop("src",arr[index]);
          },10);
        });
        //给停止按钮绑定点击事件
        $("#stop").click(function () {
            $("#start").prop("disabled",false);
            $("#stop").prop("disabled",true);
            //取消定时器
            clearInterval(interval);
            $("#img1").prop("src",arr[index]);
            $("#img2").prop("src",arr[index]);
            $("#big").prop("style","display:block");
        });
    });
</script>
<body>
<div align="center">
    <input type="button" value="开始" id="start"/>
    <input type="button" value="停止" id="stop"/>
</div>
    <div id="small">
        <img src="imgs/1.jpg" id="img1"/>

    </div>

    <div id="big" style="">
        <img src="imgs/1.jpg" id="img2"/>
    </div>
</body>
</html>

效果

在这里插入图片描述

电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
    <script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var img = $("#img");
            $("#liang").click(function () {
                $(img).prop("src","../img/liang.png");
            });
            $("#an").click(function () {
                $(img).prop("src","../img/an.png");
            });

        });
    </script>
    <img src="../img/an.png" align="center" id="img"/>
    <input type="button" name="button" value="开灯" id="liang"/>
    <input type="button" name="button" value="关灯" id="an"/>
</body>
</html>

效果

点击按钮控制灯泡暗和亮

表单全选和全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单全选和全不选</title>
</head>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //全部选中
        var input = $("input:checkbox");
        $("#but1").click(function () {
            input.each(function () {
                $(this).prop("checked",true);
            })
        });
        //全部不选中
        $("#but2").click(function () {
            input.each(function () {
                $(this).prop("checked",false);
            });
        });
        //选中第一个 -- 全部选中
        $(input[0]).click(function () {
            input.each(function () {
                $(this).prop("checked",input[0].checked);
            });
        });


    });
</script>
<div align="center"><font color="red" size="4">学生信息</font></div>
<from>
    <table border="1" width="400" cellpadding="0" cellspacing="1" align="center">
        <tr>
            <td>
                <input type="checkbox" name="bobby" value="" class="hobby" />
            </td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="bobby" value="" class="hobby"/>
            </td>
            <td>张三</td>
            <td>23</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="bobby" value="" class="hobby"/>
            </td>
            <td>李四</td>
            <td>24</td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="bobby" value="" class="hobby"/>
            </td>
            <td>王五</td>
            <td>25</td>
        </tr>
    </table>
</from>
<div align="center">
    <input type="button" name="button" value="全选" id="but1"/>
    <input type="button" name="button" value="全不选" id="but2"/>
</div>
</body>
</html>

效果

在这里插入图片描述

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style  type="text/css">
    #imgs{
        width: 400px;
        height: 400px;
    }
</style>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var number = 1;
        function show() {
            number++;
            if (number > 5) {
                number = 1;
            }
            var imgs = $("#imgs");
            imgs.prop("src","../img/"+number+".jpg");
        }
        setInterval(show,2000);
    });
</script>
<body>
    <img src="../img/1.jpg" id="imgs"/>
</body>
</html>

效果

在浏览器页面中每两秒切换一张图片

隔行换色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
</head>
<style>
</style>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("tr:gt(0):even").css("background-color","#CC66FF");
        $("tr:gt(0):odd").css("background-color","#7DFF34");
        $("tr:gt(0)").mouseover(function () {
            $(this).css("background-color","#ff1212");
        });
        var tr = $("tr:gt(0)");
        tr.mouseout(function(){
            tr.each(function (index,element) {
                if (index % 2 == 0) {
                    $(element).css("background-color", "#CC66FF");
                } else {
                    $(element).css("background-color","#7DFF34");
                }
            });
        });
    });
</script>
<form>
    <table align="center" cellspacing="0" cellpadding="1" width="400" border="1">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>女</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>25</td>
            <td>女</td>
        </tr>

        <tr>
            <td>赵六</td>
            <td>26</td>
            <td>男</td>
        </tr>
    </table>
</form>
</body>
</html>

效果

在这里插入图片描述
第三行的红色是鼠标移入变色，如果鼠标移出就恢复之前的颜色

Tang.Mr
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现输入表情包.zip
03-23
jquery实现emoji表情包输入，无需积分，直接下载。想要查看效果，请去我的博客查看效果。这里的emoji表情包录入只负责前端，未考虑到后台的录入。
Jquery生成emoji表情
PerfectOpening的博客
09-09 623
Jquery生成emoji表情
通过jQuery实现的仿QQ Emoji表情包H5插件
11-06
通过jQuery实现的Emoji表情包H5插件，类似QQ表情输入框，可以自定义表情包，可以内嵌到web版聊天输入框控件中，带表情的聊天输入框控件。
qq表情包html插件,程序员用jQuery写QQ表情插件，代码思路瞬间爆炸
weixin_35126200的博客
06-10 856
原标题：程序员用jQuery写QQ表情插件，代码思路瞬间爆炸我们在QQ聊天或者发表评论、微博时，会有一个允许加入表情的功能，点击表情按钮，会弹出一系列表情小图片，选中某个表情图片即可发表的丰富的含表情的内容。今天和大家分享一款基于jQuery的QQ表情插件，您可以轻松将其应用到你的项目中。 给跪了！HTML首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace...
【Java 进阶篇】JQuery 案例：qq表情选择，表达情感的小黄脸
最新发布
繁依Fanyi的博客
11-15 207
表情符号是一种丰富多彩、生动有趣的文字表达方式，而qq表情则因其独特的设计和丰富的表情包而备受欢迎。通过在页面中引入qq表情选择框，我们可以让用户在文字输入的同时，通过表情符号更生动地表达自己的情感。下面，让我们一起探索如何用 JQuery 创建一个qq表情选择框吧！通过本篇博客，我们深入学习了如何使用 JQuery 实现qq表情选择框，为用户提供更生动、丰富的输入体验。通过简单的代码示例，我们了解了qq表情选择框的基本实现原理和实际应用场景。
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
下面小编就为大家带来一篇jquery实现全选和全不选功能效果的实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
JavaScript案例-js全选和全不选.zip
02-16
JavaScript案例-js全选和全不选.zip
js实现全选和全不选功能
10-15
主要为大家详细介绍了js实现全选和全不选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JQuery实现qq表情选择
zhansan的博客
07-15 123
/需求：点击qq表情，将其追加到发言框中。//1.给img图片添加onclick事件。//2.追加到p标签中即可。
jquery 选择表情插件
03-19
NULL 博文链接：https://dh189.iteye.com/blog/728724
年会抽奖活动，滚动轮播，人数不少于5人
07-26
年会抽奖活动，滚动轮播，人数不少于5人，解决了单数人的bug,滚动过快时会出现问题，建议不要过快
jquery 库表情插件
05-03
因为项目原因写了一个表情插件，比较简单，分享给大家，鄙人是个新手，代码写的或许很烂，仅仅作为参考吧。有bug请喊我。有更好的插件也请告诉鄙人一声。
抽奖轮播实现的，html，js.zip
04-30
点击图片，停止必停到点击的那张 左侧小礼物图标，点击次数控制显示第几张图片 关键代码： stop.style.display="none"; start.style.display="block"; console.log(index); if(zuobi2_index!=-1){ clearInterval(timer); luck.style.left=-zuobi2_index*img_width+"%"; zuobi2_sp.innerHTML=sp[zuobi2_index].innerHTML+(zuobi2_index+1); zuobi2_index=-1; zuobi=-1; } else if(zuobi!=-1){ clearInterval(timer); luck.style.left=-zuobi*img_width+"%"; zuobi2_sp.innerHTML=sp[zuobi].innerHTML+(parseInt(zuobi)+1); zuobi=-1; }else{ clearInterval(timer); zuobi2_sp.innerHTML=sp[index].innerHTML+(index+1); }
微信表情插件 jquery
01-13
用于微信自定义回复中添加表情使用。使用jquery来实现。
html中加入emjio表情,jqueryemoji表情插件
weixin_35520863的博客
05-31 1129
插件描述：jQuery-emoji 让文本框或可编辑div具备插入表情功能。 Let textarea or editable div has ability to insert emoji.功能 Features支持给textarea或可编辑div加上表情功能，自动识别元素类型。Support for adding emoji into textarea or editable div, aut...
jquery实现表情图添加与发布功能
weixin_42141284的博客
03-14 987
对于很多接触jquery的新手学员来说，实现表情图的添加与发布是件难事，想必很多人第一件想到的就是去找一个表情图的插件，可是这样可能又会产生另外一个问题，那就是找到了插件，但不会用，所以给大家分享一个非常简单的不使用插件的实现表情图的添加与发布功能，话不多说，分享代码： 一、首先分享html主体内容 &lt;div contenteditable="true" id="imgs" style...
08--jQuery基础--案例--QQ表情选择
weixin_42133396的博客
10-20 358
点击表情，可以选中到请发言位置后面如下图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>QQ表情选择</title> <script src="../../js/jquery-3.3.1.min...
html轮播抽奖,js实现走马灯效果-----大屏幕滚动抽奖
weixin_42456372的博客
06-25 795
js实现走马灯效果-----大屏幕滚动抽奖发布时间：2020-06-30 07:32:16来源：51CTO阅读：940作者：quyundevar intervalOne = null;window.onload = function() {let arr = ["@------四等奖---","@------二等奖---","@------三等奖---","@------再来一次---","@--...
js复选框全选和全不选代码
07-08
在回调函数中，我们使用 `forEach` 方法遍历所有选项复选框，并将它们的 `checked` 属性设置为与全选复选框相同的值，从而实现全选和全不选的功能。 请注意，上述代码仅为示例，你需要根据你的具体HTML结构和需求...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值