JQuery-02. Style Sheet Properties Action/class action, animation, show hide, slide in, fade in, stop animation, node action, add object, empty node

Style sheet properties operations. css

$ ("div"). css ({' width ': +, ' height ': +, ' background ': ' Red '});

$ ("div"). CSS ("Background", "pink");

Class operations

. addclass Add Class $ ("div"). AddClass ("class");

. removeclass Delete Class $ ("div"). Removeclass ("class");

Hasclass determine if there is a class $ ("div"). Hasclass ("class");

. Toggleclass Switch Class $ ("div"). Toggleclass ("class"); There are class classes that will be removed without adding the class class

Animation

Show/Hide:

The. Show/.hide/.toogle () brackets can be written in nothing; it is through Display:block/none. To implement hiding and display

. Show/.hide/.toogle (millisecond value) fixed time, by controlling the width and height transparency. Dispaly Control/properties are only present at the time of transformation, and when displayed, the width and opacity properties are clear

. Show/.hide/.toogle (Fast/normer/slow): Slow: (Slow 600ms)/normer: normal 400 ms/fast: fast: 200 ms

. Show/.hide.toogle (Fast/normer/slow,function () {function}); Back off the function. Execute callback function when display is complete

　　No parameters/milliseconds/string/callback function

　slide in/slide out: Fade in /fade out of custom

. Slidedown () display fadeIn: Display. Animate ({JSON string}, time, callback function)

Slideup (); Hide FadeOut: Hide animate does not support background color

. Toogle (); Fadetoggle: Toggle

　Stop Animation:

. Stop (False,fasle) stops performing the currently executing animation, performing the next animation

. Stop (True,false)

Empty queue, subsequent animations do not execute

1. 1. 1. Do not immediately complete the current animation, just stop. Stop (False,false)
      2. Do not empty queue, subsequent animation execution
      3. Stop completing the current animation, perform the next animation
2. . Stop (True,true)
   1. Empty the animation queue without performing future animations
   2. Complete the current animation now
3. . Stop (False,true)
   1. Do not empty animation queue, subsequent animation execution
   2. Immediately after the current animation is completed, the next animation is performed
      
      

The first parameter determines whether the queue is emptied. You can end the animation immediately.

True to empty false does not empty

The second parameter makes the currently executing animation complete immediately, and resets the original style of show and hide, calls the callback function, and so on

1. 1. True to complete immediately
   2. False does not complete immediately

Node Operation:

Create a JQuery object

$name = $ ("<li></li>"); Create an LI tag

$ ("label name"). HTML ("content")

adding objects

$ ("target location"). Append ("element to add"); Add at last position of target

Newnode.appendto ($ (' Add to ');

prepend () Add Newnode.prependto ($ (' to add to ') at the front of the box);

$ (""). After (NewNode): Brother after. Multiply add

$ (""). Before (NewNode); Before the brothers.

To empty a node:

$ ("node"). HTML ("null character");

$ ("node"). Empty ()

Deletes the specified element. $ ("node"). Remove ();

Replication nodes:

var NewNode = $ (the element to be copied). Clone;

<! DOCTYPE html>Table {Border-Collapse:collapse; Border-spacing:0;        border:1px solid #c0c0c0;            } th, td {Border:1px solid #d0d0d0; Color: #404060;        padding:10px; } th {background-color: #09c; Font:bold 16px"Microsoft Jas Black";        Color: #fff; } TD {Font:14px"Microsoft Jas Black"; } tbody TR {background-color: #f0f0f0;            } tbody tr:hover {cursor:pointer; Background-color: #fafafa; }    </style> <script src= "Jquery-1.11.1.js" ></script> <script>        $(function () {            //simulate the data you get from the background            vardata =[{name:"Wisdom Podcast", URL:"Http://www.itcast.cn", type:"It's the strongest training institution"}, {name:"Dark Horse Programmer", URL:"Http://www.itheima.com", type:"Undergraduate IT training organization"}, {name:"Intellectual front-end Academy", URL:"Http://web.itcast.cn", type:"The front of the Huangpu Military Academy"            }]; //Requirements: Click on the button and generate a TR inside to generate three TD. The array element is a number of tr. and put it in tbody.            //steps:            //1. Binding Events            //2. Use the For loop to combine all the data in the array into a single string.             //3. Set the generated string to HTML content to add into tbody.             //1. Binding Events$ ("Input"). Click (function () {                //write to the Click event and clear str after each click                varstr = ""; //2. Use the For loop to combine all the data in the array into a single string.                  for(vari=0;i<data.length;i++){                    //how to generate 3 groups??? //str + = "<tr><td>1</td><td>2</td><td>3</td></tr>";                     //Data[i] = Each json in the array                    //data[i].name = Name property value for each JSON in the arraystr + = "<tr><td>" +data[i].name+ "</td><td>" +data[i].url+ "</td><td>" +data[i ". Type+ "</td></tr>"; }                //3. Set the generated string to HTML content to add into tbody. $ ("#j_tbData"). html (str); })        })    </script>Create a table dynamically
JQuery-02. Style Sheet Properties Action/class action, animation, show hide, slide in, fade in, stop animation, node action, add object, empty node