web前端 (16)Jquery 04 + Jquery插件
邹玄裳
目录
Jquery
文档查找函数 熟悉
工具函数 了解
本地存储 ***
Jquery插件
放大镜插件
表单验证插件
消息提示插件
文档查找函数 熟悉
根据一个已经的得到的Jquery对象, 查找与其有关的元素的 jquery对象
格式:
- 查找匹配选择器的子元素
$obj.children(“选择器”);
- 查找匹配选择器的后代元素 ***
$obj.find("选择器");
- 获取下一个兄弟元素 ***
$obj.next();
- 获取上一个兄弟元素
$obj.prev();
- 获取父元素 ***
$obj.parent();
- 查找匹配选择器的祖先元素
$obj.parents("选择器");
案例:
<script type="text/javascript">
$(function(){
$("input").blur(function(){
var text = $(this).val();
var $span = $(this).parent().find("span");
if(text.length>=6){
//匹配
$span.html("恭喜你,输入可用 !");
$span.css({"font-size":"14px","color":"#0a0"});
}else{
//不匹配
$span.html("恭喜你,输入不可用 !");
$span.css({"font-size":"14px","color":"#a00"});
}
});
});
</script>
</head>
<body>
<p><input> <span></span></p>
文档筛选查找函数 了解
从一个Jquery对象中, 筛选出需要的部分:
- var $x = $obj.eq(下标) : 获取指定下标处的Jquery对象
- var dom = $obj.get(下标) : 获取指定下标处的dom对象
- var $x = o b j . f i r s t ( ) : 返 回 obj.first() : 返回 obj.first():返回obj中第一个元素的jquery 对象
- var $x = o b j . l a s t ( ) : 返 回 obj.last() : 返回 obj.last():返回obj中最后一个元素的jquery对象
- $obj.is(选择器) : 是否满足选择器条件
- var $x = $obj.not(选择器): 筛选出不满足选择器条件的jquery对象
案例:
<div>白日依山尽</div>
<div>锄禾日当午</div>
<div>清明上河图</div>
<div>复方草珊瑚</div>
<div>黄河入海流</div>
<div>弯弓射大雕</div>
<div>平方差公式</div>
<div>完全搞不懂</div>
<div>高射炮平射</div>
<div>长河落日圆</div>
<div>一日复一日</div>
<div>明日何其多</div>
<div>想煎何太急</div>
<div>菊花爆满山</div>
<div>造血干细胞</div>
工具函数 了解
$.each 遍历函数
-
遍历Jquery对象
格式:
$obj.each(function(){
//this 指的是 每一次遍历的元素的dom对象
});
案例:
白日依山尽
锄禾日当午
清明上河图
复方草珊瑚
黄河入海流
弯弓射大雕
平方差公式
完全搞不懂
高射炮平射
长河落日圆
一日复一日
明日何其多
想煎何太急
菊花爆满山
造血干细胞
弊厩奸老马<script> $(function(){ var $div = $("div"); var i = 1; $div.each(function(){ this.innerHTML = i+". "+this.innerHTML; i++; }); }); </script> -
遍历数组
格式:
$.each(数组,function(i,value){
//i : 表示循环遍历的下标
//value: 表示循环遍历时数组每个下标的数据
});案例:
var arr=[“小泽马老师”,“加藤马老师”,“天海马老师”,“波多马老师”,“吉泽马老师”,“仓井马老师”,“麻生马老师”,“麻仓马老师”,“井上马老师”,“武藤马老师”,“短小经干马老师”];
$.each(arr,function(i,value){
console.info(i+":"+value);
});
数组去重 了解
格式:
$.unique(数组);
注意: 去重操作是直接作用到原数组的 ,没有返回值 !
案例:
var arr=[“小泽马老师”,“加藤马老师”,“天海马老师”,“天海马老师”,“波多马老师”,“吉泽马老师”,“仓井马老师”,“天海马老师”,“麻生马老师”,“麻仓马老师”,“井上马老师”,“武藤马老师”,“短小经干马老师”,“小泽马老师”];
$.unique(arr);
console.info(arr);
数组合并 了解
格式:
$.merge(数组1,数组2);
作用: 将数组2的内容, 追加到数组1中! 此操作不影响数组2中的数据 !
var arr1=["小泽马老师","加藤马老师","天海马老师"];
var arr2=["旋转跳跃孙宽塑胶版","震动带声小马达*2版"];
$.merge(arr1,arr2);
console.info(arr1);
去除字符串的前后空格 了解
格式:
var 新字符串 = $.trim(原字符串);
此操作 没有对原字符串进行改变 . 返回值为新的去除空格的字符串 !
案例:
var text1 = " 床前明月光 ";
var text2 = $.trim(text1);
console.info(text1);
console.info(text2);
HTML5 中JS的常用操作
本地存储 ***
共有两种存储数据的方式 :
方式1. 通过localStorage 对象, 存储数据 !
存储数据时, 理论上数据是永久存储的 !
方式2. 通过sessionStorage 对象, 存储数据 !
当会话结束时, 数据自动清除 !(浏览器关闭时)
注意: 上述两个对象, 操作的方式完全一致. 存储键值对, 键与值都是字符串 !
常用函数:
存储数据:
格式1. 对象.setItem(key,value);
格式2. 对象.key=值;
取出数据:
格式1. var value = 对象.getItem(key);
格式2. var value = 对象.key;
删除单个数据:
对象.removeItem(key);
清空所有数据:
对象.clear();
根据存储的顺序, 取出数据的key
//函数名称为key ,得到的是键值对的键
var k = 对象.key(下标);
案例:
localStorage.setItem(“s1”,“床前明月光”);
localStorage.setItem(“s2”,“玻璃好上霜”);
localStorage.setItem(“s3”,“要不及时擦”);
localStorage.setItem(“s4”,“地上鞋两双”);
var s1 = localStorage.getItem("s1");
var s2 = localStorage.s2;
var s3key = localStorage.key(2);
var s3 = localStorage.getItem(s3key);
console.info(s1);
console.info(s2);
console.info(s3);
插件
我们学习的不是如何使用某一个插件 , 重点是: 如何使用所有的插件 !
放大镜插件
步骤:
1. 引入Jquery.js文件
<script src="js/jquery.js"></script>
2. 引入插件的js文件
<script src="js/jquery.mlens-1.0.min.js"></script>
3. 在网页中 编写一个img标签 , img的src属性指向小图片
<img id="x" src="images/a.jpg">
4. 在script块中, 通过JSON 描述放大镜规格:
var json = {
imgSrc:"大图片路径",
lensShape:"放大镜形状",//圆形circle 方形square
lensSize:数值,//放大镜大小, 值为数字表示px
borderColor:"十六进制颜色值",//表示放大镜边框颜色
borderRadius:数值//值为数字,表示边框的圆角,是px ,不能使用百分比
//如果形状为方形 圆角等于放大镜大小的一半,则效果也是圆形的!
}
5. 在网页加载完毕后, 通过上述img标签的jquery对象 , 绑定放大镜插件 并指定放大镜的规格JSON对象
$(function(){
$("#x").mlens(json);
});
表单验证插件
校验规则:
序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
使用步骤(格式1):
1. 引入Jquery 文件
<script src="js/jquery.js"></script>
2. 引入插件的JS文件
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
3. 在网页加载完毕时, 通过form标签的jquery对象 初始化表单验证组件
$(function(){
$("form").validate();
});
4. 在form标签的input标签中, 加入验证的规则
<form action="haha">
<input name="username" minlength="8" maxlength="16"><br>
<input name="password" minlength="6" maxlength="12"><br>
<input type="submit" value="登录">
</form>
使用步骤(格式2):
1. 引入Jquery 文件
<script src="js/jquery.js"></script>
2. 引入插件的JS文件
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
3. 在网页加载完毕时, 通过form标签的jquery对象 初始化表单验证组件
$(function(){
$("form").validate(验证规则JSON对象);
});
4. 编写验证规则的JSON对象
var json = {
rules:{
"输入框的name":{
通过规则属性键值对, 描述规则
}
},
messages:{
"输入框的name":{
通过规则属性键,与提示的文本值, 来描述提示信息
}
}
}
案例
<!-- 1. 引入Jquery 文件 -->
<script src="js/jquery.js"></script>
<!-- 2. 引入插件的JS文件 -->
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
<!-- 3. 在网页加载完毕时, 通过form标签的jquery对象 初始化表单验证组件 -->
<script type="text/javascript">
var json = {
rules:{
"username":{
"required":true,
"minlength":8,
"maxlength":16
},
"password":{
"required":true,
"minlength":6,
"maxlength":12
}
},
messages:{
"username":{
"required":"嘿，这个必须输入, 锤子",
"minlength":"你太短了",
"maxlength":"太长了, 脑子有坑吧"
},
"password":{
"required":"嘿，密码必须输入, 锤子",
"minlength":"你还是太短了",
"maxlength":"太长了, 坑子有脑吧"
}
}
};
$(function(){
$("form").validate(json);
});
</script>
<form action="haha">
<input name="username"><br>
<input name="password"><br>
<input type="submit" value="登录">
</form>
消息提示插件 growl
步骤:
<script src="js/jquery.js"></script>
<script src="js/jquery.growl.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.growl.css">
- 普通消息提示
$.growl({"title":"提示的标题","message":"提示的内容"});
- 提醒消息提示
$.growl.notice({"title":"提示的标题","message":"提示的内容"});
- 警告消息提示
$.growl.warning({"title":"提示的标题","message":"提示的内容"});
- 错误消息提示
$.growl.error({"title":"提示的标题","message":"提示的内容"});
类似资料：