[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