脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery简单入门(四) - maikec陈,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 jQuery简单入门(四)
4.表单应用
表单是HTML的重要组成部分,在采集、提交用户输入的信息和显示列表数据等需求中有重要作用
表单应用一个简单的表单HTML示例:
Aa. 单行文本框应用
示例:
2.示例代码
$(function() {
$(“:input”).focus(function() {//$(“:input”)伪标签选择器
}).blur(function() {
$(this).removeClass(“focus”);
});
});
Ab. 多行文本框应用()
1.高度变化
$(function() {
VAR $comment = $(“#comment”);//获取多行文本框
$(“.BiggerClass”).click(function() {
if(!$comment.is(“:aniMATEd”)) {//判断是否处于动画状态
if($comment.height() < 500) {
$comment.animate({height : “+=50”}, 1000);//在原有高度上每秒增加50
}
}
});
});
2.滚动条变化(控制scrollTop属性)
$(function() {
var $comment = $(“#comment”);//获取多行文本框
$(“.upClass”).click(function() {
if(!$comment.is(“:animated”)) {//判断是否处于动画状态
$comment.animate({scrollTop: “+=50”}, 1000);
}
});
});
Ac. 复选框应用
1.全选和全不选
$(function() {
$(“#checkedAll”).click(function() {
alert(“全选”);
$(“[name = ITems] : checkbox”).attr(“checked”, true);
});
$(“#checkedNo”).click(function() {
alert(“全选”);
$(“[name = items] : checkbox”).attr(“checked”, false);
});
});
2.反选
$(function() {
$(“#checkedrev”).click(function() {
$(“[name = items] : checkbox”).each(function() {
$(this).attr(“checked”, !$(this).attr(“checked”));
//this.checked = !this.checked;
});
});
});
Ad. 表单验证
1.必填
$(function() {
$(“form : input.required”).each(function() {
$(this).next(“.high”).remove();//如果已有必填提醒,则删除
var $html = $(“*”);
$(this).parent().apPEnd($required);
});
});
2.验证数据格式合法性
$(function() {
$(“form :input”).blur(function() {
var $parent = $(this).parent();
//删除已有提示
$parent.find(“.formtips”).remove();
//验证用户名
if($(this).is(“#username”)) {
if(this.value == “”|| this.value.length < 6) {
var errorMsg = “请输入至少6位的用户名”;
$parent.append(“”+errorMsg+””);
} else {
var okMsg = ”输入正确”;
$parent.append(“”+okrMsg+””);
}
}
//验证邮箱
if($(this).is(“#email”)) {
if(this.value == “”|| (this.value != “”&& !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))){
var erromsg = “请输入正确的E-Mail地址”;
$parent.append(“”++”);
} else {
var okMsg = “输入正确”;
$parent.append(“”+okMsg+””);
}
}
});
});
(未完...)
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery简单入门(四) - maikec陈全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery简单入门(四) - maikec陈所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。