Traditional JavaScript is very cumbersome to manipulate CSS, such as <div id= "a" style= "Background:blue" >css</div> take its background syntax is document.getElementById ("a"). Style.background, while jquery is more convenient for CSS operations, $ ("#a"). Background (), $ ("#a"). Background ("Red")
$ ("#a") get jquery Object [<div id= "a" .../div>]
$ ("#a"). Background () will take out the background style of the object.
$ ("#a"). Background ("red") sets the background style of the object to red jquery provides the following ways to manipulate CSS
Background () background (val) color () color (val) CSS (name) CSS (prop)
CSS (key, value) float () float (val) height () height (val) width () width (val)
Left () left (val) overflow () overflow (val) position () position ()-Top () (Val)
Here need to explain CSS (name) CSS (prop) CSS (key, value), the other look at the name of what the role is!
<div id= "a" style= "Background:blue color:red">css</div>< p id= "b">Test</P>
CSS (name) gets the style named name
$ ("#a"). CSS ("color") will get the color value red in the style, ("#a"). CSS ("background") will get blue
css (prop) prop is a hash object that is used to set a large number of CSS styles
$ ("#b"). CSS ({color: "Red", Background: "Blue"});
The final effect is <p id= "B" style= "background:blue; Color:red ">test</p>,{color:" Red ", Background:" Blue "},hash object, Color is key," red "is value,
CSS (key, value) is used to set a separate CSS style
$ ("#b"). CSS ("Color", "red"); the final effect is <p id= "B" style= "color:red" >test</p>
Four : JavaScript processing
$.browser () to determine the browser type, return Boolen value
$ (function() {
if($.browser.msie) {
Alert (" This is an IE browser ");}
Else if($.browser.opera) {
Alert (" This is an opera browser ");}
})
When the page is loaded to determine the type of browser, the types that can be judged are MSIE, Mozilla, Opera, Safari
$.each (obj, fn) obj is an object or array, and FN is the function that executes sequentially on OBJ, noting that the $ () is distinguished. each ()
$.each ([0,1,2], function(i) {alert ( "Item #" + i +< c16> ": " + this );};
0,1,2 as a parameter and passed into function (i), respectively
$.each ({name: "John", Lang: "JS" }, function(i) {alert ( "name: " + i + ", Value: " + This";
{Name: "John", Lang: "JS"} is a hash object, which in turn passes each set of objects in the hash to the function
$.extend (obj, prop) expands the first object with the second object
var settings = {validate: false, limit: 5, Name: 'foo' };
var options = {validate: true, Name: "bar" };
$.extend (settings, options);
After execution, the settings object is {validate:true, limit:5, Name: "Bar"}
You can use the following function to test
$(function () {
var settings = { &NBSP;VALIDATE:&NBSP false , limit: 5 , name: foo " };
var options = { &NBSP;VALIDATE:&NBSP true , name: bar
$.extend (settings, options);
$.each (settings, function (i) { alert ( i + " = " + this ); });
}) /span>
$.grep (ARRAY,FN) filters the array by the function FN, passing the elements in the array to FN,FN must return a boolen, such as FN return true, will be filtered
$ (function() {
var arr= $.grep ([0,1,2,3,4], function( i) { return i > 2;});
$.each (arr, function(i) {alert (i);});
})
We can look at the execution $.grep after the array [0,1,2,3,4] becomes [0,1]
$.merge (first, second) two parameters are arrays, expel the second array with the same one, then combine two numbers and
$ (function() {
var arr = $.merge ([0,1,2], [2,3,4])
$.each (arr, function(i) {alert (i);});
})
You can see that the result of ARR is [0,1,2,3,4]
$.trim (str) remove spaces at both ends of the string
$.trim ("Hello, How are"?) "The result is" Hello, how are you? "
Five : Dynamic effects
Before this part of the first we look at an example, believe that the friends who do the Web page to encounter the N-level menu scenario, but click a menu button, if its submenu is displayed, then hide the submenu, if the submenu is hidden, then display, The traditional JavaScript practice is to use getElementById to remove the ID of the container in which the submenu is located, to determine if the container's style.display is equal to none, if it is equal to block, if it is not equal to none, If the effect set a little more complex, when the button is clicked, not suddenly hide and show the submenu, but a highly smooth transformation, it is necessary to set the settimeout by the height of the submenu, and then the complexity of the smooth disappearance and appearance of transparency, then appear to need to write a lot of code, If the JS base is not good friends may only be from someone else to write good code to take over to modify! jquery to achieve the above effect only need 1 words on the line, $ ("#a"). Toggle ("Slow"), after learning jquery also need to copy to modify other people's code? Here's how jquery is used for effect processing.
Hide () Hides matching objects
<p id= "a">Hello Again</p><a href= "#" OnClick = ' ("#a"). Hide () '>jQuery</a>
When the connection is clicked, the display of the object with ID A is changed to none.
Show () shows matching objects
Hide (speed) hides the matching object at a certain speed, and its size (long width) and transparency gradually change to 0,speed level 3 ("slow", "normal", "fast"), or a custom speed.
Show (speed) displays the matching object at a certain speed, its size (long width) and transparency are gradually changed from 0 to normal
Hide (speed, callback) show (speed, callback) Execute function when display and hide changes are completed callback
Toggle () Toggle (speed) If the current matching object is hidden, display them and, if it is currently displayed, hide, toggle (speed), its size (long width), and transparency are gradually changing.
<img src= "1.jpg" style= "width:150px"/>
<a href= "#" onClick= ' $ ("img"). Toggle ("slow") '>jQuery</A >
fadeIn (speeds) fadeout (speeds) displays or hides matching objects based on speed adjustment transparency, noting that unlike hide (speed) and show (speed), fadeIn and fadeout only adjust transparency and do not resize
<img src= "1.jpg" style= "Display:none"/><a href= "#" onClick= ' $ ("img "). FadeIn ("slow") '> jQuery </a>
Click on the connection to see the picture gradually displayed.
fadeIn (speed, callback) fadeout (speed, callback) callback as functions, first show or hide matching objects by adjusting transparency, and execute callback function when the adjustment is finished
<img src= "1.jpg"/>
<a href= "#" onClick= ' $ ("img "). FadeIn ("Slow", function () {alert ("Animation done.");}) ' > jQuery </a>
When you click on the connection, you can see the picture gradually displayed, the Full pop-up dialog box
Fadeto (speed, opacity, callback) adjusts the speed of the matching object to the speed at which it will be resized opacity, and then executes the function callback. Opacity is the final display of transparency (0-1).
<img src= "1.jpg"/><br>
<a href= "#" onClick= ' $ ("img "). Fadeto ("Slow", 0.55,function () {alert ("Animation done ."); })' > jQuery </a>
You can look at yourself to see the effect, if not jquery, write the original JavaScript script may be a lot of code!
Slidedown (speeds) will match the height of the object from 0 to the specified rate of smooth change to normal!
<img src= "1.jpg" style= "Display:none"/>
<a href= "#" onClick= ' $ ("img "). Slidedown ("slow") '>jQuery</ a>
Slidedown (speeds,callback) changes the height of the matching object from 0 to normal! Execute function callback after change ends
slideup ("Slow") slideup (speed, callback) the height of the matched object changed from normal to 0
slidetoggle ("slow") if the height of the matching object gradually changes to 0, if 0, then gradually change to normal
