锋利的jQuery系列一
生活随笔
收集整理的這篇文章主要介紹了
锋利的jQuery系列一
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡介
jQuery是繼Prototype之后又一個優秀的JavaScript庫，是一個由John Resig創建于06年1月的開源項目。現在的jQuery主要包括核心庫、UI、插件和jQuery Mobile這幾大模塊。
一.配置jQuery環境
進入jQuery的官網，下載最新的jQuery庫文件。
jQuery環境配置：
jQuery不需要安裝，把下載的jquery.js放到網站的一個公共的位置，想要在某個頁面中用jQuery時，只需要在相關的HTML文檔中引入該類庫文件的位置即可。
在頁面中引入jQuery，在編寫的頁面代碼中< head>標簽內引入jQuery庫后，就可以使用jQuery庫了，下面是第一個jQuery程序：
default.css
/* reset */ body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;} form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} input,select{font-size:12px;line-height:16px;} img{border:0;} ul,li{list-style-type:none;} a {color:#00007F;text-decoration:none;} a:hover {color:#bd0a01;text-decoration:underline;}.box {width: 150px;margin: 0 auto; } .menu{overflow:hidden;border-color: #C4D5DF;border-style: solid;border-width: 0 1px 1px; } /* lv1 */ .menu li.level1 a{display: block;height: 28px;line-height: 28px;background:#EBF3F8;font-weight:700;color: #5893B7;text-indent: 14px;border-top: 1px solid #C4D5DF; } .menu li.level1 a:hover{text-decoration:none;} .menu li.level1 a.current{background:#B1D7EF;} /* lv2 */ .menu li ul{overflow:hidden;} .menu li ul.level2{display:none;} .menu li ul.level2 li a{display: block;height: 28px;line-height: 28px;background:#ffffff;font-weight:400;color: #42556B;text-indent: 18px;border-top: 0px solid #ffffff;overflow: hidden; } .menu li ul.level2 li a:hover{color:#f60; }上面代碼中:
$(document).ready(function(){... });的作用類似于JavaScript中的window.onload方法，不過與它還是有些區別：
- window.onload執行時機：必須等待網頁中所有內容加載完畢后，才能執行；$(document).ready（）執行時機是網頁中所有的DOM結構繪制完畢后就執行，可能DOM元素關聯的東西并沒有加載完。
- window.onload不能同時編寫多個；$(document).ready（）可以。
- window.load沒有簡寫的形式，$$(document).ready（function(){ … }）可以簡寫為$(function(){ … })。
需要強調的是，在jQuery庫中， $$符號就是jQuery的一個簡寫形式，例如$ (“#foo”)和jQuery(“#foo”)是等價的。
二 . jQuery對象和ＤＯＭ對象
ＤＯＭ對象即文檔對象模型，每一份ＤＯＭ都可以表示成一棵樹。構建一個非常基本的網頁。
jQuery對象就是jQuery包裝DOM對象后產生的對象。
jQuery對象時jQuery獨有的。如果一個對象時jQuery對象，那么就可以使用jQuery里的語法。例如：
//獲取id為foo的元素內html代碼。 $("#foo").html();//這段代碼等價于： document.getElmentById("foo").innerHTML;在jQuery對象中無法使用DOM對象的任何方法，同樣ＤＯＭ對象也不能使用jQuery里的方法。
注意：
用#id作為選擇符取得的是jQuery對象而并非document.getElmentById(“id”)所得到的DOM對象，兩者并不等價。注意分清jQuery對象和ＤＯＭ對象。
三 . jQuery對象和ＤＯＭ對象的互相轉換
- jQuery種提供兩種將一個jQuery對象轉換成DOM對象的方法：[index]和get(index)。
注意：平時用到的jQuery對象都是通過$()函數創造出來的，這個函數就是一個jQuery對象的制造工廠。
四 . jQuery對象和ＤＯＭ對象實例研究
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>論壇注冊</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--引入jQuery庫--><script src="../images/jquery.min.js" type="text/javascript"></script><!--DOM方式判斷復選框是否被選中--><!-- <script type="text/javascript">$(function(){ //等待dom元素加載完畢var $cr = $("#cr"); //jQuery對象var cr = $cr[0]; //DOM對象，或者$cr.get[0]$cr.click(function(){if(cr.checked){alert("感謝你的支持！你可以繼續操作！");}});});</script>--><!--jQuery方式--><script type="text/javascript">$(function () { //等待dom元素加載完畢var $cr = $("#cr"); //jQuery對象$cr.click(function(){if($cr.is(":checked")){ //jQuery方式判斷alert("感謝你的支持！你可以繼續操作！");}});});</script> </head> <body> <input type="checkbox" id="cr"/> <label for="cr">我已經閱讀了上面制度.</label> </body> </html>上面例子簡單演示了DOM對象和jQuery對象的不同，但最終效果是一樣的。
總結
以上是生活随笔為你收集整理的锋利的jQuery系列一的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 修改系统编码
- 下一篇： 百度云html提取码,百度网盘提取码怎么