JQuery 篩選、動畫、字符串操作

篩選

/* 
	查找 可以做二次篩選
	1.children() 查找子元素 參數是 選擇器
	2.find() 查找後代元素 參數是選擇器(重點)
	3.parent() 查找的當前元素的父元素
    4.parents() 查找當前元素的祖先元素
	
	5.siblings() 兄弟元素(重點)
	
 */

$(function(){
	//var test = $(".box .c_2 li:eq(2)").html();
	getHtml();
	$("li").click(function(){
		//被點擊的元素是紅色
		$(this).css("background-color","red");
		//除了自己其他的兄弟元素是白色
		$(this).siblings().css("background-color","white");
	});
	
});

function getHtml(){
	//var li = $(".box").children(":eq(0)").html();
	//var li = $(".box").find(".select").html();
	//var li = $("div").parent(".box").html();
	var li = $("li").parents(".c_2").html();
	console.log(li);
	// for(var i=0;i<li.length;i++){
	// 	console.log(li[i]);
	// 	console.log("==================");
	// }
	//console.log(li);
}

動畫

$(function(){
	/* 
		隱藏和顯示
		hide()
		show()
		指定參數 指定動畫執行時間
		slow fast 
		自定義動畫時間 毫秒
	 */
	$("#btn1").click(function(){
		//$(".box").css("display","none");
		$(".box").hide(5000);
	});
	$("#btn2").click(function(){
		//$(".box").css("display","block");
		$(".box").show(3000);
	});
	/* 
		滑動  高度 樣式改變 
		slideUp() 收起
		slideDown() 展開
	*/
	$("#btn3").click(function(){
		//$(".box").css("display","none");
		$(".box").slideUp(1000);
	});
	$("#btn4").click(function(){
		//$(".box").css("display","block");
		$(".box").slideDown(1000);
	});
	var flag = 0;
	
	$("#cc").click(function(){
		
		if(flag ==0){
			$("#menu:not(:animated)").slideDown(1000);
			flag = 1;
		}else{
			$("#menu:not(:animated)").slideUp(1000);
			flag = 0;
		}
	});
	
	/* 
		淡入和淡出  透明度 樣式改變
		fadeIn()顯示
		fadeOut()消失
		fadeTo() 到指定的
	 */
	$("#btn5").click(function(){
		//$(".box").css("display","none");
		$(".box").fadeIn(2000);
	});
	$("#btn6").click(function(){
		//$(".box").css("display","block");
		$(".box").fadeOut(2000);
	});
	$("#btn7").click(function(){
		//$(".box").css("display","none");
		$(".box").fadeTo(2000,0.5);
	});
	/* 
		自定義樣式改變
		animate(prop,time,fun)
		prop指定你動畫之後的樣式 可以指定多個樣式 使用對象
		time指定動畫執行的時間
		fun指定動畫的回調函數
		組合動畫 指定多個動畫組合在一起 
		1.連續性動畫可以指定數值自增 +=  -= 
		
		動畫的機制
		1.隊列機制,會將動畫放入頁面的隊列中,按順序執行動畫
		2.代碼運行不受動畫影響
		一般我們指定動畫需要判斷當前元素有沒有正在執行的動畫
		如果有那我們的動畫不加入隊列，如果沒有才加入隊列，不然
		會有一直抽搐的效果
		:not(:animated)
		
		回調函數
		回調函數可以讓代碼再動畫執行之後執行
	 */
	
	$("#btn8").click(function(){
		//$(".box").css("display","none");
		//$(".box:not(:animated)").animate({"left":"+=100px"},2000);
		//console.log("動畫執行了"+flag++);
		//$(".box").animate({"left":"200px","top":"0px"},2000);
		$(".box").animate({"opacity":"0"},1000,function(){
			$(this).css("height","0px");
		});		
	});	
});

字符串操作

/* 
   1.字符串操作
    length屬性字符串的長度
	indexOf 判斷字符在字符串中出現的索引 返回-1表示不存在
    substring 和java一樣
	substr(a,b) a代表開始截取的位置 b代表截取多少位
	split 和java類似 注意轉義字符
	正則驗證
	match //TODO  和java不一樣
	
   2.對象的focus() 當前對象獲得焦點\
   3.val()表單對象的取值和設置
		select 如果有value 就使用option的value沒有使用option中的文本
		texteara 是標籤的內容 他沒有value屬性
		radio checkbox 都可以使用 value屬性
   4.submit() form的方法 表單提交
 */


$(function(){
	$("#login").click(function(){
		/* 驗證代碼 */
		// if(checkForm()){
		// 	/*
		// 		表單提交
		// 		submit()
		// 	 */
		// 	$("#myform").submit();
		// }else{
		// 	console.log("驗證不通過");
		// }
		// var reg =  /\w{6,}/;
		// var s = "12ndsanflk23";
		// alert(s.match(reg));
		
		
		
	});
	
	$("#username").keyup(function(){
		var username = $(this).val();
			if(username.length<6){
				$(this).next().html("用戶名不能小於6位");
				//讓當前的輸入框再次輸出
				//$(this).focus();
				return;
			}
			for(var i=0;i<username.length;i++){
				var c = username[i];
				console.log(c);
				if((c>='a' && c<='z') ||
				  (c>='A' && c<='Z') || 
				  (c>='0' && c<='9') || 
				  (c=='_')){
					  console.log("通過");
				  }else{
					  $(this).next().html("用戶名值能是數字英文和下劃線");
					  //$(this).focus();
					  return;
				  }
			}
			$(this).next().html("");
	});
	
//表單驗證
function checkForm(){
	//用戶名不能小於6位 只能是 數字 英文 _
	/* 獲取表單對象的值 val() */
	var username = $("#username").val();
	if(username.length<6){
		alert("用戶名不能小於6位");
		return false;
	}
	for(var i=0;i<username.length;i++){
		var c = username[i];
		console.log(c);
		if((c>='a' && c<='z') ||
		  (c>='A' && c<='Z') || 
		  (c>='0' && c<='9') || 
		  (c=='_')){
			  console.log("通過");
		  }else{
			 alert("用戶名值能是數字英文和下劃線");
			 return false;
		  }
	}
	var password  = $("#password").val();
	if(password.length<6){
		alert("用戶密碼不能小於6位");
		return false;
	}
	return true;
}