欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)的五星點評功能【案例】

 更新時間:2019年02月18日 09:06:44   作者:庚中  
這篇文章主要介紹了jQuery實現(xiàn)的五星點評功能,結(jié)合具體實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作實現(xiàn)五星點評功能相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的五星點評功能。分享給大家供大家參考,具體如下:

效果圖:

需求分析:

1.鼠標移入li標簽,當前l(fā)i標簽和之前的li標簽全部變?yōu)閷嵭?
2.鼠標移開,所有的li標簽變?yōu)榭招?
3.鼠標點擊li標簽,當前l(fā)i標簽和之前的li標簽全部變?yōu)閷嵭?/p>

jq代碼實現(xiàn)過程:

var shiXin="★";
 var kongXin='☆'
 $('li').on('mouseenter',function ( ) {
  //需求1:鼠標移入后,當前的li標簽和前面的li標簽顯示實心,后面的li標簽顯示空心
  $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
 }).on('mouseleave',function ( ) {
  $('li').text(kongXin);
  //找到索引的li,給這個li和它前面的li設(shè)置實心
  $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);
 }).on('click',function ( ) {
  //給點擊的li添加索引,其余的去除索引
   $(this).attr('index','dianji').siblings().removeAttr('index')
 })

完整代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.dbjr.com.cn jQuery五星點評</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  ul {
   list-style:none
  }
  li {
   float:left;
   cursor: pointer;
   color: red;
   font-size: 40px;
  }
 </style>
</head>
<body>
<ul>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
  $ ( function () {
   /*一:需求分析: 1.鼠標移入li標簽,當前l(fā)i標簽和之前的li標簽全部變?yōu)閷嵭?
         2.鼠標移開,所有的li標簽變?yōu)榭招?
         3.鼠標點擊li標簽,當前l(fā)i標簽和之前的li標簽全部變?yōu)閷嵭?
    二:思路分析
      1.獲取元素
      2.注冊事件
      3.事件處理
   */
  /*  var shiXin='★';
   var kongXin='☆';
    $ ( "li" ).on ( "mouseenter", function () {
    // 1.鼠標移入li標簽,當前l(fā)i標簽和之前的li標簽全部變?yōu)閷嵭?后面的五角星變?yōu)榭招?這一步必須要,不然往前移會有bug)
     $ ( this ).text ( shiXin ).prevAll ().text ( shiXin ).end().nextAll ().text(kongXin)
     //end()方法是返回上一個狀態(tài)的返回值
    } ).on ( "mouseleave", function () {
    //2.鼠標移開,所有的li標簽變?yōu)榭招?
    $('li').text(kongXin);
    $ ( 'li[index="dianji"]' ).text(shiXin).prevAll().text(shiXin);
      //
    } ).on('click',function ( ) {
     //3.鼠標點擊li標簽,當前l(fā)i標簽和之前的li標簽全部變?yōu)閷嵭?
    //給點擊的li添加索引
     $(this).attr('index','dianji').siblings().removeAttr('index');
    })*/
  //第二遍:
   var shiXin="★";
   var kongXin='☆'
   $('li').on('mouseenter',function ( ) {
    //需求1:鼠標移入后,當前的li標簽和前面的li標簽顯示實心,后面的li標簽顯示空心
    $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
   }).on('mouseleave',function ( ) {
    $('li').text(kongXin);
    //找到索引的li,給這個li和它前面的li設(shè)置實心
    $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);
   }).on('click',function ( ) {
    //給點擊的li添加索引,其余的去除索引
     $(this).attr('index','dianji').siblings().removeAttr('index')
   })
  } )
 </script>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計有所幫助。

相關(guān)文章

  • 使用jQuery實現(xiàn)鼠標點擊左右按鈕滑動切換

    使用jQuery實現(xiàn)鼠標點擊左右按鈕滑動切換

    在做web前端開發(fā)的時候經(jīng)常遇到圖片滑動切換特效,接下來通過本文給大家分享使用jQuery實現(xiàn)鼠標點擊左右按鈕滑動切換特效,感興趣的朋友參考實現(xiàn)代碼
    2017-08-08
  • JQuery Dialog的內(nèi)存泄露問題解決方法

    JQuery Dialog的內(nèi)存泄露問題解決方法

    如何避免JQuery Dialog的內(nèi)存泄露,需要的朋友可以參考下。
    2010-06-06
  • 如何使用HTML5地理位置定位功能

    如何使用HTML5地理位置定位功能

    用相對簡單的JavaScript代碼,可以創(chuàng)建出能確定用戶地理位置詳細信息的Web應(yīng)用,包括經(jīng)緯度以及海拔等。一些Web應(yīng)用甚至能通過監(jiān)控用戶位置隨時間的移動來提供導航功能,其中還綜合了GoogleMaps API這樣的地圖系統(tǒng)。
    2015-04-04
  • jQuery Ajax之$.get()方法和$.post()方法

    jQuery Ajax之$.get()方法和$.post()方法

    load()方法通常用來從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件,然而這并不能體現(xiàn)Ajax的全部價值。在項目中,如果需要傳遞一些參數(shù)給服務(wù)器中的頁面,那么可以使用$.get()或者$.post()方法(或者是后面要講解到的$.ajax方法)。
    2009-10-10
  • 利用jquery包將字符串生成二維碼圖片

    利用jquery包將字符串生成二維碼圖片

    將一個字符串生成二維碼圖片,如果想要帶log的二維碼,可以在生成后的二維碼中間部位自己添加一個小log,具體實現(xiàn)如下,感興趣的朋友可以參考下
    2013-09-09
  • 自編jQuery插件實現(xiàn)模擬alert和confirm

    自編jQuery插件實現(xiàn)模擬alert和confirm

    現(xiàn)在絕大多數(shù)網(wǎng)站都不用自帶的alert和confirm了,因為界面太生硬了。因此這個插件就這樣產(chǎn)生了...
    2014-09-09
  • jquery給元素設(shè)置屬性的簡單方法

    jquery給元素設(shè)置屬性的簡單方法

    jquery是一個js插件庫,現(xiàn)在很多前端開發(fā)人員都是使用它來操作dom的,對于dom操作,jquery提供了很多方法,這篇文章主要給大家介紹了關(guān)于jquery給元素設(shè)置屬性的簡單方法,需要的朋友可以參考下
    2023-06-06
  • jQuery實現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果

    jQuery實現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果

    這篇文章主要介紹了jQuery實現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果,可實現(xiàn)固定位置顯示及響應(yīng)鼠標點擊展開與關(guān)閉的功能,涉及jQuery響應(yīng)鼠標事件動態(tài)操作頁面元素樣式屬性的相關(guān)技巧,需要的朋友可以參考下
    2015-11-11
  • 幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果

    幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果

    幾行代碼輕松搞定jquery實現(xiàn)flash8類似的連接效果...
    2007-05-05
  • JQuery 拾色器插件發(fā)布-jquery.icolor.js

    JQuery 拾色器插件發(fā)布-jquery.icolor.js

    web項目中不少地方需要用到顏色選擇器,比如設(shè)置某個元素的背景色、邊框色等等,按照我們交互設(shè)計的期望-設(shè)色器最好簡單易用,僅顯示常用的那些色塊給用戶選擇,另外提供一個輸入框方便用戶輸入自定義的色值。
    2010-10-10

最新評論