1. Use aptana (IDE) when writing js, and there is a jquery code prompt.
Select jqurey1.3 in code assist.
2. When adding events to an element, do not add events to html. Add events to js.
Do not write <input type = "button" onclick = "xxx" id = "id">
To be written as: document. getElementById ("id"). onclick = function (){}
3. Remove js to separate html and js.
In addition to js, Html does not require any js Code.
4. Jqurey selector: Basic selector, level selector, basic filter selector, content filter selector, visibility filter selector, attribute filter selector, child element filter selector, form selector, and form object attribute Selector
Http://xiazai.jb51.net/200907/yuanma/jQuery_xuanzeqi.rar
5. Space in the selector
The sub-selector with spaces and the visibility filter selector without spaces
Example 1: A small image is required for the brand list, and a js package of jqurey1.3.1 is also required.
: Jqurey mouse example http://xiazai.jb51.net/200907/yuanma/jquery_mouse.rar
Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {font-size: 12px; text-align: center ;}
A {color: # 04D; text-decoration: none ;}
A: hover {color: # F50; text-decoration: underline ;}
. SubCategoryBox {width: 600px; margin: 0 auto; text-align: center; margin-top: 40px ;}
. SubCategoryBox ul {list-style: none ;}
. SubCategoryBox ul li {display: block; float: left; width: 200px; line-height: 20px ;}
. Showmore {clear: both; text-align: center; padding-top: 10px ;}
. Showmore a {display: block; width: 120px; margin: 0 auto; line-height: 24px; border: 1px solid # AAA ;}
. Showmore a span {padding-left: 15px; background: url (img/down.gif) no-repeat 0 0 ;}
. Promoted a {color: # F50 ;}
</Style>
<Script type = "text/javascript" src = "scripts/jquery-1.3.1.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function () {// executed when the dom is loaded
// Obtain that the class is li in ul In the div of SubCategoryBox. If the index is greater than 5, the last one is not selected.
// The last two rows
Var $ hideBandes = $ ("div. SubCategoryBox ul li: gt (5): not (: last )");
$ HideBandes. hide (); // hide the dom after loading.
// Add the click method to all a tags in the div whose class is showmore
$ ("Div. showmore> a"). click (function (){
$ HideBandes. toggle (); // click here to hide and display loops.
If ($ hideBandes. is (": visible") {// if it is displayed
// Add a style to several specific elements. When the li content in ul In the div contains several contents such as Canon
$ ("Div ul li"). filter (": contains ('canon '),: ins ('nikon'),: contains ('olympus ')")
. AddClass ("promoted ");
$ (". Showmore> a> span" ).css ("background", "url (img/up.gif) no-repeat 0 0"); // change the Small Arrow picture
$ (". Showmore> a> span"). text ("show simplified Brands"); // change text
} Else {// If hidden
// Remove the added Style
$ ("Div ul li"). filter (": contains ('canon '),: ins ('nikon'),: contains ('olympus ')")
. RemoveClass ("promoted ");
$ (". Showmore> a> span" ).css ("background", "url (img/down.gif) no-repeat 0 0"); // change the Small Arrow picture
$ (". Showmore> a> span"). text ("show all brands ^"); // change text
}
Return false;
});
});
</Script>
</Head>
<Body>
<Div class = "SubCategoryBox">
<Ul>
<Li> <a href = "#"> canon </a> <I> (30440) </I> </li>
<Li> <a href = "#"> Sony </a> <I> (27220) </I> </li>
<Li> <a href = "#"> Samsung </a> <I> (20808) </I> </li>
<Li> <a href = "#"> Nikon </a> <I> (17821) </I> </li>
<Li> <a href = "#"> Panasonic </a> <I> (12289) </I> </li>
<Li> <a href = "#"> Casio </a> <I> (8242) </I> </li>
<Li> <a href = "#"> Fuji </a> <I> (14894) </I> </li>
<Li> <a href = "#"> Kodak </a> <I> (9520) </I> </li>
<Li> <a href = "#"> Pentax </a> <I> (2195) </I> </li>
<Li> <a href = "#"> Ricoh </a> <I> (4114) </I> </li>
<Li> <a href = "#"> Olympus </a> <I> (12205) </I> </li>
<Li> <a href = "#"> BenQ </a> <I> (1466) </I> </li>
<Li> <a href = "#"> patriot </a> <I> (3091) </I> </li>
<Li> <a href = "#"> other brand cameras </a> <I> (7275) </I> </li>
</Ul>
<Div class = "showmore">
<A href = "more.html"> <span> display all brands </span> </a>
</Div>
</Div>
</Body>
</Html>
Example 2: How many js packages are required for hyperlinks and image prompts?
Code
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Untitled Document </title>
<Style type = "text/css">
Body {
Margin: 0;
Padding: 40px;
Background: # fff;
Font: 80% Arial, Helvetica, sans-serif;
Color: #555;
Line-height: 180%
}
Img {
Border: none;
}
Li {
List-style: none;
Float: left;
Display: inline;
Margin-right: 10px;
Border: 1px solid # AAAAAA;
}
# Tooltip {
Position: absolute;
Border: 1px solid # ccc;
Background: #333;
Padding: 2px;
Display: none;
Color: # fff;
}
</Style>
<Script type = "text/javascript" src = "scripts/jquery-1.3.1.js"> </script>
<Script type = "text/javascript">
$ (Function () {// dom loaded and executed
// Set the distance between the image layer and the mouse
Var x = 10;
Var y = 20;
$ ("A. tooltip"). mouseover (function (e) {// select class as the mark of tooltip, and add the method of mouse passing through the event
This. myTitle = this. title; // obtain the title attribute of the tag.
This. title = ""; // set the original title attribute to an empty string.
Var imageTitle = this. myTitle? ("<Br>" + this. myTitle): ""; // determines whether the myTitle is empty. If it is not empty, add a br to it.
Var im = "<div id = 'tooltip '> $ ("Body"). append (im); // append the created div to the body.
// Set the position of the appended div. e is the position of the mouse, and the distance from the mouse is the position of the div.
$ ("# Tooltip" ).css ("left", e. pageX + x + "px ")
. Css ("top", e. pageY + y + "px ")
. Show ("fast"); // set the display speed to fast.
}). Mouseout (function () {// method for removing the mouse event
This. title = this. myTitle; // return myTitle to the title.
$ ("# Tooltip"). remove (); // Delete the newly added div
}). Mousemove (function (e) {// method of moving the mouse over an image
// Modify the position
$ ("# Tooltip" ).css ("left", e. pageX + x + "px ")
. Css ("top", e. pageY + y + "px ");
}). Click (function () {return false ;}); // cancel the default method of a flag
})
</Script>
</Head>
<Body>
<H3> effects: <Ul>
<Li> <a href = "images/apple_1_bigger.jpg" class = "tooltip" title = "Apple iPod"> </a> </li>
<Li> <a href = "images/apple_2_bigger.jpg" class = "tooltip" title = "Apple iPod nano"> </a> </li>
<Li> <a href = "images/apple_3_bigger.jpg" class = "tooltip" title = "Apple iPhone"> </a> </li>
<Li> <a href = "images/apple_4_bigger.jpg" class = "tooltip" title = "Apple Mac"> </a> </li>
</Ul>
<Br/>
<Br/>
<H3> no effect: <Ul>
<Li> <a href = "images/apple_1_bigger.jpg" title = "Apple iPod"> </a> </li>
<Li> <a href = "images/apple_2_bigger.jpg" title = "Apple iPod nano"> </ a> </li>
<Li> <a href = "images/apple_3_bigger.jpg" title = "Apple iPhone"> </a> </li>
<Li> <a href = "images/apple_4_bigger.jpg" title = "Apple Mac"> </a> </li>
</Ul>
</Body>
</Html>
