九、jQuery在开发实例

作者: 圣贤与无赖 | 来源:发表于2018-08-27 21:37 被阅读9次

一、使用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	“@”或者”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=””的选项

九、jQuery在开发实例

一、使用JQuery完成页面的弹出广告的效果

二、使用JQuery完成表格的隔行换色

三、使用JQuery完成复选框的全选和全不选

四、使用JQuery完成省市联动

五、使用JQuery完成下拉列表的左右选择

五、JQuery使用validate插件完成校验

1. validate插件下载

2. 导入

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

九、jQuery在开发实例

一、 使用JQuery完成页面的弹出广告的效果

二、使用JQuery完成表格的隔行换色

三、使用JQuery完成复选框的全选和全不选

四、使用JQuery完成省市联动

五、使用JQuery完成下拉列表的左右选择

五、JQuery使用validate插件完成校验

1. validate插件下载

2. 导入

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、使用JQuery完成页面的弹出广告的效果