jQuery 五星好评（综合练习）

题目描述

鼠标进入五角星，当前和之前的所有五角星变为实心，后面的是空心。点击记录该五角星，鼠标移开后该记录点之前所有变为实心，之后的所有变为空心。
训练目标

培养使用 jQuery 综合处理需求能力。

训练提示

1.鼠标进入某个五角星，当前和之前的所有五角星变为实心，后面的是空心。

2.鼠标点击某个五角星，记录该五角星

3.鼠标移开后该记录点之前所有变为实心，之后的所有变为空心。
代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五角星</title><script src="js/jQuery.mini.js"></script><style>ul {width: 200px;margin: 0 auto;}li {float: left;font-size: 40px;width: 40px;text-align: center;list-style: none;color: red;}</style>
</head>
<body><ul><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul><script>$(function() {$('li').on('mouseenter', function() {// $(this).text('★').prevAll('li').text('★');// $(this).nextAll('li').text('☆');// $(this).text('★').prevAll('li').text('★').nextAll('li').text('☆');// 写在一起要加 end()才行 相当于重新一行再次使用 this $(this).text('★').prevAll('li').text('★').end().nextAll('li').text('☆');})$('li').on('mouseleave', function() {if ($('li.sign').length === 0) {$('li').text('☆');} else {$('li.sign').text('★').prevAll('li').text('★').end().nextAll('li').text('☆');}})$('li').on('click', function() { // 给点击li 做标记，添加一个sign类$(this).attr('class', 'sign').siblings('li').removeAttr('class');})})</script>
</body>
</html>

效果图

jQuery 五星好评（综合练习）相关推荐

jQuery五星好评界面反馈界面
星星: jQuery五星好评界面反馈界面 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
jQuery五星好评
不提供图片了,读者自行更换就可以效果图如下: <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
php 识别图片五星好评,jquery实现五星好评方法
本文主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的d ...
JS与JQuery分别实现淘宝（五星好评特效）
我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件代码展示: <!D ...
如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...
php 识别图片五星好评,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
前端实践小项目(一)五星好评与暂停取值
哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 "五星好评与暂停取值"(底部有源代码) 目录五星好评(JS版) 五星好评(JQuery版) 暂停取值五星好评(JS版) ...

jQuery 五星好评（综合练习）

jQuery 五星好评（综合练习）相关推荐

最新文章

热门文章