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;
}