锋利Jquery 第一天
之前一直學習，現在終于有時間來整理一下文檔了。
以下文章都是自己學習Jquery 的筆記，
希望能留下痕跡，也希望能幫助到您。
好了開始我的Jquery第一天。
我也是從Hello? wrod!開始的。關于jquery 的引用我直接一筆帶過。如下：
<html> <head> <title>jquery 鏈式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type='text/javascript'> ?$(document).ready(function(){ ???? alert("hello word!"); ?????? //靜止右鍵點擊 ?????? // $(document).bind("contextmenu",function(e){ ?? ? ? //????? return false; ????? ?// }); ?}); </script> </head>
<body> ? </body> </html>
?
?接下來讓我們來看看一個復雜的實例，這個實例讓我們知道什么是：jquery的鏈式操作，
我用? .? 來連接jquery 的鏈式操作。
可能有的人剛開始學query ，看起來比較陌生，在后面的瘋狂Jquery 中我會一一解釋。慢慢的你就會明白。
<html> <head> <title>Jquery 鏈式操作</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')? //為當前元素添加highligt類。 ??? .children("a").show().end()?? //將子節點的<a>元素顯示出來。并且重新定位到上次操作的元素 ??? .siblings().removeClass("highligt") //獲取同級的元素。(或兄弟元素)，并且去掉他們highligt類 ??? .children("a").hide();????????????? //將同級的元素，兄弟元素下的<a> 元素隱藏 ??}); ?}); </script> </head>
<body> <div id='menu'> ? <div class='has_children'> ?????? <span>第一章 認識Jquery</span> ??? <a>1.1 Javascript 和 Javascript庫</a> ??? <a>1.2 加入Jquery</a> ??? <a>1.3 編寫簡單的Jquery 代碼</a> ??? <a>1.4 Jquery對象 和 Dom對象</a> ??? <a>1.5 解決Jquery 和其他庫的沖突</a> ??? <a>1.6 Jquery 開發工具和插件</a> ??? <a>1.7 小結</a> ? </div> ? <div class='has_children'> ?????? <span>第二章 Jquery選擇器</span> ??? <a>2.1 Jquery 選擇器是什么？</a> ??? <a>2.2 Jquery 選擇器的優勢？</a> ??? <a>2.3 Jquery 選擇器</a> ??? <a>2.4 應用Jquery改寫實例</a> ??? <a>2.5 選擇器中的一些注意事項</a> ??? <a>2.6 案例研究————類似淘寶品牌列表的效果</a> ??? <a>2.7 還有其他選擇器嗎？</a> ??? <a>2.8 小結</a> ? </div> ? <div class='has_children'> ????? <span>第三章 Jquery中的DOM操作</span> ?? <a>3.1 DOM的操作分類</a> ?? <a>3.2 Jquery 中的DOM操作</a> ?? <a>3.3 案例研究————某網站的超鏈接和圖片效果</a> ?? <a>3.4 小結</a> ? </div> ?</div> </body> </html>
轉載于:https://www.cnblogs.com/htwdz-qhm/p/3719269.html
總結
以上是生活随笔為你收集整理的锋利Jquery 第一天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cmd 找到8080对应进程_多进程概括
- 下一篇： ride上点击用例不能显示edit信息_