Jquary Tutorial 3:jquery Syntax 1

1.jQuery style Operation

1.1 Sets or modifies styles , manipulating the style property.

single-style syntax: jquery object. CSS (' property name ', ' property value ')

// HTML<div id= "box" ></div>//JS$ ("#box"). CSS ("Background", "Gray"); // change the background color to gray // JS Code finished running results <div id= "box" style= "Background:gray" ></div>

To set multiple styles:

// HTML<div id= "box" ></div>//JS$ ("#one"). css ({    "background": " Gray ",    " width ":" 400px ",    " height ":" 200px "}); // JS Execution completed results <div id= "box" style= "Background:gray; width:400px; height:200px "></div>

2 Getting inline styles

// HTML<div id= "box" style= "Background:gray width:100px" ></div>$ (// return is RGB (+/-+)--gray// return 100px

2.1 operation class Style mode

// HTML<div id= "box" ></div>//JS$ (' #box '). addclass (' one '); // results after execution <div id= "box" class= "one" ></div>

If you want to add more than one

// If you want to add more than one // HTML<div id= "box" ></div>//JS$ (' #box '). AddClass (' both three '); // results <div id= "box" class= "three" ></div>

2.2 Remove all style classes

1 If the parameter is not passed, all class names will be removed

// HTML<div id= "box" class= "one three" ></div>//JS$ (' #box '). Removeclass (); // completed results <div id= "#box" class></div>

2 If the parameter is passed in, delete the specified class name

//HTML<div id= "box" class= "one three" ></div>//JS$ (' #box '). Removeclass (' one '));//result of execution completed<div id= "#box" class= "three" ></div>//======================================================================================//If you want to delete more than one class name at a time//HTML<div id= "box" class= "one three" ></div>//JS$ (' #box '). Removeclass (' one three '));//Results<div id= "#box" class= "both" ></div>

-3 Judging If there is a style class

// HTML<div id= "box" class= "one" ></div>//JS// return True//  returns false

-4 Toggle Style class

If there is a class name, remove the style, and if not, add the class name.

// HTML<div id= "box" ></div>//JS$ (' #box '). Toggleclass (' one '); // results of execution <div id= "box" class= "one" ></div>// at this time, once again Toggleclass (' a ') is executed; $ (' #box '). Toggleclass (' one '); // the results of the execution <div id= "box" class></div>

3 implicit iterations in jquery:jquery internally helps us iterate through DOM objects and then implements specific actions for each DOM object.

Jquary Tutorial 3:jquery Syntax 1