您好,登錄后才能下訂單哦!
首先我們先來做一個(gè)簡(jiǎn)單的jQuery的效果圖,具體內(nèi)容如下
css代碼 如下:
<style type="text/css" media="screen"> *{margin: 0;padding: 0;} ul,li{list-style:none} ul { width: 300px; background: yellow; margin: 50px auto; } ul>li{ line-height: 50px; text-align: center; border-bottom: 1px solid #ccc; } ul>li>ol{ background: blue; display: none; } ul>li>ol>li{ line-height: 50px; } </style>
HTML代碼 如下:
<ul id="ul"> <li> <p>jquery的核心函數(shù)</p> <ol> <li>jQuery([selector,[context]])</li> <li>jQuery(html,[ownerDoc])1.8</li> <li>jQuery(callback) </li> <li>jQuery.holdReady(hold)1.6+</li> </ol> </li> <li> <p>jQuery的效果</p> <ol> <li>hide 顯示和隱藏</li> <li>slideDown 只對(duì)高度有效</li> <li>fadeIn 淡入效果</li> <li>slideToggle 淡入和淡出效果</li> </ol> </li> <li> <p>jQuery的屬性</p> <ol> <li>attr 設(shè)置或返回的元素</li> <li>removeAttr 從每個(gè)元素中刪除一個(gè)元素</li> <li>prop 獲取第一個(gè)元素的屬性</li> <li>removeProp prop()方法設(shè)置屬性集</li> </ol> </li> <li> <p>jQuery的事件</p> <ol> <li>off 在元素上移除多個(gè)事件的處理函數(shù)</li> <li>bind 為每個(gè)元素綁定事件處理函數(shù)</li> <li>one 為每個(gè)匹配元素綁定一次性處理函數(shù)</li> <li>trigger 在每個(gè)匹配的元素上觸發(fā)某類事件</li> </ol> </li> </ul>
jQuery代碼 如下:
<script src="jquery.min.js" type="text/javascript"charset="utf-8"></script> <script type="text/javascript"> $("#ul>li>p").click(function(){ $(this).nextAll().slideDown() .end().parent().siblings() .children("ol").hide(); }); </script>
效果圖如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。