Shulou(Shulou.com)06/01 Report--

Today, the editor to share with you based on jQuery sorting and how to achieve Tab column special effects of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

I. jQuery sorting

Eq () sorting can be seen as a filtering method

The objects obtained in jQuery, which contain a selected set of native js objects, will be sorted in a new large order in the jQuery object, which has nothing to do with the original HTML structure.

So the eq () method gets an object in the jQuery object by subscript, and the subscript is the large sorted subscript in the jQuery object.

/ / check all p tags var $ps = $("p") / / A jquery object is generated, which contains all the elements inside. The js object / / is a class array object, and it will be sorted in a large sort / / sort according to the order of acquisition, which has nothing to do with its original parent. Only related to the new position in the jQuery object / / add color $ps.eq (1). Css ("background-color", "pink") $ps.eq (4). Css ("background-color", "skyblue") $ps.eq (8). Css ("background-color", "purple") $ps.eq (7). Css ("background-color", "lightgreen") $ps.eq (10). Css ("background-color") "orange") / / sorts all acquired elements Has nothing to do with the original structure.

The p tag in the third group div

-/ / Select the tag $(".b2p") .eq (2) .css ("background-color", "red") / / through the class name to get the p tag of the third class named B2P and make it red.

2. Index () method

When the jQuery object calls the index () method, it gets its own subscript position in its sibling in the HTML structure. It has nothing to do with the large sort within the newly generated jQuery object.

It depends on the position of its own elements between sibling elements in the parent.

Sort $ps.click in the brothers / / index () (function () {/ / Click to output your own index value console.log ($(this). Index ();})

The above picture shows the results displayed after clicking the p tab in the figure in turn.

The exclusive method is set in    jQuery. In jQuery, chain calls can be made through the special settings of this, so that brothers can be set to the default effect in batch through the siblings method.

Application: exclusivity in Tab bar special effects

Exclusive at your own level: add the class name (attribute to be added) to your this and ask the other brothers to delete the class name.

The exclusion of the corresponding part: add the class name (the attribute to be added) to the element in the corresponding position, and the other brothers delete the class name.

Find the corresponding relationship, using your own index () subscript, and let another set of items with the same subscript as the corresponding item.

The eq () method is used to select subscript items by selecting the corresponding items of another group.

Html section:

* {margin: 0; padding: 0;} ul {list-style: none;} .tab {width: 360px; height: 200px; border-top: 2px solid # 206f96; margin: 100px; float: left;} .title {width: 360px; height: 40px; overflow: hidden;} .tab .title span {float: left; width: 88px Height: 38px; border: 1px solid # 52819c; border-bottom: 1px solid # 52819c; background-color: # c0f3f7; font: 16px/34px "SunSim"; text-align: center;} .tab .title span.current {height: 40px; background-color: rgb (255,255,255);} .tab. Title span a {color: rgb (34,34,34); text-decoration: none } .tab .detail {height: 258px; padding: 17px 00 9px;} .tab .detail ul {display: none;} .tab .detail ul.current {display: block;} .tab .detail ul li a {color: # 000; text-decoration: none;} .tab .detail ul li.first {font-weight: bold } on the middle road / on the off road Xiahou Dun Li Xin Yao Lv Bu Shangguan Waner game star Zhen Ji Nu WA Zhao Yun Luna Nakolu Xiahou Dun Hou Yi Yu Ji Di Renjie Lu Ban

Script section:

/ / get the element var $spans = $(".tab .title span"); / / add the mouse up event $spans.mouseenter (function () {/ / store the subscript value of the corresponding span subscript, and then you need to find the corresponding ul var ind = $(this). Index (); / / exclusive / $(this) .addClass ("current"). Siblings (). RemoveClass ("current") $(".tab .detail ul") .eq (ind) .addClass ("current") .siblings () .removeClass ("current")

There is no problem with the effect of the method above in     in one tab column, but when the page has multiple tab columns, the order of large sorting and index acquisition in the jQuery object will be out of order.

There is a problem

  solution: span and ul lookups all use chained calls, and look up through node relationships

/ / when finding all corresponding ul, do not select all ul individually. Find all the children $(this) .addClass ("current"). Siblings (). RemoveClass ("current") .parent (). Siblings (). Children (). Eq (ind) .addClass ("current") .siblings (). RemoveClass ("current") / / title's brother detail})

The operations of the jQuery object are all batch operations, and the batch operation can only perform some simple effects. If you want to treat every element in the JQ object and the internal

It is difficult for the program to perform some complex operations on behalf of elements.

Each () traversal

The argument to each () is a function

What it does: perform an operation inside the function on each element in the jQuery object

The basic principle of the each method is the for loop, which iterates from the item with subscript 0 of the object to the last item, and then operates on each item.

Advantages:

There is also a this inside the function of each, which points to each element that comes in and traverses.

H3

H3 var $box = $(".box"); / / the second p in each div adds red $box.each (function () {$(this). Children (). Eq (1). Css ("background-color", "pink");})

The function of each can pass an argument iPerry I, which represents the subscript position of the traversal object in the overall jQuery object large sort.

/ / use the each () operation $ps.each (function (I) {/ / I records this traversal, the position of the current element in the jQuery object sorting $(this) .click (function () {console.log ($(this). Index ()) / this internal this is the event source console.log (I);})})

Similarly, if you want to achieve table column discoloration, rely on jQuery large arrangement order to achieve odd and even different discoloration, later if you add columns to the table, there will be problems, unable to correspond. So use the each () method to treat each row as an operation unit and change the color of the columns in each row.

Var $trs = $("tr"); $trs.each (function () {$(this) .children (": odd") .css ("background-color", "skyblue");})

Another method is to use td judgment, as long as the large sort of jQuery is not used, it will not affect the late insert column.

$("td") .each (function () {/ / determine the position of the current td in the parent if ($(this). Index ()% 2 = = 0) {$(this) .css ("background-color", "skyblue");}}) these are all the contents of the article "sorting based on jQuery and how to achieve Tab column special effects". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.