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

Source: Internet
Author: User

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. 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
    1. . Stop (True,true)
        1. Empty the animation queue without performing future animations
        2. Complete the current animation now
    2. . 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. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.