BlogJava-业精于勤荒于嬉，行成于思毁于随-随笔分类-Jquery案例积累

jQuery_通过遮罩层和滑动块实现一个信息提示功能

都较瘦 — Wed, 25 Mar 2015 08:48:00 GMT

功能如题，接下来思路如下：
1：首先需要一个遮罩层，遮罩层需要遮挡住页面的整个内容，使得页面不可用。于是就有了一个遮罩层，新增一个样式给遮罩层，使用半透明的样式

1 .coverDiv{
2     display: none;
3     position: fixed;
4     top: 0;
5     left: 0;
6     width: 100%;
7     height: 100%;
8     background-color: rgb(47, 79, 79);
9     opacity: 0.6;
10     filter: alpha(opacity = 60);/*半透明兼容*/
11 }

2：接下来要有一个滚动的块元素。于是就有了一个块元素，样式如下

1 .msgDiv {
2   display: none;
3   border-top-left-radius: 8px;/*注意IE*/
4   border-bottom-left-radius: 8px;
5   position: fixed;
6   right: -300px;
7   width: 300px;
8   height: 400px;
9   top: 50%;
10   margin-top: -200px;
11   background-color: #fff;
12 }

3:水平的滑动，可以使用jQuery提供的animate方法，控制元素的margin-left或者margin-right来实现

1 //提示信息呈现
2         $("触发提示信息呈现的元素").click(function(){
3             $(".coverDiv").fadeIn(200);
4             $(".msgDiv").css("display","block");
5             $(".msgDiv").animate({
6                 marginRight:'300'
7             },300);
8         });
9
10         //点击遮罩层，提示信息隐藏
11         $(".coverDiv").click(function(){
12             $(".coverDiv").fadeOut(200);
13
14             $(".msgDiv").css("display","block");
15             $(".msgDiv").animate({
16                 marginRight:'-=300'
17             },300);
18         });

在此记述了实现该功能的一种思路，抛砖引玉，如果你有更好的思路，欢迎留言共勉。

都较瘦 2015-03-25 16:48 发表评论

jQuery_感受插件_基于包装集实现一个简单的插件

都较瘦 — Wed, 03 Dec 2014 14:32:00 GMT

通过直接对jQuery.属性的方式去添加插件实在是有点土，拓展的方法应该像jQuery那样，直接对包装集进行操作，$("XXX").fun()，这样以来就需要查看jQuery的源码，了解默认方法的定义方式。jQuery将对包装集操作的方法定义在了jQuery的prototype中，并且添加了一个别名jQuery.fn，基于这种规则，实现一个简单的插件来感受一下基于包装集的插件，jquery.wrapperBasedFun.plugIn.js

1 (function($){
2     //演示，仅仅是修改包装集中元素的字体颜色
3     $.fn.changeColor = function(color){
4         //注意，此处的this已经是包装集了，不需要再添加$()来包装为jQuery对象了
5         this.each(function(){
6             //此处的this又是Dom节点了，需要添加$()来包装为jQuery对象
7             $(this).css("color",color);
8         });
9         //链式编程是一个很好的特性，插件一定要返回包装集来支持链式编程
10         return this;
11     };
12 })(jQuery);
13

测试页面

1 DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4     <head>
5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6         <title>Jquery_18_基于包装集的插件title>
7         <meta name="author" content="Administrator" />
8         <script type="text/javascript" src="jquery-1.11.1.js">script>
9
10         <script type="text/javascript" src="jquery.wrapperBasedFun.plugIn.js">script>
11         <script type="text/javascript">
12             $(function(){
13                 //直接对包装集进行操作，并且支持链式编程
14                 $("li").changeColor("red").css("fontSize","25px");
15             });
16         script>
17     head>
18     <body>
19         <ul>
20             <li>你li>
21             <li>我li>
22             <li>他li>
23         ul>
24     body>
25 html>
26

案例很简单，只是记录一下基于包装集插件的拓展手段。

都较瘦 2014-12-03 22:32 发表评论

jQuery_感受插件_一个简单的文本处理插件

都较瘦 — Tue, 02 Dec 2014 16:07:00 GMT

插件，之前没有动手写的时候觉得很神秘，给人一种很难的感觉，但是万事开头难，先从最简单的入手，记录一下自己的学习轨迹。插件嘛，顾名思义，额外的组件，为了拓展功能而存在，那么Jquery的插件自然而然就是为了更加丰富Jquery的功能。
一般来说，插件需要定义在一个单独的js文件中，网上很多的插件也都是这么做的，一来因为它是“插件”嘛，应该独立存在，不应该侵入代码，二来也可以清晰的维护好插件的内容。定义插件之前，我们应该都清楚在Jquery中，$是jQuery的别名，通过$.来调用库中的方法也就是通过jQuery.来调用，此时可能会有一个问题，$符号是为数不多的可以当做别名的符号，很多插件也都用$来当做自己的别名，那么类库和类库之间就可能存在冲突，根据实际情况，我们需要通过调用jQuery.noConflict();方法来消除$别名的冲突，该方法使得jQuery让出$别名，不和其他类库冲突，如此一来，就只能通过jQuery.来调用方法。
下面就给出一个插件的案例jquery.plugIn.demo.js，在插件js中，为了兼顾开发效率并缩减代码量，使用闭包的方式将jQuery关键字传入，在闭包中继续使用$作为别名。

1 //如果有必要，消除$符号的冲突
2 //jQuery.noConflict();
3 (function($){
4
5     //一个简单的插件方法
6     $.simple = function(name){
7         alert("hello " + name);
8     };
9
10     //一个稍复杂的插件方法。如果某个函数需要多个参数，或含有可选的参数，使用options（对象的方式）对默认参数进行覆盖
11     //p1和p2作为必选参数，options参数传入可选参数将默认数值进行覆盖
12     $.complex = function(p1,options,p2){
13         //alert(p1 + "  " + options + "  " + p2);
14
15         var ops = $.extend({
16             p3:'#3',
17             p4:'#4',
18             p5:'#4'
19         }, options||{});
20
21         alert(p1 + " - " + p2 +" - ops:" + "p3=" + ops.p3 + ";p4=" + ops.p4 + ";p5=" + ops.p5);
22
23     };
24 })(jQuery);
25

测试页面：

基于上述两个简单的插件方法，就可以试着写一个具有功能性的插件了，下面实现一个处理长文本标题的小插件jquery.simpleTextCutter.plugIn.js

1 (function($){
2 //文本截留插件
3     $.toFixedStr = function(OriStr,options){
4         var settings = $.extend({
5             fill:".",//可指定的省略符号
6             length:12,//可指定的保留长度
7             fillLength:3//可指定的省略符号显示长度，例如"XXX..."
8         },options||{});
9
10         if(OriStr.length >12){
11             OriStr = OriStr.substring(0,12);
12             for(var i = 0;i13                 OriStr+=settings.fill;
14             }
15         }
16         return OriStr;
17     };
18
19 })(jQuery);
20

测试页面

以上就是实现jQuery插件的一个初步的感受

都较瘦 2014-12-03 00:07 发表评论

jQuery_练习一个前端“换一换”功能

都较瘦 — Tue, 25 Nov 2014 13:09:00 GMT

需求的极简概要：实现“换一换”按钮的功能，点击之后，换另一批对应的品牌

刚开始的时候考虑使用ajax请求数据，之后通过js在页面上填充到指定位置，但是真是懒得给这个ajax请求单独再配一个请求映射了，干脆直接在后台把需要的内容全部拼成JSON字符串，直接在前台解析，分页。

页面比较简单，就不上html代码了，大概思路就是：两个“换一换”按钮分别对应两套数据，共用一个分页的方法，分别传入各自的页数，显示对应页数的内容。当然了，实现“换一换”的方法多种多样，我在此只是记录一下自己的思路，欢迎批评指教，拍砖轻拍，爱护新人，3Q。

节约口水，直接上代码~

1 $(function(){
2
3         //“换一换”功能家居，杂货点击计数器
4         var jiajubrandCount = 0;
5         var zahuobrandCount = 0;
6
7         //初始化家居品牌内容
8         jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
9         //初始化杂货品牌内容
10         zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
11
12         //家居换一换点击
13         $("#jiajuBrandChange").click(function(){
14             jiajubrandCount = ClickToChangeBrand("jiajubrand","jiajubrandval",jiajubrandCount);
15         });
16
17         //杂货换一换点击
18         $("#zahuoBrandChange").click(function(){
19             zahuobrandCount = ClickToChangeBrand("zahuobrand","zahuobrandval",zahuobrandCount);
20         });
21
22         //品牌“换一换”功能
23         //container:目标容器
24         //valSrc:值存放的容器
25         //brandCount:计数
26         function ClickToChangeBrand(container,valSrc,brandCount){
27
28             //$("#" + container).empty();//清空既存内容
29             var s = $("#" + valSrc).val(); //取得品牌所有数据
30             var obj = $.parseJSON(s.toString());//转换为JSON
31             var totalCount = obj.length;//总记录数
32             var perPageCount = 20;//预定每页显示数
33             var pageCount = 0;//总页数
34             var actualPerPageCount = 0;//实际每页的显示数
35             var strTotal = "";//待打印内容的缓冲变量
36
37             var tempRs = totalCount%perPageCount;//根据实际品牌数计算总页数
38             if(tempRs!=0){
39                 pageCount = parseInt(totalCount/perPageCount) + 1;
40             }
41             else{
42                 pageCount = parseInt(totalCount/perPageCount);
43             }
44
45             //取实际每次需要显示的记录数，若最后一页不足一页的
46             if(brandCount * perPageCount + perPageCount > totalCount){
47                 actualPerPageCount = totalCount - brandCount * perPageCount;
48             }
49             else{
50                 actualPerPageCount = perPageCount;
51             }
52
53 　　　　　　　/* alert("计数器:"+brandCount);
54             alert("实际每页数:"+actualPerPageCount);
55             alert("预定每页数:"+perPageCount);
56             alert("总页数："+ pageCount); */
57
58             //获取当前页的内容
59             for(i = brandCount * perPageCount;i < brandCount * perPageCount + actualPerPageCount;i++){
60                 //obj[i].title为显示标题，obj[i].name为该品牌的类目id
61                 strTotal += "" + obj[i].title + "";
62             }
63
64             //计数器大于等于页数的时候归零
65             brandCount++;
66             if(brandCount>=pageCount){
67                 brandCount = 0;
68             }
69
70             //淡出
71             $("#" + container).empty().append(strTotal).hide().stop(true,true).fadeIn("slow");
72
73             return brandCount;
74         }
75     });

都较瘦 2014-11-25 21:09 发表评论

jQuery_练习将表格内容转换为对象数组

都较瘦 — Tue, 25 Nov 2014 13:03:00 GMT

如题

1 DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5     <head>
6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7         <title>Jquery_属性操作title>
8         <meta name="author" content="Administrator" />
9         <script type="text/javascript" src="jquery-1.11.1.js">script>
10         <script type="text/javascript">
11
12             $(function(){
13                 //属性名
14                 var props = ["num","name","class","grade"];
15                 var objs = new Array();
16
17                 $("tbody tr").each(function(){
18                     var obj = new Object();
19                     $(this).find("td").each(function(n){
20                         obj[props[n]] = $(this).html();
21                     });
22                     objs.push(obj);
23                 });
24
25                 for(var i=0;i<objs.length;i++){
26                     alert(objs[i]["num"] + " -- " + objs[i]["name"] + " -- " + objs[i]["class"] + " -- " + objs[i]["grade"]);
27                 }
28
29             });
30
31         script>
32
33     head>
34     <body>
35         <table width="500px" height="300px" cellpadding="0px" cellspacing="0px" border="1px solid black">
36             <thead>
37                 <tr><th>编号th><th>姓名th><th>班级th><th>年级th>tr>
38             thead>
39             <tbody>
40                 <tr><td>01td><td>duyt111td><td>01classtd><td>01gradetd>tr>
41                 <tr><td>02td><td>duyt222td><td>02classtd><td>02gradetd>tr>
42                 <tr><td>03td><td>duyt333td><td>03classtd><td>03gradetd>tr>
43                 <tr><td>04td><td>duyt444td><td>04classtd><td>04gradetd>tr>
44                 <tr><td>05td><td>duyt555td><td>05classtd><td>05gradetd>tr>
45                 <tr><td>06td><td>duyt666td><td>06classtd><td>06gradetd>tr>
46             tbody>
47         table>
48     body>
49 html>
50

都较瘦 2014-11-25 21:03 发表评论