[Basic learning of jQuery] 04 use of table operations and cookie plug-ins in jQuery, jquerycookie

[Basic learning of jQuery] 04 use of table operations and cookie plug-ins in jQuery, jquerycookie

This chapter is intended for jQuery form operations and table operations.

However, after reading jQuery's form operations yesterday, I found all the leftovers in the previous sections, so I did not write them out.

Let's take a look at the table today.

Because the company's internal management systems are usually used, there are still a lot of data tables. It may be usable if it is written here.

About jQuery table applications

• Line color change

  $ (Function () {$ ("tbody> tr: odd "). addClass ("style 1"); // odd is an odd number of rows selected $ ("tbody> tr: even "). addClass ("Style 2"); // even is an even number of rows })

• Single Sheet Metal controls table row highlighting

  $ ('Tbody> tr '). click (function () {$ (this ). addClass ('selected style '). siblings (). removeClass ('selected style '). end (). find (': radio '). attr ('checked', true); // note the end () Here. When siblings () is used, all the following elements actually operate on the statistical element of this, after end () is used, the previous $ (this) element} is returned. // note that when we initialize the table, if a single sequence is selected by default, you also need to process it. $ (Table: radio: checked ). parent (). parent (). addClass ('selected'); // or $ (table: radio: checked ). parents ("tr "). addClass ('selected'); // or $ (table> tr: has (: checked )). addClass ('selected ');

• Check boxes control table row highlighting

  // Do not write the simplest one. Check the $ ('tbody> tr') below '). click (function () {// determine whether to select var hasSelected = $ (this ). hasClass ('selected'); $ (this) [hasSelected? "RemoveClass": "addClass"] ('selected'). find (': checkbox'). attr ("checked ",! HasSelected) ;}); // This example highlights [hasSelected? "RemoveClass": "addClass"] This kind of gameplay // This is actually a javascript usage, because something in an object can be used. this form can be obtained in the form of arrays similar

• Close table Expansion

  // In this case, the row data in the table has a hierarchical structure $ (function () {$ ('tr. parent '). click (function () {$ (this ). toggleClass ("selected "). siblings ('. child _ '+ this. id ). toggle ();})})

• Filter table content

  // The following table filtering operations $ (function () {$ ("# filterName "). keyup (function () {$ ("table tbody tr "). hide (). filter (": contains ('" + ($ (this ). val () + "')"). show () ;};}); // this type of data is generally unavailable, because the tables we want are usually paginated, and then go to the background to check and filter the data, and then pass the data to the foreground.

Well, the rest of this chapter is about leftovers. The only new function used is

Var $ div_li = $ ("li"); $ div_li.click (function () {var index = $ div_li.index (this); // this usage is interesting, followed by the index function, is used to obtain the index of an element in the selected element })

In addition, JavaScript can be used to replace the whole style sheet (I have never done this before)

<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />$(function(){   $("#cssfile").attr("href","css/skin_1.css"); })

We also introduced jQuery's small plug-in for cookie operations, which can help simplify cookie operations.

<Script src = "js/jquery. cookie. js "type =" text/javascript "> </script> $. cookie ("MyCssSkin", "232", {path: '/', expires: 10}); // Save the cookie // here 232 is the cookie value, expires indicates the duration of the cookie. For example, 10 indicates that the cookie is saved for 10 days, and-1 indicates that the cookie is deleted. You can also delete the cookie as $. cookie ('mycssskin', null); // The path here: '/' must be written in this way. Otherwise, the cookie path will be automatically set according to the directory path, for example, http://www.xxx.com/user/, pathwill be set to '/user' var cookie_skin = $. cookie ("MyCssSkin"); // obtain the cookie