jQuery

jQuery

參考資料:(http://api.jquery.com/) 參考資料:(https://www.w3schools.com/js/)

有三種搜尋方式

$("ul li")
$("#ElementID")
$(".ElementClass")

直接打 =>TAG 前面加 "#" 搜尋ID 前面加 "." 搜尋Class

已經搜尋到某個節點，例如: $("#ElementID") 已經搜尋到某個<div>，裡面還有一串

<ul>
<li class="Data">...</li>
<li class="Data">...</li>
<li class="Data">...</li>
</ul>

這時候想要搜尋 <li> 的Element，則可以利用下面兩種方法

$("#ElementID li.Data"); //第一種
$("#ElementID").find("li.Data"); //第二種

他們會搜尋出一樣的結果。 我個人的想法，第一種就是直接找到，上面的三種類型一次用到。 第二種是，如果你的 $("#ElementID") 會重複用到，那就是先宣告一次，後面就直接把結果拿來用，就不用重複搜尋整個頁面。

arr.slice(int start, int end)

將某個arr限縮，從start的index，開始留著，以前的去掉。end以後的index(包含)，也都去掉。

end 可以不加。這樣就會變成，start之後的都留。

.empty

清空

.append(string str)

增加str 到 selector 的範圍內。 參考資料:(https://www.w3schools.com/jquery/html_append.asp)

.removeClass(string str)

str 為 要移除的 Class 名稱。

.addClass(string str)

str 為 要增加的 Class 名稱。

.change()

當輸入框發生變化時，觸發事件。

參考資料:(https://www.w3schools.com/jsref/event_onchange.asp)

$("input").change(()=>{
    $(this).css("background-color","#FFFFCC");
});

.proxy()

??????? 參考資料:(https://api.jquery.com/jQuery.proxy/) 參考資料:(https://read01.com/nmnoGM.html#.Wuu_EIiFMdU)

.filter()

參考資料:(http://www.w3school.com.cn/jquery/traversing_filter.asp) 參考資料:(http://api.jquery.com/filter/)

.children()

<div class="class1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

$('.class1').children('div');

可以取得1~4的集合，可以利用first()、last()或是其他條件，去取得想要的物件。

.each(function(index, element){})

參考資料:(http://www.w3school.com.cn/jquery/traversing_each.asp)

.map .grep 的介紹

參考資料:介紹jQuery map()與grep()(http://blog.darkthread.net/post-2015-06-22-jquery-map-and-grep.aspx)

字串轉物件

var str = "test"; console.log($(str).attr('title')); //123

.mouseover()

.mouseover(function(){
    ///
})

.attr() & .prop() 的比較

參考資料:(https://cythilya.github.io/2017/09/10/jquery-attr-vs-prop/)

attr('abc') //取 abc 這個屬性的值

attr('abc','123') //設 abc 這個屬性的值為 123

.css

要注意有些屬性是CSS的樣式獨有的，這時候就是用 .css() 去添加

EX:

.css("display","none")

$.ajax

參考資料:(http://www.runoob.com/jquery/ajax-ajax.html)

$.ajax({name:value,name:value, ...});

ajax 方法用於執行異步HTTP請求

$.ajax({url:'', success:function(result){

}});

data 要送過去的數據 success 成功時調用 error 失敗時調用 type GET or POST url 網址

username 帳戶 password 密碼

async 默認 true cache 默認 true complete 完成之後執行，也就是success 和 error 結束後都會執行 contentType 默認 "application/x-www-form-urlencoded" timeout millsec