[jQuery] 學習筆記

建立時間: 2015-04-01 16:34:28
更新時間: 2015-04-01 16:34:28

Selector

 //取得第一個為div的元素
 $('div :first')
 
 //取得最後一個為div的元素
 $('div :last')
 
 //取得div的第一個子元素
 $('div:first-child')
 
 //取得div的最後一個子元素
 $('div:last-child')
 
 //取得src為a的img元素
 $('img[src=a]')
 
 //取得src不為a的img元素
 $('img[src!=a]')
 
 //取得src以a開頭的元素
 $('img[src^=a]')
 
 //取得src以a結尾的img元素
 $('img[src$=a]')
 
 //取得src包含a的img元素
 $('img[src*=a]')
 
 //取得第n個子元素
 $('div:nth-child(n)')
 
 //取得所有奇數子元素
 $('div:nth-child(odd)')
 
 //取得所有偶數子元素
 $('div:nth-child(even)')
 
 //取得1,4,7...的子元素
 $('div:nth-child(3n+1)')

 

Div Control

 //取得div內的值
 $('div').text();
 
 //更新div內的值
 $('div').text('100');
 
 //清空div內的值
 $('div').text('');

 

Input Control

 //取得<input>內的值
 $('input').val();
 
 //更新input內的值
 $('input').val('5');
 
 //清空input內的值
 $('input').val('');

 

Checkbox Control

 //選取checkbox時,判斷是否勾選以做出相應動作
 $('#checkBox').change(function(){
 	if($(this).is(':checked') == true)    console.log('checked');
 	if($(this).is(':checked') == false)    console.log('unchecked');
 });

 

Radiobox Control

HTML Code

 <input type="radio" name="group1" value="A"/> A
 <input type="radio" name="group1" value="B"/> B
 <input type="radio" name="group1" value="C"/> C

 

jQuery Code

 //選取radiobox時取得選取的值
 $('input[name=group1]').change(function(){
 	var getVal = $('input[name=group1]:checked').val();
 	console.log(getVal);
 });

 

Textarea內容轉成HTML格式

 $('textarea').val().replace(/\n/g,'<br>').replace(/ /g,'&nbsp;');

 

Append或Load後元素的事件無法驅動

方法1 : 使用on來驅動事件

 $(function(){
 	$('body').on('click','#element',function(){
 	    //todo
 	});
 });

 

方法2 : 在load後用callback function載入要使用的事件

 function action(){
 	$('#elementWithLoad').click(function(){
 	    //todo
 	});
 }
 
 $(function(){
 	$('#div').load('foo.html',function(){
 		action();
 	});
 });

 

Scroll

 //scroll event
 $(window).scroll(function(){
 	//todo
 });
 
 //判斷一個物件在視窗滑動時的height
 $(window).scroll(function(){
 	if($('#element').offset().top > 1500){
 		//do something
 	}else{
 		//do something
 	}
 });
 
 //scroll animation
 $('body').animate({
 	scrollTop:0
 },500);
 
 // 滑動到一個元件的最下方(假設元件為overflow: auto)
 $('element').animate({
 	scrollTop: $('element')[0].scrollHeight
 }, 300);