Privacy Terms

Who We Are At Walk In The Cloud, we are committed to maintaining the trust and confidence of all visitors to our web site. In particular, we want you to know that Walk In The Cloud is not in the business of selling, renting or trading email lists with other companies and businesses for marketing purposes.  In this Privacy Policy, we’ve provided detailed information on when and why we collect personal information, how we use it, the limited conditions under which we may disclose it to others, and how we keep it secure.  We take your privacy seriously and take measures to provide all visitors and users of Walk In The Cloud with a safe and secure environment. Cookies  Walk In The Cloud may set and access Walk In The Cloud cookies on your computer.  Cookies are used to provide our system with the basic information to provide the services you are requesting.  Cookies can be cleared at any time from your internet browser settings.  Google Analytics When someone visits Walk In The Cloud we us

[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 

留言