JQuery Learning (1)

Definition

Basic Syntax: $ (selector). action ()

Dollar sign defines jQuery

Selector: "query" and "Search" HTML elements

JQuery action () executes operations on Elements

 

Use

1. Get the src attribute of img

<Script src = "jquery/jquery-1.9.1.js" type = "text/javascript"> </script> // call the jquery File

<Script type = "text/javascript">
Function aaa (){
$ (Document). ready (function (){
Alert ($ ('# img1'). attr ('src '));
})
}
</Script>

<Input id = "Button1" type = "button" value = "standalone" onclick = "aaa ()"/>

2. Various Effects

<Style type = "text/css">
. Aaa
{
Height: 300px;
Position: absolute;
}
</Style>
<Script src = "jquery/jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Function setyangshi (){
$ (Function (){
(('{Img1'{.css ('width', '200px ');
$ ('# Img1'). addClass ('aaa ');
})
}

$ (Function (){
$ ('# Button1'). click (function () {// manually add the click Method to the button
$ ('# Img1'). show (2000); // display
})
$ ('# Button2'). click (function (){
$ ('# Img1'). hide (2000); // hide
})
$ ('# Button3'). click (function (){
$ ('# Img1'). fadeIn (2000); // fade in
})
$ ('# Button4'). click (function (){
$ ('# Img1'). fadeOut (2000); // fade out
})
$ ('# Button6'). click (function (){
$ ('# Img1'). animate ({left: '250px '}, 5000); // if the image has a position: absolute
})
})
</Script>

<Input id = "Button5" type = "button" value = "set style" onclick = "setyangshi ()"/>
<Input id = "Button1" type = "button" value = "display"/>
<Input id = "Button2" type = "button" value = ""/>
<Input id = "Button3" type = "button" value = "Fade in"/>
<Input id = "Button4" type = "button" value = "Fade Out"/>
<Input id = "Button6" type = "button" value = "slide"/>