###### tags: `jQuert` `Javascript`
# Javascript與jQuery 筆記
最近更新日期:20201118

## checkbox
### [checkbox 相關]
取得物件
$('input[NAME="chk1"]') 用名稱
$("#chk1") 用ID
用css

### [checkbox 賦值]
$("#chk1").attr("checked",''); //設定不打勾
$("#chk2").attr("checked",true); //設定打勾

### [checkbox 取值]
var v=$("input[name='chk1']").is(":checked"));
v=true有被打勾，否則為 false

console.log($('input[name="chk1"]:checked').val());

console.log($(this).is(':checked'));

## radio
### [radio 賦值]
$('input[name="sex"]')[1].checked = true; //radio 賦值==>第二個選項選取
$("input[name=state][value='2']").attr('checked',true); //radio 賦值==>值為2的那個選取
$("input[name=xxx]").val( 值 );

### [radio 取值]
$ ('#sb1').click(function(){
var method =$("input[name='doway']:checked").val(); //radio 取值，注意寫法
if( typeof(method) == "undefined"){ // 注意檢查完全沒有選取的寫法，這行是精華
alert( "請選取操作方式！");
return false;
}

參考[jQuery 之 checkbox 及 radio 取值及設定值的正確方法](https://blog.xuite.net/vv650812/twblog/229550316-jQuery+%E4%B9%8B+checkbox+%E5%8F%8A+radio+%E5%8F%96%E5%80%BC%E5%8F%8A%E8%A8%AD%E5%AE%9A%E5%80%BC%E7%9A%84%E6%AD%A3%E7%A2%BA%E6%96%B9%E6%B3%95)

### 匿名函式範例
20201116

<script>
	//匿名函式 Anonymous 有時常稱 Lambda函式
	var print = function(){ console.log('Lambda匿名含式用法');}  // Lambda匿名含式用法
	print();
	
	//匿名函式 傳參數方法
	var print = function(username){ console.log('妳好! '+ username);} // 妳好! YTC
	print('YTC');
	
	//匿名函式 回傳值方法
	var print = function(username){ return '妳好, '+ username;}
	var result = print('YTC');
	console.log('匿名函式回傳值方法:',result);  //匿名函式回傳值方法: 妳好! YTC 
	
	//匿名函式 參數為函式範例
	var print = function(username){ return '妳好, '+ username();}  //內部username() 需使用函式形態
	var result = print(function(){return "Mary";});
	console.log('參數為函式範例',result); //參數為函式範例 妳好, Mary	
</script>

### 巢狀函式範例
20201116

<script>
	//巢狀函式
	function parent(){
		var x =1;
		function child(){
			var y=1;
			console.log('於child內:x='+x);
		}
		child();
		try{
			console.log('於child外:y='+y); 		//會出錯
		}catch(e){
			console.log('於child外列印y，出現錯誤');
		}
	}
	parent();
	try{
		console.log('於parent外:x='+x); //會出錯
	}catch(e){
		console.log('於parent外列印x，出現錯誤');
	}
	try{child();}catch(e){console.log('child()無法於parent()外執行');}	
</script>

### 箭頭函式
20201116

<script>
    // 箭頭函式 Arrow function => 語法更簡潔 又稱Lambdas
    // 語法:由(參數開始)=>{函式之程式碼}。
    function fun1(){return 1;}	//原函式
    let fun1a=()=>1;//箭頭函式 (參數部分由()包起來，加上=> ，=>右方為函式程式碼。		
    console.log(fun1a());   //1
    function fun2(x){return 2*x;}
    let fun2a=(x)=>2*x;//若有定義參數，小括號可省略(如fun3a)->經測試多個參數，還是要用括號包起來
    console.log(fun2a(6));   //12
    let fun3a=x=>2*x;
    console.log(fun3a(7)); 	//14
    let fun4a=(x,y)=>x+y;
    console.log(fun4a(7,8)); //15
    let fun5a = (x,y)=>{	// 多行函式程式碼的話，用{}包起來。
        z=x+y;
        return z;
    }
    console.log(fun5a(8,8));//16
    
    //將箭頭函式當作參數方法
    var members=["Mary","Peter","Lowina","ALice"];
    var upperNames = members.map(  // 傳統做法 註1
        function(man){
        return man.toUpperCase();
        });
    console.log(upperNames);  //["MARY","PETER","LOWINA","ALICE"];
    
    //註1:陣列 (arrray) 的 map() 方法用來遍歷一個陣列中的每個元素，
    //將元素分別傳入指定的函數，最後將所有函數的返回值組成一個新的陣列。			
    let upperNamesA=members.map(man=>man.toUpperCase()); //箭頭函式作法
    console.log(upperNamesA); //["MARY","PETER","LOWINA","ALICE"];
</script>

### 立即函式
20201116

//立即函式 Immediately Invoked Function Expression IIFE:定義後馬上執行。
//語法:(function(){})();
console.log('--立即函式--');
x=10;
(function(){
  var x=200;
  console.log(x); //200 可以避免區域變數與全域變數衝突問題
})();
console.log(x);  //10

### 陣列用法
20201117 20201118

<script>
	//陣列宣告與給值
	//使用建構函式方法
	var ar = new Array();
	var ar = new Array(3);
	var ar = new Array("Mary","Peter","Lowina","ALice");
	var ar = Array("Mary","Peter","Lowina","ALice");
	//使用Literal Notation方法
	var ar = [];
	var ar = ["Mary","Peter","Lowina","ALice"];
	//取得陣列內元素
	console.log(ar[2]); //Lowina
	console.log(ar.length); //取得陣列長度 4
	console.log(ar[ar.length-1]); //取得陣列最後一個元素
	
	//陣列解構賦值
	let members=["Mary","Peter","Lowina","ALice"];
	let [s1,s2,s3,s4]=members;  //使s1 對映到Mary 依此類推(賦值)
	console.log('s2=',s2); //Peter
	let s6,s7,s8,s0;  //先宣告
	[s6,s7,s8,s0]=members;  //再賦值
	console.log('s0=',s0); // Alice
	
	//取得剩餘項目 ...
	let [s10,s11,...oth]=members;
	console.log('s10=',s10);
	console.log('oth=',oth);//["Lowina","ALice"]
	console.log('oth is Array? ',Array.isArray(oth)); //true
	console.log('oth length? ',oth.length); //2
	console.log('oth toString? ',oth.toString()); //Lowina,ALice
	
	//陣列操作函式
	console.log('--陣列操作函式--');
	ar=["Mary","Peter","Lowina","ALice"];	
	console.log(ar.toString()); //Mary,Peter,Lowina,ALice
	console.log(ar.valueOf()); //["Mary","Peter","Lowina","ALice"] 及一些詳細資訊
	console.log(ar.join('|')); //Mary|Peter|Lowina|ALice 用指定符號，分開元素。
	//push 及pop 操作，當作堆疊來操作
	ar =[];
	ar.push('1');
	ar.push('2');
	ar.push('3');
	ar.push('4');
	console.log('ar 之push操作結果',ar); //ar 之push操作結果 (4)?["1", "2", "3", "4"]0: "1"1: "2"2: "3"3: "4"length: 4__proto__: Array(0)
	console.log(ar.pop()); //4 由最後一個元素，開始取值
	console.log(ar.pop()); //3
	console.log('ar 之pop操作結果',ar); //ar 之pop操作結果 (2)?["1", "2"]
    
    //shift 先進先出
	console.log('--shift 先進先出--');
	ar =[];
	ar.push('1');
	ar.push('2');
	ar.push('3');
	ar.push('4');
	console.log(ar.shift());//1
	console.log(ar.shift(3));//2 跟參數3無關。
	//sort reverse
	ar=[1,3,5,2,4,6];
	console.log('排序與反排序ar()=',ar);
	console.log('ar.sort()=',ar.sort());
	console.log('ar.reverse()=',ar.reverse());
	console.log('ar.indexOf()=',ar.indexOf(2)); //反排序後的2位置。	
</script>

S20200901 By YTC
M20201116,M20201117,M20201118