# 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](/brian/qian-duan/qian-duan/jquery.md)"; 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://brianwu.gitbook.io/brian/qian-duan/qian-duan/jquery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.