一些jquery 常用实例图解
生活随笔
收集整理的這篇文章主要介紹了
一些jquery 常用实例图解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用工具jquery pad；
1 jquery 隱藏
單擊p，p隱藏；
?
2 jquery 滑動
一開始，div中的內(nèi)容是不顯示的，因為display:none；
點擊p之后，面板向下展開，因調(diào)用了slideDown；
?
3 帶參數(shù)隱藏
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
點擊按鈕后，2個段落隱藏；
?
4 獲取文本和html
.text()方法獲取文本；.html()獲取元素的html;
?
5 設(shè)置文本和值
.text()方法設(shè)置文本；.val()方法設(shè)置值；
設(shè)置id為test1的元素的文本為"AAAA BBBB!"；
設(shè)置id為test2的元素的html為"<b>CCCC DDDD!</b>"；然后字體變?yōu)榇煮w；
設(shè)置輸入框的值為"Mao Zhuxi Wansui!!!"；
?
6 獲取元素的父
parents()方法獲取元素的全部父；
先看沒有js代碼，光有html的情形；
獲取span元素的父；li 是它的直接父，ul是它的祖父，div 是它的曾祖父，body是它的增曾祖父；
獲取之后設(shè)置它的父的字體顏色為藍色，父的邊框為綠色2個像素寬；
?
7 遍歷
遍歷每一個li；彈出其文本；
?
8?css() 方法
css() 方法設(shè)置或返回被選元素的一個或多個樣式屬性。
獲取p元素的背景色，然后彈出；
?
9 代碼
1 <body> <p>click me, will disappear.</p> </body>$(document).ready(function(){$("p").click(function(){$(this).hide();}); });2 <style type="text/css"> div.panel { height:120px; border:solid 1px #c3c3c3; display:none; } </style><div class="panel"> <p>AAAAAAAAAAAAA</p> <p>CCCCCCCCCCCCCCCCCCCCCCCCCCC</p> </div><p class="flip">點擊</p>$(document).ready(function(){$(".flip").click(function(){$(".panel").slideDown("slow");}); });3 <body> <button type="button">隱藏</button> <p>這是一個段落。</p> <p>這是另一個段落。</p> </body>$(document).ready(function(){$("button").click(function(){$("p").hide(1000);}); });4 <body> <p id="test">AAAAAAA BBBBBBB CCCCCCCCC</p> <button id="btn1">顯示文本</button> <button id="btn2">顯示 HTML</button> </body>$(document).ready(function(){$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());}); });5 <body> <p id="test1">段落。</p> <p id="test2">另一個段落。</p> <p>Input field: <input type="text" id="test3" value="ABCD"></p> <button id="btn1">設(shè)置文本</button> <button id="btn2">設(shè)置 HTML</button> <button id="btn3">設(shè)置值</button> </body>$(document).ready(function(){$("#btn1").click(function(){$("#test1").text("AAAA BBBB!");});$("#btn2").click(function(){$("#test2").html("<b>CCCC DDDD!</b>");});$("#btn3").click(function(){$("#test3").val("Mao Zhuxi Wansui!!!");}); });6 <body class="ancestors">body (曾曾祖父)<div style="width:500px;">div (曾祖父)<ul>ul (祖父) ?<li>li (直接父)<span>span AAAA</span></li></ul> ??</div> </body>$(document).ready(function(){$("span").parents().css({"color":"Blue","border":"2px solid Green"}); });7 <body> <button>輸出每個列表項的值</button> <ul> <li>兔子</li> <li>貓咪</li> <li>奶狗</li> </ul> </body>$(document).ready(function(){$("button").click(function(){$("li").each(function(){alert($(this).text())});}); });8 <body> <h2>標(biāo)題</h2> <p style="background-color:#ff0000">一個段落。</p> <p style="background-color:#00ff00">一個段落。</p> <button>返回 p 元素的背景色</button> </body>$(document).ready(function(){$("button").click(function(){alert("Background color = " + $("p").css("background-color"));}); });?
總結(jié)
以上是生活随笔為你收集整理的一些jquery 常用实例图解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超图 for javascript 版本
- 下一篇： 图解Win32汇编字符串和Debug输出