我的学习之路_第二十八章_JQuery 和validator插件
jQuery
利用jQuery进行遍历
js原生:
for(var i=0;i>?;i++){ }
jQuery:
方式一: 想要遍历的jQuery对象.each(function(index,dom){ });
方式二: $.each(想要遍历的jQuery对象,function(index,dom){ });
操作元素的值或者标签体
xxx():获取操作
xxx("值"):设置
获取或设置值: val();
获取或设置标签体: html()
获取或设置标签体: text()
html和text的区别在于前者会解析,后者不会
插入操作:
内部插入:
append() a.append(b) 将后者插入到前者的后面
prepend() a.prepend(b) 将后者者插入到前者的前面
appendTo() a.appendTo(b) 将前者插在后者的后面
prependTo() a.prependTo(b) 将前者插在后者的前面
外部插入:
after() a.after(c) 在a的后面添加c
before() a.before(c) 在a 的前面添加c
内部插入和外部插入的区别: 内部插入可以在元素的内部插入元素
外部插入在同级元素插入元素
清除操作:
empty();清除
remove();移除,自杀
select下拉选择框
属性:
multiple:值multiple规定可以多选
size:控制显示项目的数目
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked (针对的是radio checkbox)
:selected 下拉选择框
【validator插件】
这个插件是基于jQuery写的,所以在引入插件的时候也必须引入jQuery
使用:
1.首先引入jQuery库
2.引入validator的库
3.在页面加载成功之后指定你想要验证的表单
$(function(){
$("选择器").validate();
})
4.validator方法的使用
$("选择器").validate({
rules:{ } //规则
messages:{ } //提示
})
5.常见的规则
required: true|false (必须填写)
number: true|false (必须填写数值类型)
min: 5 (最小值:写的数字必须大于五)
max: 5 (最大值:写的数字不能大于五)
range:[min,max] (区间:写的数字只能在这个区间)
maxlength:
minlength:
rangelength:
equalTo:"选择器" (密码和确认密码,所以的元素必须和选择器中的一样)
digits:整数 (只能写整数)
email:email (邮箱验证)
6.规则的书写格式:
$("选择器").validate({
rules:{ //书写格式 }
messages:{ }
})
书写格式:方式一:
想要校验的字段的name属性名:"规则名"
方式二:
想要校验的字段的name属性名:{
"规则1":值,
"规则2":值
}
7.自定义错误提示信息
书写格式:
方式一:
想要校验的字段的name 属性名:"提示信息"
方式二:
想要校验的字段的name属性名:{
"规则1":"提示信息1",
"规则2":"提示信息2"
}
8.validate的自定义规则
$.validator.addMethod(name,fn,message);
name:规则名
fn:
function(value,element,params){
value:用户输入的值
element:元素本身
params:参数
}
//必须有返回值boolean
message:默认的提示信息
扩展内容
筛选:
children():获取子元素
parent():获取父元素
find():获取后代元素
next():大弟弟
nextall():所有弟弟
prev():小哥哥
prevall():所有的哥哥
siblings():所有的兄弟
is():判断是否是指定的元素
我的学习之路_第二十八章_JQuery 和validator插件的更多相关文章
- 我的学习之路_第二十五_javaScript
Javascript 作用:可以对表单数据进行校验,可以对页面实现一些动态效果 定义: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为 ...
- 我的学习之路_第二十九章_bootstrap
bootstrap 内置了html,css,js插件为一体的前端框架 响应式布局: 设计一套页面就可以使用于很多现实设备 bootstrap: 1.入门(响应式布局的容器) 1.先进入jQuery的j ...
- 我的学习之路_第二十七章_jQuery
jQueryjs类库 把常用对象或者方法封装起来,让我们写代码效率更高 1.jQuery 2.extjs [jQuery入门] jQuery的引入: 通过script标签的src属性引入 入门: 获取 ...
- 我的学习之路_第二十三章_HTML
Html : 超级文本语言 ( Hyper text Markup Language ) HTML 文件扩展名是 * .html HTML 结构都是有标签组成 通常情况下标签有开始标签和结束标签组成 ...
- 我的学习之路_第二十章_JDBC
JDBC 使用JDBC技术,通过mysql提供的驱动程序,操作数据库 ● 1. 注册驱动 告知jvm 使用的是什么驱动程序(mysql,oracle) 使用API中的类 DriverManager中的 ...
- 我的学习之路_第二十一章_JDBC连接池
JDBC连接池和DButils [DBCP连接池工具类] 使用读取配置文件的方式 DBCP中有一个工厂类 BasicDataSourceFactory 工厂类中有一个静态方法 返回值为: DataSo ...
- Python之路【第二十篇】:待更新中.....
Python之路[第二十篇]:待更新中.....
- FastAPI 学习之路(四十六)WebSockets(二)
上一篇文章,我们分享了WebSockets一些入门的,我们这节课,在原来的基础上,对于讲解的进行一个演示.我们最后分享了依赖token等.首先我们对上次的代码进行调整. 我们之前分享FastAPI 学 ...
- FastAPI 学习之路(五十六)将token存放在redis
在之前的文章中,FastAPI 学习之路(二十九)使用(哈希)密码和 JWT Bearer 令牌的 OAuth2,FastAPI 学习之路(二十八)使用密码和 Bearer 的简单 OAuth2,Fa ...
随机推荐
- Linux_破解密码-营救模式
实验用机:CentOS 5.7 破解密码 设置开机启动界面 系统运行级别 营救模式 一.破解密码 root用户可以更改任何用户的密码,普通用户只能修改自己的密码. 步骤: 1.重新启动系统 2.开机倒 ...
- laravel实现excel表格导出
记得引用一下excel,现在laravel5.2都默认自带的,不需要自己再 Composer安装依赖了. use Excel; 然后方法里这样写 //$cellData自己要进行导出的数组 Array ...
- Redis 小白指南(二)- 基础命令和五大类型:字符串、散列、列表、集合和有序集合
Redis 小白指南(二)- 基础命令和五大类型:字符串.散列.列表.集合和有序集合 引言 目录 基础命令 字符串类型 散列类型 列表类型 集合类型 有序集合类型 基础命令 1.获得符合规则的键名列表 ...
- Windows、Office系列产品精华部分集锦
提示 有了这个帖子麻麻再也不用担心我因为四处找Microsoft家的软件和系统而四处劳累所烦恼了! 首先,你们最爱的老XP同志,XP同志虽然退休了,但是依然坚持在岗位上,向他致敬!! Windows ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 【2017-06-06】Ajax完整结构、三级联动的制作
一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...
- 【JAVAEE学习笔记】hibernate04:查询种类、HQL、Criteria、查询优化和练习为客户列表增加查询条件
一.查询种类 1.oid查询-get 2.对象属性导航查询 3.HQL 4.Criteria 5.原生SQL 二.查询-HQL语法 //学习HQL语法 public class Demo { //基本 ...
- 基于NopCommerce的开发框架——缓存、网站设置、系统日志、用户操作日志
最近忙于学车,抽时间将Nop的一些公用模块添加进来,反应的一些小问题也做了修复.另外有园友指出Nop内存消耗大,作为一个开源电商项目,性能方面不是该团队首要考虑的,开发容易,稳定,代码结构清晰简洁也是 ...
- 【Selenium】Selenium IDE(alt+ctrl+s)
ttp://www.yiibai.com/selenium/selenium_ide_tool_features.html 学习 Selenium IDE安装 http://seleniumh ...
- 说说ajax上传数据和接收数据
我是一个脑袋不太灵光的人,所以遇到问题,厚着脸皮去请教大神的时候,害怕被大神鄙视,但是还是被鄙视了.我说自己不要点脸面,那是不可能的,但是,为了能让自己的技术生涯能走的更长远一些,受点白眼,受点嘲笑也 ...