跳到主要內容

[JQuery] 常用函式解釋與教學範例 - Part 1

在這裡要對JQuery常用的一些元素做介紹(最近我有用到的),如果還有會再陸續推出~

網頁搭配著用可以達到很多很美觀的效果喔~

內容物:Selector、Function



Selector
選擇器,可選擇所需要的DOM物件。

<input id="my_test" class="input_style" name="text_input" />

1. By ID:
    $("#my_test")
2. By Class:
    $(".my_test")
3. By Name
    $("input[name=text_input]")

同時這些Selector可以以階層去做選擇。

<div id="my_div" class="div_style">
    <input id="my_test" class="input_style" name="text_input" />
    <input id="my_test2" class="input_style" name="text_input2" />
</div>

要選擇第一個input的幾個寫法:
1.  $("#my_test")
2.  $("#my_div input[name=text_input]")
3.  $(".input_style input[name=text_input]")

互相搭配可以藉由階層去選取想要選的DOM物件,蠻方便的。

Function
函式介紹,可以對選擇好的物件做事情。


<div id="my_div" class="div_style">
    <input id="my_test" class="input_style" name="text_input" value="orz|||" />
    <input id="my_test2" class="input_style" name="text_input2" value="test!!!" />
</div>


1. .html() : 將選擇的物件裡的東西取出

$("#my_div").html() 選到的是.......

    <input id="my_test" class="input_style" name="text_input" />
    <input id="my_test2" class="input_style" name="text_input2" />


2. .val() : 將選擇物件的值取出

$("#my_test").val() 取出的是......"orz|||"

3. .attr(attributeName, value) : 將選擇物件的某些參數做修改

$("#my_test").attr("value", "lol") 改變為........
    <input id="my_test" class="input_style" name="text_input" value="lol" />

※特別注意的是,如果不加value會變成取得該屬性值!!



$("#my_test").attr("class") 會取到......input_style



4. .append() : 在某物件裡"所有物件後"加入字串,常用在加入元素

$("#my_div").append("<input id='my_test3' value='testing!!' />") 會得到........


<div id="my_div" class="div_style">
    <input id="my_test" class="input_style" name="text_input" value="orz|||" />
    <input id="my_test2" class="input_style" name="text_input2" value="test!!!" />
    <input id='my_test3' value='testing!!' />
</div>

5. .prepend() : 在某物件裡"所有物件前"加入字串,常用在加入元素


$("#my_div").prepend("<input id='my_test3' value='testing!!' />") 會得到........


<div id="my_div" class="div_style">
    <input id='my_test3' value='testing!!' />
    <input id="my_test" class="input_style" name="text_input" value="orz|||" />
    <input id="my_test2" class="input_style" name="text_input2" value="test!!!" />
</div>



5. .remove() : 移除某物件,常用在移除元素。


$("#my_test").remove() 會得到........


<div id="my_div" class="div_style">
                                                                                
    <input id="my_test2" class="input_style" name="text_input2" value="test!!!" />
</div>

※所以如果我們想要將所有div下的my_test, my_test2刪掉但想保留剛剛加的my_test3可以參考:

$(".input_style").remove();  //把有該class的標籤都移除



6. .empty() : 清除該物件的內容。

$("#my_test").empty() 會得到........


<div id="my_div" class="div_style">
                                                                                
</div>


CSS
JQuery也可以控制改變CSS的內容喔!!

<div id="my_div" class="div_style" style="width: 300px;"></div>

1. .css(propertyName, value) : 取出該css參數或進行設定

$("#my_div").css("width","150px") 可以改變原來的div Style屬性為.......

<div id="my_div" class="div_style" style="width: 150px;"></div>

$("#my_div").css("width") 會回傳......."300px"

2. .removeClass(className), .addClass(className) : 將該屬性的class移除與增加

$("#my_div").removeClass("div_style"); 
$("#my_div").addClass("div_new_style"); 
會得到...
<div id="my_div" class="div_new_style" style="width: 150px;"></div>


Event
對物件加上事件,例如點到按鈕=>執行某些javascript函式。

<input id="my_test" type="button" class="input_style" value="Click Me!!" />

1. .click() : 點擊事件

$("#my_test").click(function(){
        dosomething();
});

點範例按鈕就會跑  dosomething() 函式。


JQuery就某方面來說真的很彈性喔!!!

這些是最近我較常使用的參數,如果還有其他的會再陸續筆記進來喔!! >w<

....更多詳細資訊可參考JQuery API Documentation 

留言

這個網誌中的熱門文章

[新竹] 系統傢俱各家比較與心得(三商美福、安德康、木可、歐德、綠的)

最近花蠻多時間在比較系統傢俱,與趕著預售屋客變有關,不過也因此了解不少。以往都覺得系統傢俱較死板、無造型、設計。但這次的經驗,讓我對系統傢俱有較不一樣的感覺。 其實,系統傢俱是個蠻能「客製化」的設計,只要自己有做足功課,我認為每家系統傢俱都可以達到客戶喜好的風格、效果,而它們相較於木工親民的價格真的會讓人感動落淚。 我自己的感覺是,大家(如:綠的、三商美福)的系統傢俱在聘請設計師上,較有經驗也較有獨特見解,而且空間規劃較熟練,比較抓得到客戶的喜好與需求,當然價格較高。 小家(如:木可、安德康等)的系統傢俱最大好處在於價格親民,但設計師如果也願意用心,做出來的作品一定不輸大的。前提是,客戶自己必須明白自己要的是甚麼?喜好?需求?風格.......等。

[生活] 幸福新居落成

這次預售屋拖了很久,所以我們匆匆安排裝修,同時也還有一些地方需要修繕,整個忙翻天了!但仍然很滿意這個新家,不管是格局還是大小,打算至少再住個十年! 時程上原先預定於 102年12月可以交屋,拖到103年3月底才勉強交到一個差強人意仍須修繕的屋。匆匆簽了切結,就安排木工入場。木工張先生也是很配合,4月11日就幫我們正式入場,該保護的都做好保護就開始施工。

[生活] 新居落成之三房兩廳極簡無印風裝潢~安德康系統櫃 vs B&Q特力屋輕裝潢

偶然下,又有裝潢新居的機會,這次希望節省預算,含冷氣、基本生活電器、希望節省在50萬內,又不想失去新居裝潢的品味,再次要自己來擔任統包跟設計師的苦命監工。 如果有人有興趣看五年前的分享文,任意門如下: 👇 [生活] 幸福新居落成 [新竹] 系統傢俱各家比較與心得(三商美福、安德康、木可、歐德、綠的) 新居位於高樓,景觀採光還真不錯,搭配無印風應該也會美美的,加上之前有於IKEA購置的傢俱(衣櫃、電視櫃、書桌、餐桌、小孩翻轉床、16格櫃),傢俱都偏向淺木色。 系統櫃還是找 竹北安德康 這次製作的項目有,玄關櫃、鞋櫃、電視櫃與清水模電視牆、餐桌旁電器櫃,價格約13萬8000元。設計師是江樂軒小姐,哈哈哈~但人很親切好溝通,可以給一個具體的想法請他設計,但是要記得提醒他隔天有約,很忙容易忘記?!XD B&Q的施工項目有,冷氣水排遷移後修補、天花燈具安裝(不含燈具、LED燈是在PCHOME買的)、弱電箱包覆牆改刷黑板漆、走廊天花裝飾、客廳單邊間接照明、三房一廳冷氣盒、客廳窗簾盒。本建案建商有附天花平釘,所以就省錢沒重新做,不過有些地方做的是有些粗糙...總共93000元。 字好多,先來看看施工過程~ 會找B&Q做木工的契機是,在B&Q的活動購買了四台冷暖氣,一共11萬7000元,送的折價券多花4000元就可以買一台林內的熱水器,蠻划算。後來冷氣因為要改水排位置,加上最後冷氣管線包覆額外多出了33000元工錢,這邊就不確定到底整體下來是不是有比電器行便宜?! B&Q師傅基本地板保護後,便開始拉冷氣管 冷氣管線最早拉,後來才開始改水排。 主臥水牌加冷氣盒 客廳間接照明、水排位移、走廊裝飾柱 客廳窗簾盒 因為想說讓同家廠商完成,配合度應該相對比較高? 加上木工報價全室做起來含水排修復、建照等油漆93000元,覺得還算經濟實惠。 弱電箱包覆,裡面就是弱電鐵門不好看,做了一個十公分厚的包覆,表層設計成黑板 完成冷氣安裝與油漆,淺間照效果也還是不錯的 B&Q特力屋整個工程的時程大約才10天左右,算是蠻有效率。 師傅上,我覺得品質不差,不過監工可能要勤快一點,免得與預期有落差,油漆品質倒是稍嫌隨性,黑板漆漆的不是很均勻。 系統櫃裸裝