精华内容
下载资源
问答
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... ma
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          padding: 0;
          margin: 0;
        }
        .comment {
          font-size: 40px;
          color: rgb(247, 10, 6);
        }
        .comment li {
          float: left;
          cursor: pointer;
        }
        ul {
          list-style: none;
        }
      </style>
      <script src="jquery-3.4.1.js"></script>
      <script>
        $(function () {
          var wjx_none = '☆'; // 空心五角星
          var wjx_sel = '★'; // 实心五角星
    
          // 鼠标放上去当前的li和之前所有的li内容全部变为实心五角星,移开变为空心
          $('.comment li').on('mouseenter', function () {
            // 先让当前的变为实心
            // $(this).text(wjx_sel).prevAll('li').text(wjx_sel);
            // $(this).nextAll('li').text(wjx_none);
    
            // 两行代码傻傻分不清的时候需要用 end() 结束之后在使用,也就相当于重新一行再次使用 this
            $(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
          })
          $('.comment li').on('mouseleave', function () {
            if ($('li.current').length === 0) {
              $('.comment li').text(wjx_none);
            }else{
              $('li.current').text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
            }
          })
          $('.comment li').on('click', function () {
            $(this).attr('class', 'current').siblings('li').removeAttr('class');
          })
        })
      </script>
    </head>
    <body>
      <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
      </ul>
    </body>
    </html>
    
    • demo 效果:

    展开全文
  • 1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底 ...五角星评分案例</title> <style> * { padding: 0; mar
  • jquery五角星评分案例

    2022-01-13 19:56:12
    } style> head> <body> <ul class="container"> ☆li> ☆li> ☆li> ☆li> ☆li> ul> <script src="jquery-1.12.4.js">script> <script> $(function () { var start_full = '★' var start_empty = '☆' var grade =...
    <!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>Document</title>
      <style>
        .container {
          color: darkorange;
          list-style: none;
          font-size: 40px;
        }
    
        .container li {
          display: inline;
        }
        
      </style>
    </head>
    
    <body>
      <ul class="container">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <script src="jquery-1.12.4.js"></script>
      <script>
        $(function () {
          var start_full = '★'
          var start_empty = '☆'
          var grade = 0
          $('.container li').mouseenter(function(){
            // end():回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
            $(this).text(start_full).prevAll().text(start_full).end().nextAll().text(start_empty).end()
          })
          $('.container').mouseleave(function(){
            $('.container li').text(start_empty)
            $('.checked').text(start_full).prevAll().text(start_full)
            grade = $('.checked').index()+1
          })
          $('.container li').click(function(){
            $(this).addClass('checked').siblings().removeClass('checked')
          })
          
        })
      </script>
    </body>
    
    </html>
    
    展开全文
  • //给标记的五角星以及之前的五角星变为实心 $('.all>li[biaoji]').text(sx_wjx).prevAll().text(sx_wjx); }).on('click',function(){ //给要点击的li做一个标记,attr添加属性 $(this).attr('biaoji','aaa')....

    代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.all{
    				list-style: none;
    				font-size: 50px;
    			}
    			.all>li{
    				display: inline-block;
    			}
    		</style>
    	</head>
    	<body>
    		<ul class="all">
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</body>
    </html>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    	$(function(){
    		//prev查找上一个兄弟,prevAll查找上面所有的兄弟
    		//next查找下一个兄弟,nextAll查找后面所有的兄弟
    		var sx_wjx = '★';
    		var kx_wjx = '☆';
    		$('.all>li').on('mouseenter',function(){
    			//$(this).text(sx_wjx).prevAll().text(sx_wjx);
    			//$(this).nextAll().text(kx_wjx);
    			//使用end方法返回上一个状态
    			$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx)
    		}).on('mouseleave',function(){
    			$('.all>li').text(kx_wjx);
    			//给标记的五角星以及之前的五角星变为实心
    			$('.all>li[biaoji]').text(sx_wjx).prevAll().text(sx_wjx);
    		}).on('click',function(){
    			//给要点击的li做一个标记,attr添加属性
    			$(this).attr('biaoji','aaa').siblings().removeAttr('biaoji');
    		})
    	})
    </script>
    
    展开全文
  • jQuery五角星评分案例

    千次阅读 2018-05-29 20:28:06
    五角星评分是我们常见的打分方式,今天就用jquery来写一个五角星评分 在此,css内容不再写 需求 将鼠标放在五角星上,此五角星和它之前的五角星都会变成实心五角星,后面的变成空心 当鼠标离开时,所有五角星...

    背景

    五角星评分是我们常见的打分方式,今天就用jquery来写一个五角星评分

    在此,css内容不再写
    需求

    • 将鼠标放在五角星上,此五角星和它之前的五角星都会变成实心五角星,后面的变成空心
    • 当鼠标离开时,所有五角星都会变成空心
    • 当某个五角星被点击后,鼠标离开五角星后,此五角星与其前面的五角星都会变成实心,后面的变成空心

    实现方法

    1.定义两个五角星,一个空心,一个实心

    var one="☆";
    var two="★";

    2.为每个五角星设置一个鼠标进入事件,事件函数要实现的功能是此五角星和它之前的五角星都会变成实心五角星,后面的变成空心

    $("li").on("mouseenter",function(){  
     $(this).text(two).prevAll("li").text(two).end().nextAll("li").text(one);
    });
    

    3.为每个五角星设置一个鼠标离开事件,事件函数要实现的功能是,当鼠标离开时,所有五角星都会变成空心

    $("li").on("mouseleave",function(){
                        if($(".current").length===0)
                        {
                            $("li").text(one);
                        }
                        else{
                            $("li.current").text(two).prevAll("li").text(two).end().nextAll("li").text(one);
                            $("li.current").removeAttr("class");
                        }
                    })
    

    3.为每个五角星设置一个鼠标点击事件,事件函数要实现的功能是为点击的五角星添加一个类,这样做的目的是,当鼠标离开五角星时, 能够让触发点击事件的五角星前的五角星变为实心

    $("li").on("click",function(){                                     
      $(this).attr("class","current").siblings().removeAttr("class");
    })

    整体代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    padding: 0;
                    margin: 0;
                }
                ul{
                    list-style: none;
                }
    
                li{
                    float: left;
                    font-size: 50px;
                    color: red;
                }
            </style>
            <script src="jquery-1.11.1.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    var one="☆";
                    var two="★";
                    $("li").on("mouseenter",function(){
                        $(this).text(two).prevAll("li").text(two).end().nextAll("li").text(one);
                    });
    
                    $("li").on("mouseleave",function(){
                        if($(".displayd").length===0)
                        {
                            $("li").text(one);
                        }
                        else{
                            $("li.current").text(two).prevAll("li").text(two).end().nextAll("li").text(one);
                            $("li.current").removeAttr("class");
                        }
                    })
    
                    $("li").on("click",function(){
                        $(this).attr("class","displayd").siblings(”li").removeAttr("class");
                    })
                })
            </script>
        <body>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </body>
    </html>
    

    五角星

    展开全文
  • jQuery实现仿五角星评分案例 ​ 这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打)。 ​ 重拾jQuery的第一感受,这玩意用起来真的太...
  • jQuery-五角星评分案例

    2019-11-19 14:58:17
    //需求1:鼠标移入到li标签上,当前li标签和他之前的li标签显示实心五角星,后面的li显示空心五角星 //需求2:鼠标离开li,所有的li都变成空心 //需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都...
  • jQuery五角星案例

    2021-08-17 23:05:33
    jQuery五角星案例 文章目录jQuery五角星案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...
  • 一、图片跟随鼠标移动  1、要求:鼠标移动到哪,图片就要跟到哪  2、用到的事件:首先监听鼠标:$(document).mousemove(function(event){ });...二、五角星评分案例  1、如图:业务逻辑:①鼠标移...
  • 五角星评分案例

    2018-08-23 18:35:41
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...五角星评分案例&lt;/title&gt; &lt;style&gt; * { padding:
  •  //当前五角星,和之前的所有五角星,全部是实心的,其他的为空心 // prevAll("元素")/nextAll("元素"):获取排在当前对象前面/后面的所有兄弟元素  // $(this).text(wjx_sel).prevAll("li").text(wjx_sel);...
  • 自学前端的小伙伴看过来 jQuery五角星评分小效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五角星评分案例</title>...
  • 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五角星评分案例</title> 6 <style> 7 * { 8 ...
  • 五角星评分

    2019-10-01 04:36:28
    案例分析: 1,鼠标经过每个 li , 当前 li 以及前面当前这个 li 前面所有的 li 都变成实心 2,鼠标离开 ul ,所有的 li 都变成空心 3,如果点击了某个 li , 鼠标离开 ul 的时候,点击的这个 li 以及这个 li 之间的...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 204
精华内容 81
关键字:

jquery五角星评分案例