jQuery基础知识--Form基础(续)

2019独角兽企业重金招聘Python工程师标准>>>

下拉框应用

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><script type="text/javascript" src="../../js/jquery-2.1.3.js"></script><title></title><style type="text/css">* { margin:0; padding:0; }div.centent {float:left;text-align: center;margin: 10px;}span {display:block;margin:2px 2px;padding:4px 10px;background:#898989;cursor:pointer;font-size:12px;color:white;}</style>
</head>
<body><div class="centent"><select multiple id="select1" style="width: 100px; height: 160px;"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option><option value="7">选项7</option><option value="8">选项8</option></select><div><span id="add">选中添加到右边&gt;&gt;</span><span id="add_all">全部添加到右边&gt;&gt;</span></div>
</div><div class="centent"><select multiple id="select2" style="width: 100px; height: 160px;"></select><div><span id="remove">&lt;&lt;选中删除到左边</span><span id="remove_all">&lt;&lt;全部删除到左边</span></div>
</div></body><script type="text/javascript">$(function () {$("#add").click(function () {
//            //方法1
//            var $options = $('#select1 option:selected');
//            var $remove = $options.remove();
//            $remove.appendTo('#select2');//方法2var $options = $('#select1 option:selected');$options.appendTo('#select2');});$("#add_all").click(function () {var $options = $("#select1 option");$options.appendTo("#select2");});$("#select1").dblclick(function () {var $options = $('#select1 option:selected');$options.appendTo('#select2');});$("#remove").click(function () {var $options = $("#select2 option:selected");$options.appendTo("#select1");});$("#remove_all").click(function () {var $options = $("#select2 option");$options.appendTo("#select1");});$("#select2").dblclick(function () {var $options = $("#select2 option:selected");$options.appendTo("#select1");});})
</script></html>

表单验证

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><script type="text/javascript" src="../../js/jquery-2.1.3.js"></script><title></title><link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body><form method="post" action=""><div class="int"><label for="username">用户名:</label><input type="text" id="username" class="required" /></div><div class="int"><label for="email">邮箱:</label><input type="text" id="email" class="required" /></div><div class="int"><label for="personinfo">个人资料:</label><input type="text" id="personinfo" /></div><div class="sub"><input type="submit" value="提交" id="send" /><input type="reset" id="res" /></div>
</form></body><script type="text/javascript">$(function () {//添加必填标识
        $("form :input.required").each(function () {$(this).parent().append("<strong class='high'>*</strong>");});//当输入框失去焦点时进行验证
        $("form :input").blur(function () {var $parent = $(this).parent();$parent.find(".formtips").remove();//验证usernameif($(this).is("#username")) {if(this.value == "" || this.value.length < 6) {var errorMsg = "请输入至少6位的用户名.";$parent.append("<span class='formtips onError'>" + errorMsg + "</span>")} else {var okMsg = "输入正确";$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>")}}//验证emailif($(this).is("#email")) {if(this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ) {var errorMsg = "请输入正确格式的E-Mail地址";$parent.append("<span class='formtips onError'>" + errorMsg + "</span>")} else {var okMsg = "输入正确";$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>")}}}).keyup(function () {//实时提醒
            $(this).triggerHandler("blur");}).focus(function () {$(this).triggerHandler("blur");});//提交--没有错误才能提交
        $("#send").click(function () {$("form .required:input").trigger("blur");var numErr = $("form .onError").length;if(numErr) {return false;}alert("注册成功!");});})
</script></html>

转载于:https://my.oschina.net/yulei1943/blog/1490698

jQuery基础知识--Form基础(续)相关推荐

计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...
文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识第一部分一.单项选择题 1.世界上第一台电子数字计算机取名为( ). A.UNIVAC B.EDSAC C.E ...
使用微型计算机的基础知识,计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识.DOC...
计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识计算机应用基础考试大纲基本要求 ???????????????????????????????????????????????????? ...
公共基础知识计算机,公共基础知识计算机基础知识试题
计算机基础知识是公共基础知识考试的组成成分之一,以下是由学习啦小编整理关于共基础知识计算机基础知识试题的内容,希望大家喜欢! 公共基础知识计算机基础知识试题 1.CPU的主要功能是进行( ). A.算 ...
计算机硬件价钱分配,电脑基础知识计算机硬件基础课件.ppt
电脑基础知识计算机硬件基础课件操作系统的概念指直接控制和管理计算机的硬件和软件资源以便于有效的使用这些资源的程序. 操作系统分类 :单用户操作系统.批处理操作系统.实时操作系统.分时操作系统.网络 ...
15版计算机应用基础知识整理,[电脑基础知识]计算机应用基础.ppt
[电脑基础知识]计算机应用基础计算机应用基础统考主要内容考试大纲分析考题类型与所占比例考试环境各章节考点讲解计算机基础知识 Windows操作 Word.Excel.Powerpoin ...
世界上第一代电子计算机取名为,计算机应用基础知识计算机应用基础试题及答案...
<计算机应用基础知识计算机应用基础试题及答案>由会员分享,可在线阅读,更多相关<计算机应用基础知识计算机应用基础试题及答案(13页珍藏版)>请在人人文库网上搜索. 1.计算机应 ...
计算机二级基础知识ppt,计算机二级公共基础知识软件工程基础ppt培训课件
计算机二级公共基础知识软件工程基础ppt培训课件 (46页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分根据三原色原理叠加后的单色形成了 ...
2014计算机应用基础试题及答案,2014计算机应用基础知识计算机应用基础试题及答案.doc...
2014计算机应用基础知识计算机应用基础试题及答案计算机应用基础知识计算机应用基础试题及答案 2012-03-26 11:44 [查查吧] ? 计算机应用基础知识1.1填空题1.第一代计算机采用 ...
计算机基础知识统考选择题,[电脑基础知识]计算机应用基础统考选择题.doc
[电脑基础知识]计算机应用基础统考选择题参加12月份统考的同学可以开始行动起来了!以下几点希望大家明确一下: 1．提供约400多道单选题,大家务必多看几遍,甚至可以考虑记下来(若有时间话可看一下我给 ...
计算机基础知识应用统考,计算机基础知识计算机应用基础统考试题库及答案
计算机基础知识计算机应用基础统考试题库及答案第第1 1章章计算机基础知识计算机基础知识( (单选题单选题) ) ((其实我所给的这些典型题目就是期末考试题或统考题,因此必做.参考答案在另其实我所给 ...

jQuery基础知识--Form基础(续)

jQuery基础知识--Form基础(续)相关推荐

最新文章

热门文章