Home > Developer > JavaScript
Copy codeThe Code is as follows:
<HTML>
<HEAD>
<STYLE type = 'text/css '>
. Css1 {
Display: block;
Width: 100px;
Height: 100px;
Background-color: blue;
}
. Css2 {
Display: block;
Width: 100px;
Height: 100px;
Background-color: red;
}
</STYLE>
</HEAD>
<BODY>
<A href = '#' class = 'css1' id = freee> tt </a>
<Script src = 'jquery-1.3.2.js'>
</Script>
<Script>
$ (Document). ready (function (){
$ ("# Freee"). hover (function (){
$ (This). addClass ("css2 ");
}, Function (){
$ (This). removeClass ("css2 ");
});
});
</Script>
</BODY>
</HTML>
Find me: Use selector and event
JQuery provides two methods to select html elements. The first method is to combine CSS with the Xpath selector to form a string to be transmitted to the jQuery Constructor (for example: $ ("div> ul a"); the second is to use several methods of the jQuery object ). These two methods can also be combined for hybrid use.
To test the selection, we try to select and modify the first ordered list in starterkit.html.
In the beginning, we need to select the list itself. This list has an ID called "orderedlist", and the common javascript syntax is document. getElementById ("orderedlist "). in jQuery, we do this:
$ (Document). ready (function (){
$ ("# Orderedlist"). addClass ("red ");
}); Here, a CSS style red in starterkit is appended to the orderedlist (translator Keel Note: core.css under the CSS directory in the reference test package, which defines the red style ). After you update starterkit.html, you will see that the background color of the first ordered list has changed to red, and the second ordered list has not changed.
Now, let's add some new styles to the list subnodes.
$ (Document). ready (function (){
$ ("# Orderedlist> li"). addClass ("blue ");
}); In this way, the style "blue" is appended to li in all orderedlist ".
Now let's make it a little more complicated. When you move the mouse over the li object and move it away, style switching will take effect only on the last element of the list.
$ (Document). ready (function (){
$ ("# Orderedlist li: last"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
}). There are a lot of examples similar to CSS and XPath. More examples and lists can be found here. (Translator Keel Note: This article is for beginners. If you want to learn more after getting started, several links in this article will be required sooner or later! Will not translate again... ^_^ !)
Every onXXX event is valid, such as onclick, onchange, and onsubmit. There are jQuery equivalent representation (translator Keel Note: jQuery does not like onXXX, so it is changed to XXX, remove on ).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
