瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)
更新時(shí)間：2012年05月11日 14:37:40 作者：
之前一直學(xué)習(xí)，現(xiàn)在終于有時(shí)間來(lái)整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記，希望能留下痕跡，也希望能幫助到您
好了開(kāi)始我的Jquery第一天。
我也是從Hello wrod!開(kāi)始的。關(guān)于jquery 的引用我直接一筆帶過(guò)。如下：
<html>
<head>
<title>jquery 鏈?zhǔn)讲僮?lt;/title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
alert("hello word!");
//靜止右鍵點(diǎn)擊
// $(document).bind("contextmenu",function(e){
// return false;
// });
});
</script>
</head>
<body>
</body>
</html>
接下來(lái)讓我們來(lái)看看一個(gè)復(fù)雜的實(shí)例，這個(gè)實(shí)例讓我們知道什么是：jquery的鏈?zhǔn)讲僮鳎?
我用 . 來(lái)連接jquery 的鏈?zhǔn)讲僮鳌?
可能有的人剛開(kāi)始學(xué)query ，看起來(lái)比較陌生，在后面的瘋狂Jquery 中我會(huì)一一解釋。慢慢的你就會(huì)明白。
<html>
<head>
<title>Jquery 鏈?zhǔn)讲僮?lt;/title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<style type="text/css">
#menu {width:300px}
.has_children {
background:#555;color:#fff;cursor:pointer;
}
.highligt{color:#fff;background:green;}
div{padding:0;margin:0px;}
div a {
background:#888;display:none;float:left;width:300px;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
// alert("給所有目錄添加click 事件");
$(".has_children").click(function(){
$(this).addClass('highligt') //為當(dāng)前元素添加highligt類(lèi)。
.children("a").show().end() //將子節(jié)點(diǎn)的<a>元素顯示出來(lái)。并且重新定位到上次操作的元素
.siblings().removeClass("highligt") //獲取同級(jí)的元素。(或兄弟元素)，并且去掉他們highligt類(lèi)
.children("a").hide(); //將同級(jí)的元素，兄弟元素下的<a> 元素隱藏
});
});
</script>
</head>
<body>
<div id='menu'>
<div class='has_children'>
<span>第一章 認(rèn)識(shí)Jquery</span>
<a>1.1 Javascript 和 Javascript庫(kù)</a>
<a>1.2 加入Jquery</a>
<a>1.3 編寫(xiě)簡(jiǎn)單的Jquery 代碼</a>
<a>1.4 Jquery對(duì)象 和 Dom對(duì)象</a>
<a>1.5 解決Jquery 和其他庫(kù)的沖突</a>
<a>1.6 Jquery 開(kāi)發(fā)工具和插件</a>
<a>1.7 小結(jié)</a>
</div>
<div class='has_children'>
<span>第二章 Jquery選擇器</span>
<a>2.1 Jquery 選擇器是什么？</a>
<a>2.2 Jquery 選擇器的優(yōu)勢(shì)？</a>
<a>2.3 Jquery 選擇器</a>
<a>2.4 應(yīng)用Jquery改寫(xiě)實(shí)例</a>
<a>2.5 選擇器中的一些注意事項(xiàng)</a>
<a>2.6 案例研究————類(lèi)似淘寶品牌列表的效果</a>
<a>2.7 還有其他選擇器嗎？</a>
<a>2.8 小結(jié)</a>
</div>
<div class='has_children'>
<span>第三章 Jquery中的DOM操作</span>
<a>3.1 DOM的操作分類(lèi)</a>
<a>3.2 Jquery 中的DOM操作</a>
<a>3.3 案例研究————某網(wǎng)站的超鏈接和圖片效果</a>
<a>3.4 小結(jié)</a>
</div>
</div>
</body>
</html>
我也是從Hello wrod!開(kāi)始的。關(guān)于jquery 的引用我直接一筆帶過(guò)。如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>jquery 鏈?zhǔn)讲僮?lt;/title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
alert("hello word!");
//靜止右鍵點(diǎn)擊
// $(document).bind("contextmenu",function(e){
// return false;
// });
});
</script>
</head>
<body>
</body>
</html>
接下來(lái)讓我們來(lái)看看一個(gè)復(fù)雜的實(shí)例，這個(gè)實(shí)例讓我們知道什么是：jquery的鏈?zhǔn)讲僮鳎?
我用 . 來(lái)連接jquery 的鏈?zhǔn)讲僮鳌?
可能有的人剛開(kāi)始學(xué)query ，看起來(lái)比較陌生，在后面的瘋狂Jquery 中我會(huì)一一解釋。慢慢的你就會(huì)明白。
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Jquery 鏈?zhǔn)讲僮?lt;/title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<style type="text/css">
#menu {width:300px}
.has_children {
background:#555;color:#fff;cursor:pointer;
}
.highligt{color:#fff;background:green;}
div{padding:0;margin:0px;}
div a {
background:#888;display:none;float:left;width:300px;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
// alert("給所有目錄添加click 事件");
$(".has_children").click(function(){
$(this).addClass('highligt') //為當(dāng)前元素添加highligt類(lèi)。
.children("a").show().end() //將子節(jié)點(diǎn)的<a>元素顯示出來(lái)。并且重新定位到上次操作的元素
.siblings().removeClass("highligt") //獲取同級(jí)的元素。(或兄弟元素)，并且去掉他們highligt類(lèi)
.children("a").hide(); //將同級(jí)的元素，兄弟元素下的<a> 元素隱藏
});
});
</script>
</head>
<body>
<div id='menu'>
<div class='has_children'>
<span>第一章 認(rèn)識(shí)Jquery</span>
<a>1.1 Javascript 和 Javascript庫(kù)</a>
<a>1.2 加入Jquery</a>
<a>1.3 編寫(xiě)簡(jiǎn)單的Jquery 代碼</a>
<a>1.4 Jquery對(duì)象 和 Dom對(duì)象</a>
<a>1.5 解決Jquery 和其他庫(kù)的沖突</a>
<a>1.6 Jquery 開(kāi)發(fā)工具和插件</a>
<a>1.7 小結(jié)</a>
</div>
<div class='has_children'>
<span>第二章 Jquery選擇器</span>
<a>2.1 Jquery 選擇器是什么？</a>
<a>2.2 Jquery 選擇器的優(yōu)勢(shì)？</a>
<a>2.3 Jquery 選擇器</a>
<a>2.4 應(yīng)用Jquery改寫(xiě)實(shí)例</a>
<a>2.5 選擇器中的一些注意事項(xiàng)</a>
<a>2.6 案例研究————類(lèi)似淘寶品牌列表的效果</a>
<a>2.7 還有其他選擇器嗎？</a>
<a>2.8 小結(jié)</a>
</div>
<div class='has_children'>
<span>第三章 Jquery中的DOM操作</span>
<a>3.1 DOM的操作分類(lèi)</a>
<a>3.2 Jquery 中的DOM操作</a>
<a>3.3 案例研究————某網(wǎng)站的超鏈接和圖片效果</a>
<a>3.4 小結(jié)</a>
</div>
</div>
</body>
</html>
相關(guān)文章
jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法(2種方法)
這篇文章主要介紹了jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法,實(shí)例分析了2種實(shí)現(xiàn)判定非空的技巧,涉及jQuery頁(yè)面元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)判斷上傳圖片類(lèi)型和大小的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷上傳圖片類(lèi)型和大小的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)上傳圖片屬性獲取、判定相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery實(shí)現(xiàn)瀑布流布局詳解（PC和移動(dòng)端）
這篇文章非常全面的介紹了在PC和移動(dòng)端上jQuery實(shí)現(xiàn)瀑布流布局的詳細(xì)過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，對(duì)瀑布流布局感興趣的小伙伴們可以參考一下2015-10-10
jquery blockUI 遮罩不能消失與不能提交的解決方法
jquery blockUI 遮罩不能消失與不能提交的解決方法，使用jquery blockUI的朋友可以參考下。2011-09-09
一直以來(lái)都認(rèn)為新版本中 data 是調(diào)用 dataset 實(shí)現(xiàn)的，對(duì)于低版本IE則采用 getAttribute其實(shí)一直是我誤解了，也不知道最初這個(gè)想法是怎么來(lái)的2014-06-06
jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問(wèn)題：一個(gè)頁(yè)面有大量的圖片導(dǎo)致頁(yè)面加載速度緩慢，經(jīng)常會(huì)出現(xiàn)一個(gè)白頁(yè)用戶(hù)體驗(yàn)很不好。那么如何解決這個(gè)問(wèn)題呢？下面我來(lái)介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。2015-04-04
jQuery無(wú)刷新上傳之uploadify3.1簡(jiǎn)單使用
本文主要介紹jQuery插件uploadify3.1的簡(jiǎn)單使用，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06
jQuery實(shí)現(xiàn)驗(yàn)證用戶(hù)登錄
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)驗(yàn)證用戶(hù)登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
jquery的ajax如何使用ajaxSetup做全局請(qǐng)求攔截
在Web開(kāi)發(fā)中,Ajax是一種常用的前后端數(shù)據(jù)交互技術(shù),由于業(yè)務(wù)需求的復(fù)雜性和安全性的考慮,我們可能需要對(duì)Ajax請(qǐng)求進(jìn)行全局?jǐn)r截和處理,以便統(tǒng)一處理一些共性問(wèn)題,如權(quán)限驗(yàn)證、錯(cuò)誤處理等,本項(xiàng)目方案將介紹如何使用jQuery的Ajax實(shí)現(xiàn)全局請(qǐng)求攔截2023-11-11
這篇文章主要介紹了jquery點(diǎn)擊縮略圖切換視頻播放，我們可以點(diǎn)擊縮略圖切換不同的視頻進(jìn)行播放，過(guò)去是實(shí)現(xiàn)圖片切換現(xiàn)在有進(jìn)一步實(shí)現(xiàn)視頻切換，感興趣的小伙伴可以參考下。2015-09-09