最简单的jQuery程序
用jQuery寫的一個(gè)簡(jiǎn)單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.
<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:使用選擇器和事件
jQuery提供兩種方式來(lái)選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來(lái)形成一個(gè)字符串來(lái)傳送到j(luò)Query的構(gòu)造器（如：$("div > ul a")）；第二種是用jQuery對(duì)象的幾個(gè)methods(方法)。這兩種方式還可以聯(lián)合起來(lái)混合使用。
為了測(cè)試一下這些選擇器，我們來(lái)試著在我們starterkit.html中選擇并修改第一個(gè)ordered list.
一開(kāi)始，我們需要選擇這個(gè)list本身，這個(gè)list有一個(gè)ID叫“orderedlist”，通常的javascript寫法是document.getElementById("orderedlist").在jQuery中，我們這樣做：
$(document).ready(function() {
?$("#orderedlist").addClass("red");
});這里將starterkit中的一個(gè)CSS樣式red附加到了orderedlist上(譯者Keel注：參考測(cè)試包中的css目錄下的core.css，其中定義了red樣式)。因此，在你刷新了starterkit.html后，你將會(huì)看到第一個(gè)有序列表(ordered list )背景色變成了紅色，而第二個(gè)有序列表沒(méi)有變化.
現(xiàn)在，讓我們添加一些新的樣式到list的子節(jié)點(diǎn).
$(document).ready(function() {
?$("#orderedlist > li").addClass("blue");
});這樣，所有orderedlist中的li都附加了樣式"blue"。
現(xiàn)在我們?cè)僮鰝€(gè)復(fù)雜一點(diǎn)的，當(dāng)把鼠標(biāo)放在li對(duì)象上面和移開(kāi)時(shí)進(jìn)行樣式切換，但只在list的最后一個(gè)element上生效。
$(document).ready(function() {
?$("#orderedlist li:last").hover(function() {
??$(this).addClass("green");
?}, function() {
??$(this).removeClass("green");
?});
});還有大量的類似的CSS和XPath例子，更多的例子和列表可以在這里找到。（譯者Keel注：入門看此文，修行在個(gè)人，要想在入門之后懂更多，所以這段話的幾個(gè)鏈接遲早是要必看的！不會(huì)又要翻譯吧...^_^!）
每一個(gè)onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等價(jià)表示方法（譯者Keel注：jQuery不喜歡onXXX，所以都改成了XXX，去掉了on）。
總結(jié)
以上是生活随笔為你收集整理的最简单的jQuery程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Html 进行DOM 操作(放缩,颜色.
- 下一篇： 能量谱与功率谱