JQuery user manual 3 CSS operations traditional javascript operations on css are rather cumbersome, such
Css
The background syntax is document. getElementById (""). style. background, while jQuery is more convenient for css operations, $ ("# "). background (), $ ("# "). background ("red ")
$ ("# A") Get the jQuery object [
]
$ ("# A"). background () will retrieve the background style of the object.
$ ("# A"). background ("red") sets the background style of this object to redJQuery provides the following methods to operate css
Background () background (val) color (val) css (name) css (prop)
Css (key, value) float (val) height (val) width (val)
Left () left (val) overflow (val) position (val) top (val)
Here we need to explain the css (name) css (prop) css (key, value). What do other users know about the functions of their names!<PId= ""Style= "Background: blue; color: red">Css P> <PId= "B">Test P>
Css (name)Get the style named name
$ ("# A" ).css ("color") will get the color value red in the style, ("# a" ).css ("background") will get the blue
Css (prop)Prop is a hash object used to set a large number of css styles.
$ ("# B" ).css ({color: "red", background: "blue "});
The final result is
Test
, {Color: "red", background: "blue"}, hash object, color as key, and "red" as value,
Css (key, value)Used to set a separate css style
$ ("# B" ).css ("color", "red"); the final effect is
Test
Thu: JavaScript processing
$. Browser () determines the browser type and returns the boolen Value $ (Function(){
If($. Browser. msie ){
Alert ("This is an Internet browser.");}
Else If($. Browser. opera ){
Alert ("This is an operabrowser.");}
})When the page load type determines the browser type, the types that can be determined include msie, mozilla, opera, and safari.
$. Each (obj, fn)Obj is an object or array, and fn is a function executed in sequence on obj. Note that $ (). each () is distinguished () $. Each ([0,1,2],Function(I) {alert ("Item #" +I+ ":" + This);});Input 0, 1, 2 as parameters to function (I) respectively.$. Each ({name:"John", Lang:"JS"},Function(I) {alert ("Name:" +I+ ", Value:" + This);{Name: "John", lang: "JS"} is a hash object. Each group of hash objects is input to the function in sequence.
$. Extend (obj, prop)Extend the first object with the second object VarSettings={Validate:False, Limit:5, Name:"Foo"};
VarOptions={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(){
VarSettings={Validate:False, Limit:5, Name:"Foo"};
VarOptions={Validate:True, Name:"Bar"};
$. Extend (settings, options );
$. Each (settings,Function(I) {alert (I+ "=" + This);});
})
$. Grep (array, fn)Use the fn function to filter the array. Pass the elements in the array to fn in sequence. The fn must return a boolen. If fn returns true, it will be filtered. $ (Function(){
VarArr=$. Grep ([0,1,2,3,4],Function(I ){ReturnI> 2;});
$. Each (arr,Function(I) {alert (I );});
})We can see that the array [, 4] After $. grep is executed becomes [].
$. Merge (first, second)Both parameters are arrays. The second array is the same as the first one, and then the two arrays are merged. $ (Function(){
VarArr=$. Merge ([0,1,2], [2,3,4])
$. Each (arr,Function(I) {alert (I );});
})The result of arr is [0, 1, 2, 3, 4].
$. Trim (str)Removes spaces at both ends of a string.
$. Trim ("hello, how are you? ") The result is" hello, how are you? "
V.: Dynamic Effect
Before proceeding to this section, let's take a look at the example. I believe that all the friends who work on the web page will encounter n-level menus. However, when you click a menu button, if its sub-menus are displayed, the sub-menu is hidden. If the sub-menu is hidden, it is displayed. The traditional javascript method is to first use getElementById to retrieve the id of the container where the sub-menu is located and determine the style of the container. whether display is equal to none. If it is equal to none, it is set to block. If it is not equal to none, if the effect is more complex, When you click the button, instead of suddenly hiding and displaying sub-menus, we need to set the height of sub-menus through setTimeout, and then the transparency disappears and appears more smoothly, at this time, a lot of code needs to be written. If the js foundation is poor, you may have to get the code written by others and modify it! JQuery only needs one sentence to implement the above results. $ ("# a"). toggle ("slow"), do I need to copy and modify others' code after learning jQuery? Next we will introduce jQuery's methods for effect processing one by one.
Hide ()Hide matching objects <PId= "">Hello Again P> <AHref= "#"OnClick='("# A"). hide ()'>JQuery A>When you click Connect, the display of the object with id a changes to none.
Show ()Show matching objects
Hide (speed)The size (length and width) and transparency of the matching object are gradually changed to 0 at a certain speed, and the speed has three levels ("slow", "normal", "fast "), it can also be a custom speed.
Show (speed)The matching object is displayed at a certain speed. Its size (length and width) and transparency change from 0 to normal.
Hide (speed, callback) show (speed, callback)After the show and hide changes are complete, run the callback function.
Toggle ()Toggle (speed)If the current matching object is hidden, it will be displayed. If it is currently displayed, it will be hidden. toggle (speed), its size (length and width) and transparency will change gradually. <ImgSrc= "1.jpg"Style= "Width: 150px"/>
<AHref= "#"OnClick= '$ ("Img"). toggle ("slow ")'>JQuery A>
FadeIn (speeds) fadeOut (speeds)Adjust the transparency based on the speed to display or hide matching objects. Note that, unlike hide (speed) and show (speed), fadeIn and fadeOut only adjust the transparency and not the size. <ImgSrc= "1.jpg"Style= "Display: none"/> <AHref= "#"OnClick= '$ ("Img"). FadeIn (" slow ")'>JQuery A>Click Connect to see the image gradually displayed.
FadeIn (speed, callback) fadeOut (speed, callback)Callback is a function. Adjust the transparency to display or hide matching objects. After the adjustment, run the callback function. <ImgSrc= "1.jpg"/>
<AHref= "#"OnClick= '$ ("Img"). FadeIn (" slow ", function () {alert (" Animation Done .");})'>JQuery A>After you click Connect, you can see that the image is gradually displayed. The displayed dialog box is displayed.
FadeTo (speed, opacity, callback)Adjust the reverse transparency opacity of the matched object at the speed, and then execute the callback function. Opacity is the final transparency (0-1 ). <ImgSrc= "1.jpg"/> <Br>
<AHref= "#"OnClick= '$ ("Img"). FadeTo (" slow ", 0.55, function () {alert (" Animation Done .");})'>JQuery A>Let's take a look at the results. If jQuery is not used, there may be a lot of code to write the original javascript script!
SlideDown (speeds)Changes the height of the matched object from 0 to a normal value at a specified rate! <ImgSrc= "1.jpg"Style= "Display: none"/>
<AHref= "#"OnClick= '$ ("Img"). SlideDown (" slow ")'>JQuery A>
SlideDown (speeds, callback)Change the height of the matched object from 0 to normal! Run the callback function after the change ends.
SlideUp ("slow") slideUp (speed, callback)The height of the matched object changes from normal to 0.
SlideToggle ("slow ")If the height of the matched object is normal, it gradually changes to 0. If it is 0, it gradually changes to normal.
