一、 使用JQuery完成页面的弹出广告的效果
需求：
在网站的首页上定时弹出一个广告，过几秒之后，广告会自动消失。
技术分析：
【JQ的获得元素】
- $(“#id”)
【JQ的效果】
- show(); --显示某个元素
- hide(); --隐藏某个元素
- slideDown(); --向下滑动
- slideUp(); --向上滑动
- fadeOut(); --淡出
- fadeIn(); --淡入
- animate(); --自定义动画
- toggle(); --单击事件的切换
步骤分析：
步骤一：页面加载后，设置一个定时操作.5秒执行一个函数.
步骤二：在函数中获得广告的div.显示div.
步骤三：清空原来的定时,设置一个定时.5秒后执行一个函数.
步骤四：在函数中获得广告的div.隐藏div.
代码实现：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
var time;
$(function(){
// 设置定时 5秒后执行一个显示广告的函数
time = setInterval("showAd()",5000);
});
// 显示广告的函数
function showAd(){
// 获得广告的div，显示
// $("#divAd").show(1000);
// $("#divAd").slideDown(3000);
$("#divAd").fadeIn(3000);
// 清空定时：
clearInterval(time);
// 重新设置定时:
time = setInterval("hideAd()",5000);
}
// 隐藏广告的函数:
function hideAd(){
// 获得广告的div，隐藏
// $("#divAd").hide(3000);
// $("#divAd").slideUp(3000);
$("#divAd").fadeOut(3000);
// 清空定时：
clearInterval(time);
}
</script>
二、使用JQuery完成表格的隔行换色
需求：
制作一个表格，隔行换色.第一行标题的行，不需要进行换色，其他的行需要变换颜色．
表格的隔行换色.png
技术分析：
【JQuery的CSS类】
使用addClass(),removeClass(); 添加或移除样式
步骤分析：
步骤一：在页面中引入一个jquery的js
步骤二：写页面加载的函数.
步骤三：使用选择器基本过滤找到奇数行和偶数行
步骤四：分别给不同的行添加样式（样式已经由美工制作好的）
代码实现：
<script>
$(function(){
// 找奇数行：
//$("tr:odd").addClass("odd");
// 偶数行:
//$("tr:even").addClass("even");
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
});
</script>
三、使用JQuery完成复选框的全选和全不选
需求：
有如下的表格的数据，批量的进行删除.将上面的复选框选中，下面其他的复选框都被选中。如果上面的复选框没有被选中，那么将下面的所有的复选框全不选.
使用JQuery完成复选框的全选和全不选.png
技术分析：
【JQuery操作某个元素的属性】
<script>
$(function(){
$("#bt1").click(function(){
// 获得属性的值
// alert($("#img1").attr("src"));
// 修改属性的值:
$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
});
});
</script>
步骤分析：
步骤一：引入jquery的js
步骤二：编写加载的方法.
步骤三：上面的复选框绑定一个单击事件
步骤四：如果上面的被选中，修改下面的所有的复选框的checked属性变为true否则将复选框的checked属性变为false.
$(function(){
// 步骤一：为上面的复选框绑定单击事件:
$("#selectAll").click(function(){
/*if(this.checked == true){
// 如果上面的复选框被选中：
$("input[name='ids']").attr("checked",true);
}else{
// 上面的复选框没有被选中
$("input[name='ids']").attr("checked",false);
}*/
// $("input[name='ids']").attr("checked",this.checked);
$("input[name='ids']").prop("checked",this.checked);// this JS的对象
});
});
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
四、使用JQuery完成省市联动
需求：
在注册的页面上有省市联动.
使用JQuery完成省市联动.png
技术分析:
【JQuery的遍历】
each的方法进行遍历.
一种用法：
JQ的对象.each(function(i,n){
});
二种用法
$.each(数组,function(i,n){
});
【JQuery的DOM的操作】
JS中添加元素：appendChild();
JQ中添加元素：
append();
appendTo();
1.4.2.2 步骤分析：
步骤一：引入jquery.js
步骤二：加载的方法.
步骤三：定义二维数组
步骤四：在第一个省份的下拉列表中绑定一个事件change
步骤五：在绑定的事件的函数中，获得选中的省份的值.
步骤六：遍历数组，省份的值与数组中的值比较.
步骤七：获得数组的值.遍历获得的值.
步骤八：获得每个值.创建元素，创建文本节点.
步骤九：将文本添加到option元素中.将option添加到第二个下拉列表中 .
// 定义二维数组：
var cities = [
["长春市","吉林市","延边市","白山市","松原市"],
["济南市","青岛市","临沂市","烟台市"],
["石家庄","唐山","保定","承德","秦皇岛"],
["南京","苏州","扬州","无锡"]
];
$(function(){
// 获得省份的下拉列表，绑定事件
$("#province").change(function(){
// 获得下拉列表的值:
// alert(this.value);
var val = this.value;
var $city = $("#city");
$city[0].options.length = 0;
$(cities).each(function(i,n){
// alert(i+" "+n);
if( val == i){
$(n).each(function(j,m){
// alert(m);
// 创建option元素
var opEL = document.createElement("option");
// 创建文本节点
var textNode = document.createTextNode(m);
// 将文本添加到option中
// opEL.appendChild(textNode);
$(opEL).append(textNode);
// 将option添加到第二个列表中
$city.append(opEL);
});
}
});
});
});
总结
【JQuery的文档操作】
$(“a”).append(“b”); // 将b添加到a元素中.
$(“a”).appendTo(“b”); // 将a添加到b元素中.
$(“a”).insertBefore(“b”); // 将a元素插入到b元素之前
$(“a”).insertAfter(“b”); // 将a元素插入到b元素之后
$(“a”).remove(); // 将a元素移除
五、使用JQuery完成下拉列表的左右选择
需求：
在数据的编辑的页面中，有已选的商品和未有的商品两个下拉列表，可以左右进行选择
使用JQuery完成下拉列表的左右选择.png
步骤分析：
步骤一：引入jquery的文件
步骤二：页面加载的函数
步骤三：在链接上添加一个事件.
步骤四：使用选择器找到左侧的列表中被选中的元素，添加到右侧.
<script>
$(function(){
// 将左侧选中的option添加到右侧
$("#add").click(function(){
$("#selectLeft option:selected").appendTo("#selectRight");
});
// 将左侧所有的option添加到右侧
$("#addAll").click(function(){
$("#selectLeft option").appendTo("#selectRight");
});
// 双击事件
$("#selectLeft").dblclick(function(){
$("option:selected",this).appendTo("#selectRight");
});
});
</script>
总结：
JQuery中常用的事件:
JQuery中常用的事件.png
五、JQuery使用validate插件完成校验
1. validate插件下载
l 官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
l 帮助文档位置：http://jqueryvalidation.org/documentation/
l 目录结构：
validate插件.png
2. 导入
validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）
<!--依赖的jQuery库-->
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />
<!--validate校验库-->
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />
<!--国际化库，中文提示（可选）-->
<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />
validate需要手动的声明，对那个表单进行校验，手动方式可以使用以下4种检验方式。
<script type="text/javascript">
$().ready(function () {
$("#formId").validate();
});
</script>
4种检验方式.png
检验器查询表
| 校验类型 | 取值 | 描述 |
|---|---|---|
| required | true/false | 必填字段 |
| “@”或者”email” | 邮件地址 | |
| url | 路径 | |
| date | 数字 | 日期 |
| dateISO | 字符串 | 日期（YYYY-MM-dd） |
| number | 数字（负数，小数） | |
| digits | 整数 | |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| rangelength | [minL,maxL] | 长度范围 |
| min | 最小值 | |
| max | 最大值 | |
| range | [min,max] | 值范围 |
| equalTo | jQuery表达式 | 两个值相同 |
| remote | url路径 | ajax校验 |
检验方式：js 代码
语法：
语法：
$(…).validate({
rules:{},
messages:{}
});
rules 规则语法：
rules:{
字段名:”校验器”,
字段名:”校验器”
}
校验器语法：
语法1："校验器"
语法2：{校验器:"取值",校验器:"取值",...}
message 提示语法：
message:{
字段名:{校验器:"提示",校验器:"提示",...}
}
实例：
$("#formId").validate({
rules:{
username:"required",
password:{
required:true,
rangelength:[2,5]
},
repassword:{
equalTo:"[name='password']"
}
},
messages:{
username:{
required:"不能为空"
},
password:{
rangelength:"长度{0}-{1}之间"
}
}
});
案例实现:
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$().ready(function () {
$("#formId").validate({
rules:{
loginname:{
required:true,
minlength:2,
maxlength:5
},
loginpwd:{
required:true,
number:true
},
reloginpwd:{
equalTo:"[name='loginpwd']"
},
email:"email",
username:{
required:true,
rangelength:[2,5]
},
gender:{
required:true
},
birthday:"dateISO"
/*,
verifyCode:{
remote:"t.html"
},*/
},
messages:{
gender:{
required:"性别必须勾选"
}
}
});
});
</script>
补充说明
单选框:需提供一个label标签
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
在指定位置显示错误信息
* class 必须是error
* for 必须设置错误对象
<label for="gender" class="error"></label>
复选框:需提供一个value=””的选项
网友评论