<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            li{

                list-style: none;

                float: left;

                font-size: 36px;

                color: blue;

                cursor: pointer;

            }

        </style>

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

        <script>

            var stark = "☆";

            var stars = "★"

            $(function(){

                //未点击之前 li标签本身及前面全部添加样式

                $("li").on("mouseenter", function () {

                 $(this).text(stars).prevAll().text(stars);

                 $(this).nextAll().text(stark);

             });

 //鼠标离开事件，让所有的星星为空心；

                 $("li").on("mouseleave", function () {

                     $("li").text(stark);

                     //让class 为current的 前面所有的星星为实体，后面的星星为空

                     $("li.current").text(stars).prevAll().text(stars);

                 })

//注册点击事件，让当前点击的前面的星星全为实体；

             $("li").on("click",function () {

                 $(this).addClass("current").siblings().removeClass("current");

             })

            })

        </script>

    </head>

    <body>

        <div>

            <ul>

               <li>☆</li>

             <li>☆</li>

             <li>☆</li>

             <li>☆</li>

             <li>☆</li>

            </ul>

        </div>

    </body>

</html>

Jquery制作小星星(常用于评价)的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  3. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  4. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  6. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  7. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  8. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  9. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. python基础学习（一）--数据类型

    Python一个 高级语言 2017-09-19 1.1  Python背景简介(感谢伟大的廖雪峰大佬带我们走上一条光头路,嘿嘿) 写了大半年Python代码,感觉收获不是很大,都是现学现卖,没有系统 ...

  2. 爬虫之正则和xpath

    一.正解解析 常用正则表达式回顾: 单字符: . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [-] \D : 非数字 \w :数字.字母.下划线.中 ...

  3. webstorm2018.2.3激活

    一,简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编 ...

  4. tar解压到指定目录

    对于tar.gz的压缩包,压缩参数是tar xvzf 指定解压路径为/tmp则为: tar xzvf xxx.tar.gz -C /tmp 注意/文件夹必须存在.

  5. VMware14 安装CentOS7 实现宿主机ping通虚拟机、虚拟机ping通宿主机、虚拟机能上网且能ping通百度

    本文旨在通过通过虚拟机VMware14来安装CentOS7 系统,并配置固定IP来实现在Windows系统中使用Linux环境. 本文目录: 0.本机环境 1.VMware14 初始化 1.1.安装V ...

  6. BZOJ3592 : Architext

    首先特判多边形面积$=0$的情况,此时内部没有点,答案只会在顶点处取到. 对于面积$>0$的情况,离线询问,将所有多边形合在一起得到平面图,然后求出对偶图,那么每条多边形边的两侧分别对应对偶图中 ...

  7. 解析时间parse time

    下面是一个解析时间的一个类 <?php /** * @purpose : 解析时间 * author: 袋鼠 * date: 2019/3/1 * time: 19:43 */ class Pa ...

  8. vue 实现图片上传与预览，以及清除图片

    vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <htm ...

  9. vue项目使用webpack构建的本地服务环境，在手机上访问调试

    使用vue脚手架构建的项目,一般在本地localhost运行,配合浏览器的模拟调试工具开发. 如果想看真机环境,又不想build到线上. webpack能配置电脑本地内网环境指向公网访问的! 1.打开 ...

  10. vue安装使用

    一.安装(cmd) 1.全局安装vue cnpm install --global vue-cli 2.cd到需要创建项目的文件夹下 3.创建项目 项目是基于webpack的 vue init web ...