JQuery筆記
===
###### tags: `web` `frontend`
## 引入
網址: http://jquery.com/
```html
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
```
## 選擇器 Selector
```javascript=
$("#id")
$(".class")
$("tagName")
/* 取得其 name 屬性值為 email 的 input 元素 */
$('input[name="email"]');
var data = "te";
$("#"+data+"st");
/* 可以選擇多個元素 */
$("#id, li, p")
```
> input需注意``''``，不要和email的``""``衝突
EX:
```javascript=
$("#id").click(function(){
alert("Hello World");
});
$("div").click(function(){
alert("Hello World Again");
});
```
this
```javascript=
$("div").click(function(){
$(this).css("color","blue");
});
```
## HMTL
取得元素內容
```javascript=
alert($("#id").html());
```
改變元素內容
```javascript=
$("#id").click(function(){
$(".test").html("The text was changed!");
});
```
## CSS
取得屬性值
```javascript=
alert($("#demo").css("color"));
```
第二個參數可放要取代的內容
```javascript=
$("#demo").css("color","pink");
```
同時修改多個屬性
```javascript=
$('#demo').css({
color: 'red',
'background-color': 'blue'
});
/* 上面等同下面 */
$("#demo").css("color","red").css("background-color","blue");
```
> 若屬性中包含 -，記得加上引號，沒有的話則可有可無。
## Events
### hover
```javascript=
$("#id").hover(function(){
$(".test").html("The text was changed!");
});
```
### submit
form表單的提交
```javascript=
$("#testForm").submit(function(event){
...
})
```
### preventDefault
阻止當前動作繼續進行
```javascript=
$("#testForm").submit(function(event){
event.preventDefault();
})
```
## attribute
取得屬性值
```javascript=
alert($("iframe").attr("src"));
```
第二個參數可放要取代的內容
```javascript=
$("#demo").attr("class","changed");
```
移除屬性值
```javascript=
$('#demo').removeAttr('title');
/* 上面同等於這樣做 */
$('#demo').attr('title', null);
```
## Class
### addClass
增加 class
```javascript=
$("#demo").addClass("className");
```
增加多個 class
```javascript=
$("#demo").addClass("className1 className2");
```
> 用空白隔開多個 class
### removeClass
移除 class
```javascript=
$('#demo').removeClass("className1");
/* 沒寫則是移除所有className */
$('#demo').removeClass();
```
## toggle
### toggleClass
不同於``addClass``、``removeClass``，它會執行當前的相反狀態。
有指定之className時，觸發``toggleClass``會把此className移除；反之沒有此className時，會加入此className。
```javascript=
$("#demo").toggleClass("className");
$("#demo").toggleClass("className1 className2");
```
### toggle
``toggle()``可以把指定元素隱藏/顯示
```javascript=
/* demo元素隱藏或再次顯示 */
$("#demo").toggle();
```
## 隱藏
```javascript=
$("#demo").click(function(){
$(this).css("display","none");
});
/*上面等同這樣做*/
$("#demo").click(function(){
$(this).hide();
});
```
### fadeOut 慢慢消失
```javascript=
$("#demo").click(function(){
$(this).fadeOut();
});
/* 也可加上自訂秒數或是fast、slow */
$(this).fadeOut(5000);
$(this).fadeOut("fast");
$(this).fadeOut("slow");
```
### fadeIn 慢慢出現
```javascript=
$("#demo").click(function(){
$(this).fadeIn();
});
```
## 簡易動畫 animate
```
.animate({css屬性值},秒數);
```
```javascript=
$("div").click(function(){
$(this).animate({
width: "200px",
height: "200px",
marginLeft: "100px",
marginTop: "100px"},1500);
});
```
> 若屬性中包含 -，需去掉後把首字大寫
## 正則表達式 Regular Expression
```javascript=
var res = /great/ig;
/*i:查找時忽略大小寫
* g:查找全域(global)
*/
var string ="Regular Expression is Great";
var result = string.match(res);
alert(result);
```
檢查Email格式是否正確
```javascript=
function isValidEmailAddress(emailAddress){
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(emailAddress);
};
/*調用它來檢查是否符合*/
if( !isValidEmailAddress( emailaddress ) ){
alert("It not a valid Email!");
}
```
檢查傳入值是否是數字
```javascript=
var a = -10;
$.isNumeric(a); //ture
```
## Ajax
>AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。 來源:維基百科
```javascript=
$.ajax({
url: "test.html"
}).done(function(data){
alert(data);
});
```
```javascript=
$.ajax({
url: 'http://test/hotel',
type: 'get',
dataType: 'json',
success: function(data){
// console.log(data);
for(let hotel of data){
// console.log(hotel.Name);
var name = hotel.Name;
var city = hotel.City;
$('#hotelTable tbody').append(`<tr><td>${city}</td><td>${name}</td></tr>`);
}
},
error: function(jqXHR){
console.log(jqXHR);
}
});
```
## height
```javascript=
var contentHeight = 200;
$("#myContent").height(contentHeight+"px");
$("#myContent").height("100px");
```
取得瀏覽器高度
```javascript=
var windowHeight = $(window).height();
```
## .length
可以用.length
1. 取得字串長度
```javascript=
var str = "Hello World!";
alert(str.length);
```
2. 取得元素數目
```htmlmixed=
<body>
<select id="favAnimal">
<option>dog</option>
<option>cat</option>
<option>rabit</option>
</select>
</body>
```
```javascript=
/* 3 */
alert($("#favAnimal option").length);
```
## has
``has``可以選擇含有指定元素之元素。
查找的條件判斷在子元素上，意即``has``返回的是子元素滿足 class=topLine 的自身 li 對象
```javascript=
$("li").has(".topLine");
```
```javascript=
/* 選擇包含span元素之p元素 */
$("p:has(span)").css("color","red");
$("p:has(#id)").length;
```
> :has中不用把要查找的元素用``"`` ``"``包住
另外寫法
```javascript=
$("#myContent").has("span").css("color","red");
```
### hasClass
也可以用來確認元素是否含有指定之className
```javascript=
/* return true or false */
alert($(#myContent).hasClass("hello"));
```
> 加在結尾``.has``、``.hasClass``需要用``"`` ``"``包住查找之目標
## filter
查找的條件判斷在自己上，意即``filter``返回的是自身 li 其 class=topLine 的元素
```javascript=
$("li").filter(".topLine");
```
### className
``filter``方法會過濾出每個指定className之元素
```htmlmixed=
<body>
<div class="myList done">1 (index 0)</div>
<div class="myList">2 (index 1)</div>
<div class="myList done">3 (index 2)</div>
<div class="myList">4 (index 3)</div>
<div class="myList">5 (index 4)</div>
</body>
```
```javascript=
/* 把清單中完成的項目，其字體顏色改為紅色 */
$(".myList").filter(".done").css("color","red");
```
### odd、even
也可以指定奇/偶數，要注意是看index來判斷奇偶數
```javascript=
/* 2、4變紅色，注意是看index來判斷奇偶數 */
$(".myList").filter(":odd").css("color","red");
```
### function
除了指定className查找，也可以執行function
```javascript=
$(".myList").filter(function(){
/* 列出每個清單的內容 */
alert($(this).html());
});
```
### 結合length用法
```javascript=
var doneNum = $(".myList").filter(function(){
var tmp = $(this).hasClass("done");
return tmp;
}).length;
alert(doneNum+" things were done");
```
## find
``find``判斷條件作用在子元素上，但是不同於``has``、``filter``；``find``回傳的不是自身，而是查找到的子元素。
意即在 li 的子元素中查找是否有 class=a 的元素，並回傳所有滿足 class=a 的元素集合。
```javascript=
$("li").find(".a");
```
<style>
.ui-infobar { display: none; }
</style>
Sign in with Wallet
Connect another wallet