JavaScript 第五章 作業 jQuery
阿新 • • 發佈：2018-12-19
1.簡述jQuery的優勢
1、輕量級 jQuery非常輕巧，採用UglifyJS壓縮後，大小保持在30KB左右。 2、強大的選擇器 jQuery允許開發者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨創的高階而且複雜的選擇器，另外還可以加入外掛使其支援XPath選擇器，甚至開發者可以編寫屬於自己的選擇器。由於jQuery支援選擇器這一特性，因此有一定CSS經驗的開發人員可以很容易的切入到jQuery的學習中來。 3、出色的DOM操作的封裝 jQuery封裝了大量常用的DOM操作，使開發者在編寫DOM操作相關程式的時候能夠得心應手。jQuery輕鬆地完成各種原本非常複雜的操作，讓JavaScript新手也能寫出出色的程式。 4、可靠的事件處理機制 jQuery的事件處理機制吸收了JavaScript專家Dean Edwards編寫的事件處理函式的精華，使得jQuery在處理事件繫結的時候相當可靠。在預留退路、循序漸進以及非入侵式程式設計思想方面，jQuery也做得非常不錯。 5、完善的Ajax jQuery將所有的Ajax操作封裝到一個函式$.ajax()裡，使得開發者處理Ajax的時候能夠專心處理業務邏輯而無需關心複雜的瀏覽器相容性和XMLHttpRequest物件的建立和使用的問題。 6、不汙染頂級變數 jQuery只建立一個名為jQuery的物件，其所有的函式方法都在這個物件之下。其別名$也可以隨時交出控制權，絕對不會汙染其他的物件。該特性使jQuery可以與其他JavaScript庫共存，在專案中放心地引用而不需要考慮到後期的衝突。 7、出色的瀏覽器相容性 作為一個流行的JavaScript庫，瀏覽器的相容性是必須具備的條件之一。jQuery能夠在IE6.0+、FF 3.6+、Safari 5.0+、Opera和Chrome等瀏覽器下正常執行。jQuery同時修復了一些瀏覽器之間的的差異，使開發者不必在開展專案前建立瀏覽器相容庫。 8、鏈式操作方式 jQuery中最有特色的莫過於它的鏈式操作方式——即對發生在同一個jQuery物件上的一組動作，可以直接連寫而無需要重複獲取物件。這一特點使jQuery的程式碼無比優雅。 9、隱式迭代 當用jQuery找到帶有“.myClass”類的全部元素，然後隱藏他們時，無需迴圈遍歷每一個返回的元素。相反，jQuery裡的方法都被設計成自動操作的物件集合，而不是單獨的物件，這使得大量的迴圈結構變得不再必要，從而大幅度地減少程式碼量。 10、行為層與結構層的分離 開發者可以使用jQuery選擇器選中元素，然後直接給元素新增事件。這種將行為層與結構層完全分離的思想，可以使jQuery開發人員和HTML或其他頁面開發人員各司其職，擺脫過去開發衝突或個人單幹的開發模式。同時，後期維護也非常方便，不需要在HTML程式碼中尋找某些函式和重複修改HTML程式碼。 11、豐富的外掛支援 jQuery的易擴充套件性，吸引了來自全球開發者來編寫jQuery的擴充套件外掛。目前已經有成百上千的官方外掛支援，而且還不斷有新外掛面世。 12、完善的文件 jQuery的文件非常豐富，不管是英文文件，還是中文文件。 13、開源 jQuery是一個開源的產品，任何人都可以自由地使用並提出修改意見。
2.什麼是jQuery物件，如何把DOM物件轉換為jQuery物件？
jQuery物件:在JQuery庫中，可以通過本身自帶的方法獲取頁面DOM元素的物件叫做JQuery物件，物件以var開頭定義。
DOM物件轉換為jQuery物件:對於已經是一個DOM物件，只需要用$()把DOM物件包裝起來，就可以獲得一個jQuery物件了。$(DOM物件) 如：var v=document.getElementById("v"); //DOM物件 var $v=$(v); //jQuery物件 轉換後，就可以任意使用jQuery的方法了。 通過以上方法，可以任意的相互轉換jQuery物件和DOM物件。需要再強調注意的是：DOM物件才能使用DOM中的方法，jQuery物件是不可以用DOM中的方法。
3.jQuery的語法由哪幾部分組成？
jQuery語句主要包含三大部分：$()、document和ready()分別被稱為工廠函式、選擇器、方法
語法為$(document).ready(){}
4.使用css()方法新增圖片邊框，單擊圖片顯示圖片邊框
實現程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ text-align: center; } </style> </head> <body> <img src="img/pic.gif"/> <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").click(function(){ $("img").css('border','1px solid gray'); }); }); </script> </body> </html>
5.製作林徽因簡介頁面，單擊林徽因簡介連結顯示簡介內容，單擊主要作品連結顯示對應作品
實現程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,h1,h2,ul,li,p{margin: 0; padding: 0; font-family: "微軟雅黑"; line-height: 28px;}
p{ font-size: 14px; text-indent: 2em; display: none;}
ul{display: none;}
h1{text-align: center; line-height: 60px;font-size: 32px; background: #333333; color: #fff; margin-bottom: 5px; cursor: pointer;}
h2{text-align: center; line-height: 50px;font-size:28px; background: #333333; color: #fff; margin-top: 5px; cursor: pointer;}
</style>
</head>
<body>
<h1>林徽因簡介</h1>
<p>林徽因，女，漢族，原名林徽音，出生於浙江杭州，祖籍福建福州。中國著名建築家、詩人、作家。人民英雄紀念碑和中華人民共和國國徽深化方案的設計者 <br /> 林徽因是建築師樑思成的第一任妻子。三十年代初，與夫婿樑思成用現代科學方法研究方法研究中國古代建築，成為這個學術領域的開拓者。
</p>
<h2>主要作品</h2>
<ul>
<li>《你是人間四月天》</li>
<li>《寶蓮燈》</li>
<li>《九十九度中》</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
$("p").css('display','block');
});
$("h2").click(function(){
$("ul").css('display','block');
});
});
</script>
</body>
</html>