Using jquery to achieve the common effects of e-commerce websites: five-star rating

This article is mainly for everyone to introduce the five-star high praise based on jquery, with a certain reference value, interested in small partners can refer to

On the e-commerce website, we often use the five-star rating feature, now using jquery to achieve a simple demo:

1. Introduction of jquery

In the example I'm using jquery online:

<script src= "/jquery/1.10.0/jquery.min.js" ></script>

2.jQuery Method Description:

Prevall: Given a JQuery object that represents a collection of DOM elements, the. Prevall () method allows us to search the DOM tree for the sibling elements in front of these elements and construct a new jquery object with matching elements.

Nextall: Given a JQuery object that represents a collection of DOM elements, the. Nextall () method allows us to search the sibling elements followed by elements in the DOM tree and construct a new jquery object with matching elements.

AddClass: Adds one or more classes to the selected element.

Removeclass: Removes one or more classes from the selected element.

HTML: This method returns or sets the content of the selected element (inner HTML). When you use this method to set a value, it overrides the contents of all matching elements.

Text: The method method sets or returns the textual content of the selected element. When the method is used to return a value, it returns the textual content of all combinations of matched elements (HTML tags are removed).

3. CSS style

Simple style:

* {padding:0; margin:0;}

. comment {font-size:40px; color:teal;}

. Comment Li {float:left;}

UL {List-style:none;}

4.html structure

5. Complete code:

List only the key jquery codes:

Effect:

Blog Park Front-end groups: 640633433 Welcome to my public number, public number name: Web front-end edu. Sweep the following QR code or collection below the QR code attention (Long press the following QR code image, and select the QR code in the identification diagram)

Using jquery to achieve the common effects of e-commerce websites: five-star rating