1 表单验证的准备工作在开启长篇大论之前，首先将表单验证的效果展示给大家。1.点击表单项，显示帮助提示 2.鼠标离开表单项时，开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒对于初学者而言，html表单验证是一项极其琐碎的事情。要做好表单验证，需要准备以下基本要素：1.html表单结构：包含需要校验的表单元素；2.js逻辑控制：在需要校验的表单元素上绑定事件，如点击、获取...
在学习过程中遇到了这个利用JQuery对表格行的增加和删除，特记录下来以供初学者参考。 下面是主要的代码： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>zengjia he shancu </title><meta charset="utf-8" /><script src="../jsPanel-3.5.0/jquery-3.1.1.min.js"></script><script src="../DataTables/js/js/jquery.dataTables.min.js"></script><link href="../DataTables/js/css/jquery.dataTab...
先简单讲一下需求：页面中会列出多行个人信息记录，为方便查找，在顶层增加一个搜索栏，可根据用户姓名查找记录。 如果只想查看代码，可跳过分析过程，文章底部提供了完整的代码。 以下是我的编写过程： 动态页面，多条记录均由forEach生成，结构如下： <form name="userForm"> <table style="width:200px;"> <thead> <tr> <th> </th> <th> </th> <th>教师姓名</th> </tr> </thead> <tbody> <c:forEach items="${userList}" var="u...
摘要: 例如，让用户输入手机发送验证码，输完11位手机号后，自动隐藏键盘 例如，让用户输入手机发送验证码，输完11位手机号后，自动隐藏键盘 表单大概这样的： <div class="form-group"><input type="tel" class="form-control input-lg" id="mobile" name="mobile" placeholder="请输入手机号码"> </div> <div class="form-group"><div class="input-group"><input type="tel" class="form-control input-lg verify-input" id="ve...
今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单折叠过程中三种变换形式。 第一种变换形式是：不管点击哪一级菜单都可以打开或者关闭本级菜单，但是不会影响其他级别的菜单：<!DOCTYPE html> <html lang="...
今天给大家介绍一下，如何利用jQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。 下面举个例子具体介绍一下如何这些功能，案例如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery三级下拉列表导航菜单</title><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><style type="text/css"> *{margin: 0; padding: 0;} b...
今天给大家介绍一下如何利用jQuery实现从任意地方返回顶部的功能，现在大部分网站因为篇幅比较长，所以都会设置这么一个按钮，利用这个按钮可以实现从底部返回顶部的功能。废话不多说，下面就给出这么一个例子介绍一下，它是怎么实现的。 实现方法一： <footer><p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p><div id="tbox"><div id="log_id" style="float:left;position: relative;margin-left: ...
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法。分享给大家供大家参考，具体如下： 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) {$.elementVal = new Array();/*****************************************************************...
本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考，具体如下： 先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本... 原理: 1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况 2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉...
关于“加入收藏”的代码，很多人都不会重视，一般情况是随便在网上搜一个代码放在页面里就草草了事了。可是都没有做到主流浏览器的兼容。下面分享一段使用 jQuery 实现加入收藏夹的功能。 <a id="addcollect" href="#">加入收藏夹</a> $(document).ready(function() {$("#addcollect").click(function() {var ctrl = (navigator.userAgent.toLowerCase()).indexOf(mac) != -1 ? Command/Cmd: CTRL;if (document.all) {window.exter...
本文实例讲述了jQuery基于xml格式数据实现模糊查询及分页功能的方法。分享给大家供大家参考，具体如下： 1、此代码只支持xml 格式数据，根据不同需求修改ajax的success方法就ok了 2、此代码只是针对ajax只需一次请求的情况下 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//解决ie trim问题 (function($) { /*** =============================================================================...
谈谈表单校验这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。 直接看demo：http://www.suchso.com/code/bootstrapvalidate/用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解： 1.正则表达式的基本了解 ...
今天心情大好，再发一篇最进前端实现的相册模仿功能。 这个相册是在一个网站的案例展示页面上实现的，没单独写出来，没时间，重用性也很差，以后有时间了再单独提取出来， 写这个玩意前，我在网上找了一些案例，但是一看代码都比较傻眼，固不想去研究，所以自己写了..... 下面是实现这个功能的截图如果你是一个前端，这个功能对你来说除了逻辑复杂点，其他的可能实现起都比较简单，我不是做前端的，所以前端HTML这块遇到了一些问题...
大致介绍 学习了妙味，用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery $()选择器的实现 jQuery是面向对象的，所以自己编写的也要是面向对象的，看看基本的结构 // 定义lQuery对象 function lQuery(lArg){ } function lQ(lArg){return new lQuery(lArg); } // css()方法 lQuery.prototype.css = function(){}; // html()方法 lQuery.prototype.html = function(){};先来仿写jQuery中的$(函数)的方法 // 定义...
本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考，具体如下： 前言：对于表单内容格式的验证，原生JS的写法，较为繁琐，笔者曾在写一个注册界面的时候，验证邮箱格式，用户名格式，密码格式，多处使用了正则，并且错误提示信息也要用display:none/显示隐藏，在用过jQuery validate插件后，则大大加快了开发速度！ 1.jQuery validate插件提供了强大的验证功能，jQuery validate插件的官网是http://jqueryvalida...