jquery实现类似淘宝星星评分功能实例
2023-06-13 09:15:45 时间
本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用。具体方法如下:
html部分代码如下:
<body> <divid="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <pid="p"></p> <pid="score"></p> </body>
上述代码中:
id="p"显示即时分数
id="score"显示最终分数
javascript代码如下:
<scripttype="text/javascript"> $(function(){ //为所有的li标签绑定mouseout和mouseover事件。bind({事件名:function(){},事件名:function(){}})的方法绑定多个事件 $("#divli").bind({ mouseout:function(){ $(this).css("color","black").html("☆").prevAll().css("color","black").html("☆") }, mouseover:function(){ $(this).css("color","red").html("★").prevAll().css("color","red").html("★") } }); //=实时显示分数.【index】搜索匹配的元素,并返回相应元素的索引值,从0开始计数。 $("#divli").mouseover(function(){ $("#p").html(parseInt($(this).index("#divli"))+1); }); //鼠标按下时,确定分数。额,就不更改了,大局已定。 $("#divli").mousedown(function(){ $("#score").html(("你选择的分数是"+(parseInt($(this).index("#divli"))+1))); $(this).css("color","red").html("★").prevAll().css("color","red").html("★") //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除 $(this).unbind().prevAll().unbind().nextAll().unbind(); }); }) </script>
希望本文所述对大家的jQueryWEB程序设计有所帮助
相关文章
- jQuery图片切换插件jquery.cycle.js详解编程语言
- Jquery工作常用实例使用AJAX使网页进行异步更新
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jquery实现的可隐藏重现的靠边悬浮层实例代码
- 浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
- jQuery表单获取和失去焦点输入框提示效果的实例代码
- jquery实现文字由下到上循环滚动的实例代码
- jQuery实现图片信息的浮动显示实例代码
- 使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
- jquery实现checkbox全选全不选的简单实例
- jquery实现点击弹出层效果的简单实例
- jquery实现弹出div,始终显示在屏幕正中间的简单实例
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 图片放大镜jquery.jqzoom.js使用实例附放大镜图标
- jQuery遍历对象、数组、集合实例
- js与jQuery实现的兼容多浏览器Ajax请求实例
- jquery中map函数与each函数的区别实例介绍
- jQuery实现HTML5placeholder效果实例
- 分享2个jQuery插件--jquery.fileupload与artdialog
- jQuery制作拼图小游戏
- 基于jQuery实现最基本的淡入淡出效果实例