jQuery實踐樹(2)
編輯：JQuery特效代碼
上一個實踐主要對jquery的ready事件進行。本實踐要來使用jQuery改變頁面的背景圖片。
可以先試試效果：http://hovertree.com/texiao/jquerytree/2/
當你打開頁面時，會看到一閃一閃的雪花效果。
這不是使用jQuery的效果，只是用CSS設置了背景圖片為動態圖而已。
本實踐將要用jquery改變頁面的背景圖。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery實踐樹(2) - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style>body{margin:0px;background-image:url(http://hovertree.com/texiao/jquerytree/2/images/snow.jpg);}.jquerytree2{width:765px;margin:10px auto}</style>
</head>
<body>
<div class="jquerytree2">
<h1>何問起</h1>
<h2>jQuery實踐樹(2) </h2>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/h/bjae/9ofotfdj.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a>
<br />
當你打開頁面時，會看到一閃一閃的雪花效果。<br />這不是使用jQuery的效果，只是用CSS設置了背景圖片為動態圖而已。<br />本實踐將要用jquery改變頁面的背景圖。請點擊下列鏈接。<br />
<br />
<a href="javascript:;" id="backHoverTree0" target="_self">聖誕節背景圖</a> <a href="javascript:;" id="backHoverTree1" target="_self">背景圖1</a> <a href="javascript:;" id="backHoverTree2" target="_self">背景圖2</a> <a href="javascript:;" id="backHoverTree3" target="_self">背景圖3</a>
<a href="javascript:;" id="backHoverTree4" target="_self">還原</a> <a href="javascript:;" id="backHoverTree5" target="_self">清除背景圖片</a>
</div>
<script>
$(document).ready(function () {
$("#backHo" + "verTree0").on("click", function () { $("body").css("background-image", "url(https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122917232880.jpg)") });
$("#backHoverTree1").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)") });
$("#backHoverTree2").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/bubble.jpg)") })
$("#backHoverTree3").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/red.jpg)") })
$("#backHoverTree4").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/snow.jpg)") })
$("#backHoverTree5").on("click", function () { $("body").css("background-image", "url()"); })
})
</script>
</body>
</html>
其中的$(document).ready(),表示當頁面載入完後執行指定函數，請參考：http://hovertree.com/h/bjae/9ofotfdj.htm
代碼中， $("#backHoverTree1")，是jquery的選擇器，表示選擇id為backHoverTree1的元素，也就是
<a href="javascript:;" id="backHoverTree1" target="_self">背景圖1</a>
這個鏈接的id為backHoverTree1，請注意這是區分大小寫的。
jQuery # 選擇器 也叫做id選擇器
# 選取帶有唯一的指定 id 的元素。
id 引用 HTML 元素的 id 屬性。
相同的 id 值只能在文檔中使用一次。
語法
$("#id")
其中的id為必需。規定所要選擇的元素的 id。
id 選擇器使用 HTML 元素的 id 屬性。
注意不要使用數字開頭的 ID 名稱！在某些浏覽器中可能出問題。
選擇了元素後，就可以對元素進行操作了，代碼中的on()函數表示附加一個函數來處理指定的事件
請參考：http:///a/bjac/4013kn5s.htm
$("#backHoverTree1").on("click", function () { });
其中click表示點擊，表示當點擊id為backHoverTree1的元素時執行function中的代碼
上面代碼中實際為
$("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)")
這個語句表示設置body的背景圖片為http://hovertree.com/texiao/jquerytree/2/images/flower.jpg
$("body")表示選擇body元素，這是一個標簽選擇器
請參考：http://hovertree.com/menu/jqueryselect/
選擇之後，就是對body元素進行樣式設置，也就是就是對body元素進行css()方法操作，css() 方法返回或設置匹配的元素的一個或多個樣式屬性。
一 返回 CSS 屬性值
返回第一個匹配元素的 CSS 屬性值。
注釋：當用於返回一個值時，不支持簡寫的 CSS 屬性（比如 "background" 和 "border"）。
$(selector).css(name)
其中 name 必需。規定 CSS 屬性的名稱。該參數可包含任何 CSS 屬性。比如 "color"。
二設置 CSS 屬性
設置所有匹配元素的指定 CSS 屬性。
$(selector).css(name,value)
其中 name 必需。規定 CSS 屬性的名稱。該參數可包含任何 CSS 屬性，比如 "color"。
value可選。規定 CSS 屬性的值。該參數可包含任何 CSS 屬性值，比如 "red"。
如果設置了空字符串值，則從元素中刪除指定屬性。
本示例代碼下載：http://hovertree.com/h/bjae/5n2tvrlb.htm
可以先試試效果：http://hovertree.com/texiao/jquerytree/2/
當你打開頁面時，會看到一閃一閃的雪花效果。
這不是使用jQuery的效果，只是用CSS設置了背景圖片為動態圖而已。
本實踐將要用jquery改變頁面的背景圖。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery實踐樹(2) - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style>body{margin:0px;background-image:url(http://hovertree.com/texiao/jquerytree/2/images/snow.jpg);}.jquerytree2{width:765px;margin:10px auto}</style>
</head>
<body>
<div class="jquerytree2">
<h1>何問起</h1>
<h2>jQuery實踐樹(2) </h2>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/h/bjae/9ofotfdj.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a>
<br />
當你打開頁面時，會看到一閃一閃的雪花效果。<br />這不是使用jQuery的效果，只是用CSS設置了背景圖片為動態圖而已。<br />本實踐將要用jquery改變頁面的背景圖。請點擊下列鏈接。<br />
<br />
<a href="javascript:;" id="backHoverTree0" target="_self">聖誕節背景圖</a> <a href="javascript:;" id="backHoverTree1" target="_self">背景圖1</a> <a href="javascript:;" id="backHoverTree2" target="_self">背景圖2</a> <a href="javascript:;" id="backHoverTree3" target="_self">背景圖3</a>
<a href="javascript:;" id="backHoverTree4" target="_self">還原</a> <a href="javascript:;" id="backHoverTree5" target="_self">清除背景圖片</a>
</div>
<script>
$(document).ready(function () {
$("#backHo" + "verTree0").on("click", function () { $("body").css("background-image", "url(https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122917232880.jpg)") });
$("#backHoverTree1").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)") });
$("#backHoverTree2").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/bubble.jpg)") })
$("#backHoverTree3").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/red.jpg)") })
$("#backHoverTree4").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/snow.jpg)") })
$("#backHoverTree5").on("click", function () { $("body").css("background-image", "url()"); })
})
</script>
</body>
</html>
其中的$(document).ready(),表示當頁面載入完後執行指定函數，請參考：http://hovertree.com/h/bjae/9ofotfdj.htm
代碼中， $("#backHoverTree1")，是jquery的選擇器，表示選擇id為backHoverTree1的元素，也就是
<a href="javascript:;" id="backHoverTree1" target="_self">背景圖1</a>
這個鏈接的id為backHoverTree1，請注意這是區分大小寫的。
jQuery # 選擇器 也叫做id選擇器
# 選取帶有唯一的指定 id 的元素。
id 引用 HTML 元素的 id 屬性。
相同的 id 值只能在文檔中使用一次。
語法
$("#id")
其中的id為必需。規定所要選擇的元素的 id。
id 選擇器使用 HTML 元素的 id 屬性。
注意不要使用數字開頭的 ID 名稱！在某些浏覽器中可能出問題。
選擇了元素後，就可以對元素進行操作了，代碼中的on()函數表示附加一個函數來處理指定的事件
請參考：http:///a/bjac/4013kn5s.htm
$("#backHoverTree1").on("click", function () { });
其中click表示點擊，表示當點擊id為backHoverTree1的元素時執行function中的代碼
上面代碼中實際為
$("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)")
這個語句表示設置body的背景圖片為http://hovertree.com/texiao/jquerytree/2/images/flower.jpg
$("body")表示選擇body元素，這是一個標簽選擇器
請參考：http://hovertree.com/menu/jqueryselect/
選擇之後，就是對body元素進行樣式設置，也就是就是對body元素進行css()方法操作，css() 方法返回或設置匹配的元素的一個或多個樣式屬性。
一 返回 CSS 屬性值
返回第一個匹配元素的 CSS 屬性值。
注釋：當用於返回一個值時，不支持簡寫的 CSS 屬性（比如 "background" 和 "border"）。
$(selector).css(name)
其中 name 必需。規定 CSS 屬性的名稱。該參數可包含任何 CSS 屬性。比如 "color"。
二設置 CSS 屬性
設置所有匹配元素的指定 CSS 屬性。
$(selector).css(name,value)
其中 name 必需。規定 CSS 屬性的名稱。該參數可包含任何 CSS 屬性，比如 "color"。
value可選。規定 CSS 屬性的值。該參數可包含任何 CSS 屬性值，比如 "red"。
如果設置了空字符串值，則從元素中刪除指定屬性。
本示例代碼下載：http://hovertree.com/h/bjae/5n2tvrlb.htm
- 上一頁:jquery商品櫥窗鼠標經過顯示大圖
- 下一頁:jQuery實踐樹(1)
小編推薦
jQuery fadeTo方法調整圖片的透明度使用介紹
jquery中focus()函數實現當對象獲得焦點後自動把光標移到內容最後
jQuery UI Dialog控件中的表單無法正常提交的解決方法
Eclipse下jQuery文件報錯出現錯誤提示紅叉
基於jquery的自定義鼠標提示效果 jquery.toolTip
JQuery 構建客戶/服務分離的鏈接模型中Table中的排序分析
使用jQuery和Bootstrap實現多層、自適應模態窗口
jQuery中parents()和parent()的區別分析
jQuery中判斷一個元素是否為另一個元素的子元素(或者其本身)
jquery實現textarea輸入框限制字數的方法教程
熱門推薦