事件處理(event)：
Mouse event(滑鼠事件)
click()-點擊
dblclick()-連點
//快速點擊兩次，實際上會觸發兩次 click以及一次 dblclick
$('.btn').click(function () {
console.log('click');
//單純的執行命令，沒辦法再呼叫一次
//如果想重複執行，麻煩包在一個function裡面
})
$('.btn').dblclick(function () {
console.log('dblclick1 ');
})
contentmenu()-右鍵
mousedown()-滑鼠按下左鍵
mouseup()-滑鼠放開左鍵
mouseenter()-滑鼠移進選擇器
mouseleave()-滑鼠離開
$('.btn').mousedown(function () {
console.log('mousedown');
})
$('.btn').mouseup(function () {
console.log('mouseup');
})
$('.btn').mouseenter(function () {
console.log('mousenter');
})
hover()-移進與離開
只有hover的話滑進滑出都會回傳事件，要分開的話可以用這個方式寫：
.hover(function(){
//偵測滑入
}, function(){
//偵測滑出
})
$('.btn').hover(function () {
console.log('hover in');
//只要觸發一個都會執行這個function
}
, function () {
console.log('hover leave')
}
)
.index()-取得目前符合條件的選擇器是第幾個
表單事件(Form Event)
submit()-點了可以送出表單
focus()-偵測某個input變成輸入狀態
blur()-偵測離開某個input輸入狀態
change()-偵測input 或select變化
Q：ES5、ES6的差別
//最大的差別在於 hoist 提升 因為順序很重要 所以ES6特別強調
//必須先宣告，才能開始使用這個變數
console.log(x);
//知道這個變數 但不知道你是誰
coonsole.log(a);
//ES5 變數宣告是用var 來宣告
var x = 50;
var y = 30;
//ES6 變數宣告從Var分解成兩個 ：1. let 2.const
let a = 10;
const b = 20;
//let(可重新賦值) VS coset(不可重新賦值 constant var)
a = 11;
//javascript是一個弱型態語言
//簡單資料型態有三種 1.字串 2.數字 3.布林值(true/false)
//寫程式的時候，害怕型態被改變造成bug，這個情況下我們會使用const
//除非這個變數會一直改變，需要重新賦值，那只好用let宣告
function
//函數的名字 abc
function abc() {
console.log('abc');
}
abc();
//匿名函式
//通常用在只執行一次，而且會立即執行，後面帶小括號。
(function () {
console.log('no name');
})();
//ES6 宣告函式的方式改變，用const去宣告一個匿名函式。
const def = function () {
console.log('def');
}
//function後面的小括號，到底要幹嘛
//為了裡面可以用來傳遞參數使用，不傳值進去就留空
//例如這邊寫一個加法的function，傳進來的值會自己相加得到結果
function add(a, b) {
console.log(a);
console.log(b);
console.log(a + b);
}
add(123, 456);
function del(a, b) {
console.log(a);
console.log(b);
console.log(a - b);
}
del(555, 333);
Document/Window Event
scroll()-偵測滑鼠滾動
resize()-偵測瀏覽器大小變化
scrollTop()、scrollLeft()-1.偵測捲軸位置或指定捲軸位置
2.()內無值為偵測位置，有值則為指定位置
width()、height()-1.偵測selector長寬或是指定selector長寬
2.()內無值為偵測長寬，有值則為指定長寬
Window Event
.scroll()- 偵測滑鼠滾動
.resize()- 偵測瀏覽器大小變化
偵測滾動百分比UI
// console.log('body 全長：', $('body').height());
$('.box').css('width', (50 + '%'));
console.log('分子/分母:', $(window).scrollTop() / $('body').height());
console.log('乘以100:', ($(window).scrollTop() / $('body').height()) * 100);
console.log('去掉後面小數點:', Math.floor(($(window).scrollTop() / $('body').height()) * 100));
console.log('後面加一個%的符號:', Math.floor(($(window).scrollTop() / $('body').height()) * 100) + '%');
$('.box').css('width', Math.floor(($(window).scrollTop() / $('body').height()) * 100) + '%');
//box的寬設定為CSS(寬=整數(math.floor($(滑桿的高)/body的高)*100%))
$(window).scroll(function () {
//1vh= 1/100 * window height
const bodyMinusWindowHeight = $('body').height() - $(window).height();
// body最小的高 =body的高-滑桿的高
const percentage = Math.floor($(window).scrollTop() / bodyMinusWindowHeight * 100);
//%為整數的滑桿的高/body最小的高
console.log('percentage', percentage + '%');
$('.box').css('width', percentage + '%')
//在事件裡面，加入條件判斷式
if ($(window).scrollTop() > 500) {
$('body').css('background', 'orange')
$('.img-wrap').css('transform', 'translateY(0)').css('opacity', '1')
}
else {
$('body').css('background', white)
$('.img-wrap').css('transform', 'translateY(100)').css('opacity', '0')
}
})
//眼睛可視範圍=瀏覽器的高度
//body height-window height
.On()
場合：1.DOM事後產生的時候綁定事件可以使用(selector是動態產生時綁定事件)
因為 jQuery 會在 HTML 畫完後根據既有的結構將事件綁到 HTML 上，若是靠程 式事後產生的話，原本寫的就無法綁到HTML 上。
$(選擇器(原本就存在HTML上之元素)).on( 觸發方式(原本的”click”,”mouseenter” …等) [, 程式動態產生的元素 ] , 事件處理(function(){}))
#html
<div class="container">
<div class="row">
<button class="btn btn-primary" id="clickme">Click me</button>
</div>
<ul>
<li>item1</li>
<li>item2</li>
<!-- append -->
</ul>
</div>
#jq
// $('#clickme').click(function () {
// console.log('hi');
// })
let itemIndex = 3;
$('#clickme').on('click', function () {
// console.log('hi on click');
$('ul').append(`<li> item ${itemIndex} </li>`)
itemIndex++;
})
// 之前學的綁定方法，無法綁定動態產生的動作
// $('li').click(function () {
// console.log('li checked');
// })
//在直系長輩找一個已存在的節點，往下find 'li'動態綁定click事件
$('ul').on('click', 'li', function () {
console.log('li checked') })
2.一個selector需要綁定多個事件時可以使用
#html
<div class="container">
<div class="row">
<button class="btn btn-primary">btn</button>
</div>
</div>
#jq
//這裡是用JS的Object物件的概念來做多組事件資料
//object最外面會用大括號{}
//裡面的畫，左邊是key，右邊是value，中間用：冒號隔開，是一組資料
//多組資料的話，會用逗號隔開
$('.btn').on(
{
click: function () {
console.log('click');
},
mouseenter: function () {
console.log('mouseenter');
},
mouseleave: function () {
console.log('mouseleave');
}
}
)
3.不同事件觸發一樣的動作時可以使用
$('.btn').on('click mouseenter mouseleave', function () {
console.log('hello');
}
)
.off()
專門用在取消由on建立的事件
#html
<div class="container">
<div class="row">
<button class="btn btn-primary" id="btnhi">hi</button>
<button class="btn btn-primary" id="on">on</button>
<button class="btn btn-primary" id="off">off</button>
</div>
</div>
#jq
const sayHi = function () {
console.log('hi');
}
$('#on').click(function () {
console.log('#on clicked');
$('#btnhi').on('click', sayHi)
})
$('#off').click(function () {
console.log('#off clicked');
$('#btnhi').off('click', sayHi)
})
.one()
專門用在只想要執行一次就好的時候使用
#html
<div class="container">
<div class="row">
<button class="btn btn-primary" id="btnhi">Hi</button>
</div>
</div>
#jq
<script>
$('#btnhi').one('click', function () {
console.log('hi one');
})
</script>
Q：非同步的概念
Q：git flow的用法
留言
張貼留言