jquery体验 - 吧

level 1

vida就这样了楼主

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="phpadmin">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<title>无标题 1</title>
</head>
<body>
</body>
</html>

2012年11月10日 10点11分 1

level 1

vida就这样了楼主

通过bind绑定事件来改变每个input的css样式
<script type="text/javascript">
$(document).ready(function(){
$("input").bind("mouseover",function(){
$(this).css("background-color","red");
}).bind("mouseout",function(){
$(this).css("background-color","");
})
})
</script>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</body>

2012年11月11日 23点11分 3

level 1

vida就这样了楼主

获取文本内容并显示在文本下方
<script type="text/javascript">
$(document).ready(function(){
$("input").bind("keyup",function(){
mytext=$(this).val();//获取表单内容
$("#text_"+$(this).attr("id")).text(mytext);//用attr("id")获取当前文本的id值,然后通过拼接得选择器返回内容
})
})
</script>
<body>
我的文本1:<input type="text" id="name1"><div id="text_name1"></div>
我的文本2:<input type="text" id="name2"><div id="text_name2"></div>
我的文本3:<input type="text" id="name3"><div id="text_name3"></div>
</body>

2012年11月11日 23点11分 4

level 1

vida就这样了楼主

通过attr给我一个启发,写了段表单验证~虽然貌似有点蠢~~不过我现在写点出来就挺乐得了,以后慢慢改~
<script type="text/javascript">
$(document).ready(function(){
$("input:lt(3)").bind("blur",function(){//因为按钮也是input,所以这里设置了条件
var mytext=$(this).val();//获取表单内容
var myname=$(this).attr("name");//获取文本的name属性值
//设置输出的提示信息
var names,test,math;
if(myname=="name"){
names="用户名";
math="^[A-Za-z0-9]+$";
test="只能输入中英文，数字，下划线，减号";
}
if(myname=="password"){
names="密码";
math="^\\w+$";
test="只能以字母开头，长度在6-18之间，只能包含字符、数字和下划线";
}
if(myname=="email"){
names="邮箱";
math="^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$";
test="邮箱格式不正确,请重新输入";
}
$("#text_"+myname).css({fontSize:"small",padding:"5px"});
if(mytext==""){
$("#text_"+myname).css({color:"red",padding:"5px"});
$("#text_"+myname).text("请输入"+names);
}else if(!mytext.match(math)){
$("#text_"+myname).css({color:"red",padding:"5px"});
$("#text_"+myname).text(test);
}else{
$("#text_"+myname).css({color:"green",padding:"5px"});
$("#text_"+myname).text("ok!");
}
})
//再写个蠢蠢的提交验证~,以后回头看,估计能笑半天~~~
$(":submit").click(function(){
if($("#text_name").text()=="ok!" && $("#text_password").text() =="ok!" && $("#text_email").text() =="ok!"){
alert("ok!");
return true;
}else{
return false;
}
})
})
</script>
<body>
<form>
用户名:<input type="text" name="name"><div id="text_name"></div>
密码:<input type="password" name="password"><div id="text_password"></div>
邮箱:<input type="text" name="email"><div id="text_email"></div>
<input type="submit" value="登陆">
</form>
</body>

2012年11月12日 00点11分 5

level 1

vida就这样了楼主

睡觉~

2012年11月12日 00点11分 6

level 1

vida就这样了楼主

看到别人的登陆框直接把账号,密码等字样显示在input里,感觉好神奇,特地研究了下,但是很坎坷呀,因为password样式的,如果直接在password里显示字样,出来的会是黑点,后来,朋友说用label,果然成功了.在此发出代码与大家分享
<form>
<div id="header">登陆</div>
<label id="i_email" for="email">邮箱</label><input type="text" name="email" id="email"><span><a href="#">注册账号</a></span><br>
<label id="i_password" for="password">密码</label><input type="password" name="password" id="password"><span><a href="#">密码找回</a></span><br>
<div><input type="checkbox" id="cookie"><span id="test_cookie">保存登陆</span></div>
<input type="submit" value="登陆">
</form>
下面JQUERY的代码
$(document).ready(function(){
$("input").bind("focus",function(){
$("#i_"+$(this).attr("id")).css("visibility","hidden");
})
$("input").bind("blur",function(){
if($(this).val()==""){
$("#i_"+$(this).attr("id")).css("visibility","visible");
}
})
})

2012年11月15日 17点11分 7