First entry JavaScript knowledge point (vii)

Rewrite the previous student data with jquery

Html

<! DOCTYPE html>

Name:Age:Gender:Add

name	Age	Sex	Operation

Js

$ (function () {var data; 1. Gets the data if (localstorage.data = = = undefined) {$.ajax ({URL: './...        /data/data.json ', type: ' Get ', success:function (datafromserver) {data = Datafromserver;        Localstorage.data = json.stringify (data);      Showtable ();  }    });    } else {data = Json.parse (Localstorage.data);  Showtable ();      }//Add Student $ (' #add '). On (' click ', function () {var stu = {name: $ (' #name '). Val (), Age: $ (' #age '). Val (),    Gender: $ (' #gender '). Val ()};    $ (' input '). Val (');    Data.push (Stu);    Localstorage.data = json.stringify (data);  Showtable ();  });    Delete $ (' #tbody '). On (' click ', '. Delete ', function () {var index = This.parentNode.parentNode.sectionRowIndex;    Delete the corresponding item in the data array Data.splice (index, 1);    Localstorage.data = json.stringify (data);  Showtable ();  });  Modify the name $ (' #tbody '). On (' click ', '. Name ', function () {Onchangebtnclick (this, 0, ' name ');  }); Modify the age of $ (' #tbody '). On (' click ', '. ', function () {Onchangebtnclick (this, 1, ' age ');  });    Click Modify XX button function Onchangebtnclick (btn, Tdindex, prop) {var $tr = $ (BTN). Parent (). parent ();    var $td = $tr. Children (). EQ (tdindex);    Console.log ($TD);    $td. html (' <input type= ' text "value=" ' + $td. Text () + ' "> ');    var $operateTd = $ (BTN). parent (); $operateTd. Empty (). Append ($ (' <button> OK </button> '). On (' click ', function () {var newvalue =        $td. Children (). EQ (0). Val ();        var index = $tr. Get (0). Sectionrowindex;        Console.log (newvalue, index);        Data[index][prop] = newvalue;        Localstorage.data = json.stringify (data);      Showtable (); }). Append ($ (' <button class= "Cancel > Cancel </button> ')}//Cancel Modify $ (' #tbody '). On (' click ', '. Cancel ', show  Table);    Displays table function Showtable () {$ (' #tbody '). empty ();      $.each (data, function (I, n) {//Console.log (i);      Console.log (n);      Console.log (this); Console.log (' ======== '); $ (' <tr></tr> '). Append ($ (' <td> ' + n.name + ' </td> ' + ' <td> ' + n.ag E + ' </td> ' + ' <td> ' + n.gender + ' </td> ' + ' <td><button class= ' delete ' > Delete </button><button class= "name" > Modify name </button><button class= "Age" > Modify ages </button></  Td> '). AppendTo ($ (' #tbody '))}); }});

jquery Write Carousel

$ (function () {$ (' #wrap '). Data (' index ', 0);    $ (' #nav '). On (' Click ', ' Li ', function () {//Clear auto-play Timer clearinterval (timer);    var = this;    var index = $ (this). index ();      Saves the index number of the picture currently being displayed to the additional data $ (' #wrap '). Data (' index ', index). Animate ({Left:index * ( -430)}, +, function () {      $ (' #nav Li '). Removeclass (' selected ');      $ (that). AddClass (' selected ');    Restart AutoPlay timer = setinterval (AutoPlay, 2000);  });  });  var timer = setinterval (AutoPlay, 2000);    function AutoPlay () {//Console.log (123);    Gets the current index var currentindex = $ (' #wrap '). Data (' index ');    The index var nextindex of the next sheet;    if (Currentindex = = = $ (' #wrap img '). length-1) {nextindex = 0;    } else {nextindex = currentindex + 1;    }//Console.log (Nextindex); $ (' #wrap '). Data (' index ', nextindex). Animate ({Left:nextindex * ( -430)}, p, function () {$ (' #nav Li '). Remo    Veclass (' selected '). EQ (nextindex). addclass (' selected ');  }); }});

Handlebars template engine

<! DOCTYPE html>

First-entry JavaScript knowledge point (vii)