# 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](https://brianwu.gitbook.io/brian/qian-duan/qian-duan/jquery)"; 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