我的学习之路_第二十八章_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 ...
随机推荐
- 9.Java 加解密技术系列之 RSA
Java 加解密技术系列之 RSA 序 概念 工作流程 RSA 代码实现 加解密结果 结束语 序 距 离上一次写博客感觉已经很长时间了,先吐槽一下,这个月以来,公司一直在加班,又是发版.上线,又是新项 ...
- 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】
首先,把昨天那俩条sql语句的优化原因给大家补充一下,第一条效率极低,第二条优化后的,sql语句截图如下: 经过几个高手的评论和个人的分析: 第一条sql语句查询很慢是因为它首先使用了in关键字查询, ...
- Embedding R-generated Interactive HTML pages in MS PowerPoint(转)
Usually when I create slide decks these days I used markdown and slidy. However, I recently was ask ...
- C++ STL快速入门
在数月之前的机试中第一次体验到STL的威力,因为自己本来一直在用C语言做开发,很多数据结构都是自己造的,比如链表.队列等,第一次接触C++ STL后发现这些数据结构都已经给我提供好了,我直接拿去调用就 ...
- CentOS 虚拟机安装详解
第一步:安装 VMware 官方网站:www.vmware.com 下载百度云链接:http://pan.baidu.com/s/1bphDOWv 密码:0zix VMware 是一个虚拟 PC 的软 ...
- selenium+python等待时间
等待时间可以有多种 1.硬等待 import time time.sleep(x)#等待x秒 2.浏览器每次查找一个元素都进行等待 import time br.implicitly_wait(x)# ...
- EF Core学习Code First
下面通过实例来学习EF Core Code First,也就是通过EF Core迁移来完成从模型生成数据库. 本实例使用EntityFrameworkCore SQLite 数据库进行介绍,大家也可以 ...
- 文件描述符与FILE
1. 文件描述符(重点) 在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录文件.链接文件和设备文件.文件描述符(file descriptor)是内核为了高效管理已被打开的文件所创 ...
- DW3 消息推送
1.新建项目 参见:http://www.cnblogs.com/yysbolg/p/yys_Blogs_java.html 2.添加jar包: commons-fileupload-1.2.jar ...
- winform / Dev全局皮肤组件
话不多说先上效果图. 由于这是单独的测试项目, 用于演示Dev控件的皮肤样式, 所以上面只是演示了部分控件的效果. 下面则是一些实际项目中的截图: Dev的控件样式不仅美观丰富, 上面仅皮肤设置就有4 ...