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