今天學習jQuery的核心函數.
jQuery(expression,[context])
這個函數接收一個包含CSS 選擇器的字串,然後用這個字串去匹配一組元素。
jQuery 的核心功能都是透過這個函數來實現的。 jQuery中的一切都基於這個函數,或者說都是以某種方式使用這個函數。這個函數最基本的用法就是向它傳遞一個表達式(通常由CSS 選擇器組成),然後根據這個表達式來找出所有符合的元素。
預設情況下, 如果沒有指定context參數,$()將在當前的HTML 文檔中查找DOM 元素;如果指定了context 參數,如一個DOM 元素集或jQuery 對象,那就會在這個context 中查找。 (摘自jQuery API)
費話不多說直接看例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><title>Hello World jQuery</title><style>.showtext{ background:#999999; color:#990000; font-weight:800; width :auto; height:40px;}.showtext3{ background:#666; color:#0000FF; font-weight:600; width:auto; height:30px;}</style><script type="text/javascript" src ="jquery-1.3.2-vsdoc2.js"></script></head><body><div id="divMsg" style="color:#FF0000; font-size:18px; font-family:'新宋體'">無心測試JQuery!</div><input id="btnShow" type="button" value="顯示" /> <input id="btnHide" type="button" value="隱藏" / ><br /> <input id="btnChange" type="button" value="修改內容為Hello World jQuery!" /> <input id="btnChange2" type="button" value="修改內容為無心測試JQuery!!" /> <script type="text/javascript">$("#btnShow").bind("click",function(event){$("#divMsg").show("fast")} ); $("#btnHide").bind("click",function(event){$("#divMsg").hide("slow")}); $("#btnChange").bind("click ", function(event) { $("#divMsg").html("Hello World jQuery!"); }); $("#btnChange2").bind("click",function(event){$(" #divMsg").html("無心測試JQuery!!");});</script> <h4>順便介紹下本人QQ高級群67221760(炒股群) ! </h4> <div><p>今天上班遲到啦! </p></div><div></div><div><p>不過也要按時寫部落格</p></div><div><p>扣工資也無所謂啦</p> </div><span>9999999999999999999</span><span class="showtext2">33333333333333333333</span><script language="javascript">$( function() { //匹配所有的span元素,<script language="javascript">$( function() { //匹配所有的span元素,<script $("span"); //對所有span元素加入class屬性showText.addClass("showtext"); //匹配所有div中含有p的元素var selectDiv=$("div p"); //showtext的內容賦值showText.text("93路公車不來我有啥辦法呢"); //對selectdiv元素加入class屬性selectDiv.addClass("showtext3"); //透過CSS類別名稱選擇元素var selectByClass=$ (".showtext2"); selectByClass.text("我先宣告我起床很早的。"); })</script></body></html>