多个tab栏切换class封装

  1. <style>
             *{margin:0;padding:0;}
             ul{list-style:none;}
             .box {
                 width: 350px;
                 height: 300px;
                 border:1px solid #ccc;
                 margin: 100px auto;
                 overflow: hidden;
             }
             .mt span {
                 display: inline-block;
                 width: 80px;
                 height: 30px;
                 background-color: pink;
                 text-align: center;
                 line-height: 30px;
                 cursor: pointer;
             }
             .mt span.current {
                 background-color: purple;
             }
             .mb li {
                 width: 100%;
                 height: 270px;
                 background-color: purple;
                 display: none;
             }
             .mb li.show {
                 display: block;
             }
         </style>
         <script>
             window.onload = function(){
                 //要想多个盒子不相互影响 ,我们可以通过id 给他们分开
                 //封装tab栏切换函数
                 function tab(obj){
                     var target = document.getElementById(obj);
                     var spans = target.getElementsByTagName("span");
                     var lis = target.getElementsByTagName("li");
                     for(var i=0;i<spans.length;i++)
                     {
                         spans[i].index = i;
                         spans[i].onmouseover = function(){
  2.  
  3.                          for(var j=0; j<spans.length;j++)
                             {
                                 spans[j].className = "";
                                 lis[j].className = "";
                             }
                             this.className = "current";
                             lis[this.index].className = "show";
                         }
                     }
                 }
                 tab("one");
                 tab("two");
                 tab("three");
              }
         </script>
  4. </head>
  5. <body>
  6. <div class="box" id="one">
         <div class="mt">
             <span class="current">新闻</span>
             <span>体育</span>
             <span>娱乐</span>
             <span>八卦</span>
         </div>
         <div class="mb">
             <ul>
                 <li class="show">新闻模块</li>
                 <li>体育模块</li>
                 <li>娱乐模块</li>
                 <li>八卦模块</li>
             </ul>
         </div>
  7. </div>
  8. <div class="box" id="two">
         <div class="mt">
             <span class="current">新闻</span>
             <span>体育</span>
             <span>娱乐</span>
             <span>八卦</span>
         </div>
         <div class="mb">
             <ul>
                 <li class="show">新闻模块</li>
                 <li>体育模块</li>
                 <li>娱乐模块</li>
                 <li>八卦模块</li>
             </ul>
         </div>
  9. </div>
  10. <div class="box" id="three">
         <div class="mt">
             <span class="current">新闻</span>
             <span>体育</span>
             <span>娱乐</span>
             <span>八卦</span>
         </div>
         <div class="mb">
             <ul>
                 <li class="show">新闻模块</li>
                 <li>体育模块</li>
                 <li>娱乐模块</li>
                 <li>八卦模块</li>
             </ul>
         </div>
  11. </div>
  12. </body>

两个小循环(比较少用)

以前所学:for(初始化;条件;增量){}

新的:while() 当 do{} while{}

while(条件){ 语句 }

只要条件满足,就一直执行

  1. var j = 1;
  2. while(j<=100)
  3. {
         sum1+=j;
         j++;
  4. }
  5. console.log(sum1);

结果5050

如果用for的话,一般主要是用for

  1. var sum = 0, sum1 = 0, sum2 = 0;
  2. for(var i=1;i<=100;i++)
  3. {
         sum = sum + i;
  4. }
  5. console.log(sum);

结果5050

do{} while()语句

  1. var k = 1;
  2. do {
         sum2 += k;
         k++;
  3. }
  4. while(k<=100);
  5. console.log(sum2);

结果5050

while()与do()while()的区别是什么?

do()while()先执行后判断,至少执行一次。

while()先判断,如果不符合就不进行,如果符合再执行。不一定,有可能一次也不执行。

switch多分支语句

switch跟if else几乎是一样的,但是效率会更高。可以优先考虑switch。

switch(参数)

{

case 参数1:

语句;

break; 退出的意思

}

{

case 参数2:

语句;

break; 退出的意思

}

{

default; 默认(这句可有可不有)

语句;

}

  1.     <script>
             window.onload = function(){
  2.  
  3.              //获取元素
                 var txt = document.getElementById("txt");
                 var btn = document.getElementById("btn");
                 btn.onclick = function(){
                     var val = txt.value;
                     switch(val)
                     {
                         case "苹果":
                             alert("苹果的价格是: 5元");
                             break;
                         case "香蕉":
                             alert("香蕉的价格是: 2元");
                             break;
                         case "梨":
                             alert("梨的价格是: 1.5元");
                             break;
                         case "大白菜":
                             alert("大白菜的价格是: 9毛");
                             break;
                         default:
                             alert("今天没进货");
                     }
                 }
             }
         </script>
  4. </head>
  5. <body>
  6. <input type="text" id="txt"/>  <button id="btn">查询价格</button>

下拉菜单事件onchange

  1. <style>
             body {
                 background: url(images/chun1.jpg) no-repeat;
             }
         </style>
         <script>
             window.onload = function() {
                 var cho = document.getElementById("choose");
                cho.onchange = function() {
                    var val = this.value;
                 switch (val)
                 {
                     case "1":
                         document.body.style.background="url(images/chun1.jpg) no-repeat";
                         break;
                     case "2":
                         document.body.style.background="url(images/xia1.jpg) no-repeat";
                         break;
                     case "3":
                         document.body.style.background="url(images/qiu1.jpg) no-repeat";
                         break;
                     case "4":
                         document.body.style.background="url(images/dong1.jpg) no-repeat";
                         break;
                 }
                }
             }
         </script>
  2. </head>
  3. <body>
  4. <select  id="choose">
         <option value="1">春意绵绵</option>
         <option value="2">夏日炎炎</option>
         <option value="3">秋风瑟瑟</option>
         <option value="4">冬雪皑皑</option>
  5. </select>
  6. </body>

星座运势案例

这个案例的重点是选择下拉列表,有三个元素跟着一起改变。其中包含精灵图,以及星星的长度变化。

  1. <script>
             window.onload = function() {
                 function $(id) {return document.getElementById(id)};
                 var textArr = ["白羊座运势","金牛座运势","双子座运势","巨蟹座运势","狮子座运势","处女座运势","天秤座运势","天蝎座运势","射手座运势","摩羯座运势","水瓶座运势","双鱼座运势"];
                 var arr = [10,9,6,9,7,7,9,8,9,9,7,7];
                 $("stAr").style.width = arr[0]*8+"px";
                 $("sele").onchange = function() {
                     $("ico").style.backgroundPosition="0 "+(-50*this.value)+"px";
                     $("content").innerHTML = textArr[this.value];
                     $("stAr").style.width = arr[this.value]*8+"px";
  2.  
  3.              }
  4.  
  5.          }
         </script>
  6. </head>
  7. <body>
  8. <div class="box">
         <div class="dt">星座运势</div>
         <div class="dd">
             <div class="dd-t">
                 <div class="icon" id="ico"></div>
                 <div class="right">
                     <select name="" id="sele">
                         <option value="1">白羊座 03.21-04.19</option>
                         <option value="2">金牛座 03.21-04.19</option>
                         <option value="3">双子座 03.21-04.19</option>
                         <option value="4">巨蟹座 03.21-04.19</option>
                         <option value="5">狮子座 03.21-04.19</option>
                         <option value="6">处女座 03.21-04.19</option>
                         <option value="7">天秤座 03.21-04.19</option>
                         <option value="8">天蝎座 03.21-04.19</option>
                         <option value="9">射手座 03.21-04.19</option>
                         <option value="10">摩羯座 03.21-04.19</option>
                         <option value="11">水瓶座 03.21-04.19</option>
                         <option value="12">双鱼座 03.21-04.19</option>
                     </select>
  9.  
  10.                  <div> 今日运势:
                         <span class="yunshi">
                             <span class="star" id="stAr"></span>
                        </span>
                     </div>
                 </div>
             </div>
             <div class="dd-b" id="content">
                 这几天的财运都很强,但是危机总在不知不觉之中发生了,例如:因为太过乐观而误判情势,导致投...[详细]
             </div>
         </div>
  11. </div>
  12. </body>

数组的常用方法

添加数组

push()方法可以向数组的末尾添加一个或多个元素,并返回新的长度。

  1. var arr = [1,3,5];
  2. arr.push(7,9);  // 把 7 9 放到 arr 数组的后面
  3. console.log(arr);

结果是[1,3,5,7,9]

unshift()可向数组的开头添加一个或更多元素,并返回新的长度。

  1. var demo = [1,3,5];
  2. demo.unshift(0);
  3. console.log(demo);

结果是[0,1,3,5]

注意:

  1. var dom = [1,3,5];
  2. console.log(dom.push(7));  // 返回的是 数组的长度

结果是4,因为返回的是数组的长度。

删除数组内容

pop()删除最后一个元素,返回值是返回最后一个值。

  1. var arrdele = [1,3,5];
  2. console.log(arrdele.pop());  //返回的是 5
  3. arrdele.pop();  // 删除3
  4. console.log(arrdele);   //  结果  1

shfit()删除第一个元素,返回值是第一个值

  1. var arrdele = [1,3,5];
  2. arrdele.shfit();  // 删除3
  3. console.log(arrdele);   //  结果  3,5

连接两个数组

concat()该方法用于连接两个或多个数组,它不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

aa.concat(bb);

  1. var aa = [1,3,5];  var bb = ["a","b"];
  2. console.log(aa.concat(bb));     /*结果[1,3,5,"a","b"]*/

join()把数组转换为字符串(常用)

arrayObject.join(separator)

数组名.join(符号) +-*/都可以转换。

  1. var txt = ["aa","bb","cc"];
  2. console.log(txt.join("*"));

结果aa*bb*cc

例子:var arr = [1,2,3,4];

var test = arr.join(“-”);

console.log(test) 1-2-3-4

var arr = [1,2,3,4];

arr.join(“*”);

注意:console.log(arr); [1,2,3,4] 为什么不变了,因为输出的是数组,数组是不变的,如果赋予一个变量承载,那么这个变量是改变的。

split()把字符串转换为数组(常用)

  1. var txt = "aa-bb-cc";
  2. console.log(txt.split("-"));

结果是[aa,bb,cc]

DOM(重点)

文档对象模型,处理网页内容的方法和接口。

DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能够让js操作html元素而制定的一个规范。

DOM

节点

getElementById() id 访问节点

getElementsByTagName() 标签访问节点

getElementsByClassName() 类名 有兼容性问题

主流浏览器支持 ie 67 8 不支持 怎么办? 我们自己封装自己的 类 。

封装自己的class类(以后用的多,要多写)

原理:我们要取出所有的盒子,利用遍历的方法,通过每一个盒子的className来判断,如果相等就留下。

封装一个class类(简单版),最后得出所要求的class类的个数。封装后可以键一个js文件,存进去以后直接调用。

  1. <style>
             div {
                 width: 100px;
                 height: 100px;
                 background-color: pink;
                 margin: 10px;
             }
         </style>
         <script>
             window.onload = function() {
                 function getClass(classname) {
                     if(document.getElementsByClassName)
                     {
                         return document.getElementsByClassName(classname);
                     }
                     var arr = [];
                     var dom = document.getElementsByTagName("*");
                     for(var i= 0;i<dom.length;i++)
                     {
                         if(dom[i].className==classname)
                         {
                             arr.push(dom[i]);
                         }
                     }
                     return arr;
                 }
                 console.log(getClass("demo").length);
             }
         </script>
  2.  
  3. </head>
  4. <body>
  5. <div></div>
  6. <div class="demo"></div>
  7. <div class="demo"></div>
  8. <div></div>
  9. <div></div>
  10. <div class="demo"></div>
  11. <div></div>
  12. <div></div>
  13. <div class="demo"></div>
  14. <div></div>
  15. </body>

完善版(当类名中一个class是多个类名组成该如何取)

  1. <style>
             div {
                 width: 100px;
                 height: 100px;
                 background-color: pink;
                 margin: 10px;
             }
         </style>
         <script>
             window.onload = function() {
  2.  
  3.              // 封装自己的类名
                 function getClass(classname)
                 {
                     //判断支持否
                     if(document.getElementsByClassName)
                     {
                         return document.getElementsByClassName(classname);
                     }
                     var arr = []; //用于返回 数组
                     var dom = document.getElementsByTagName("*");
                     for(var i=0;i<dom.length;i++)  // 遍历所有的 盒子
                     {
                         var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
                         //  ["demo","test"];
                         for(var j=0;j<txtarr.length;j++)  // 遍历 通过类名分割的数组
                         {
                             if(txtarr[j] == classname)
                             {
                                 arr.push(dom[i]); // 我们要的是 div
                             }
                         }
                     }
                     return arr;
                 }
                 var test=getClass("test");
                 for(var i=0;i<test.length;i++)
                  {
                  test[i].style.backgroundColor = 'purple';
                  }
             }
  4.  
  5.      </script>
  6. </head>
  7. <body>
  8. <div></div>
  9. <div class="demo"></div>
  10. <div class="test"></div>
  11. <div></div>
  12. <div></div>
  13. <div class="demo test one"></div>
  14. <div class="demo one"></div>
  15. <div></div>
  16. <div class="demo"></div>
  17. <div class="one two test"></div>
  18.  
  19. </body>

如果是取盒子里面的长类名,那么要使用id父亲来进行

  1. <style>
             div {
                 width: 100px;
                 height: 100px;
                 background-color: pink;
                 margin: 10px;
             }
         </style>
         <script>
             window.onload = function() {
                 // 封装自己的类名
                 function getClass(classname,id)
                 {
                     //分为  支持   classname
                     if(document.getElementsByClassName)
                     {
                         //有id 的情况
                         if(id)
                         {
                             var eleId = document.getElementById(id);
                             return eleId.getElementsByClassName(classname);
                         }
                         else   // 没有id
                         {
                             return document.getElementsByClassName(classname);
                         }
                     }
                     //不支持的情况
                     if(id)
                     {
                         var eleId = document.getElementById(id);
                         var dom = eleId.getElementsByTagName("*");
                     }
                     else
                     {
                         var dom = document.getElementsByTagName("*");
                     }
  2.  
  3.                  var arr = [];
                     for(var i=0;i<dom.length;i++)
                     {
                         var txtarr = dom[i].className.split(" ");
                         for(var j=0;j<txtarr.length;j++)
                         {
                             if(txtarr[j] == classname)
                             {
                                 arr.push(dom[i]);
                             }
                         }
                     }
                     return arr;
                 }
  4. //  console.log(getClass("test","one").length);
                 var aa = getClass("test","one");
                 for(var i=0;i<aa.length;i++)
                 {
                     aa[i].style.backgroundColor = 'purple';
                 }
             }
         </script>
  5. </head>
  6. <body>
  7. <div></div>
  8. <div class="demo"></div>
  9. <div class="test"></div>
  10. <div></div>
  11. <div></div>
  12. <div id="one">
         <div class="demo test one"></div>
         <div class="demo one"></div>
         <div></div>
         <div class="demo"></div>
         <div class="one two test"></div>
  13. </div>
  14. </body>

判断真假

我们用条件语句来判断5大数据类型中的真假;

数据

结论

数字类型

所有数字都是真,0是假

字符串

所有字符串都是真,’ ’串是假

对象

所有对象都是真,null是假

未定义

undefined是假,没有真

节点关系

父节点:parentNode(常用)

demo.parentNode.appendChild(demo.cloneNode());把demo复制一份,然后放到自己爸爸的孩子里,也就是给自己添加一个兄弟。

关闭二维码案例:

  1. <script>
         window.onload = function(){
             var x = document.getElementById("x");
             x.onclick = function(){
                 this.parentNode.style.display = "none";
                 // 关掉的是他的 父亲
             }
         }
  2. </script>

兄弟节点

nextSibling 下一个兄弟 亲的 ie 678 认识

nextElementSibling 其他浏览器认识的

previousSibling 上一个兄弟 ie 678 认识

previousElementSibling 其他浏览器认识的

我们想要兼容 我们可以合写 || 或者 (ie和其他浏览器都兼容,one的下一个兄弟div的颜色为红色)必须先写正常浏览器,最后在写ie678

  1. var div = one.nextElementSibling || one.nextSibling;
  2. div.style.backgroundColor = "red";

下一个兄弟例子:

  1. <script>
             window.onload = function(){
                 var one = document.getElementById("one");
                 //one.nextSibling.style.backgroundColor = "red";
                 var div = one.nextElementSibling || one.nextSibling;
                 div.style.backgroundColor = "red";
  2.  
  3.          }
         </script>
  4. </head>
  5. <body>
  6. <ul>
         <li>123123</li>
         <li>123123</li>
         <li id="one">123123</li>
         <li>123123</li>
         <li>123123</li>
         <li>123123</li>
         <li>123123</li>
         <li>123123</li>
  7. </ul>
  8. </body>

子节点(很少用)

firstChild 第一个孩子 ie678

firstElementChild 第一个孩子 正常浏览器

var one.firstElementChild || one.firstChild;

lastChild 最后一个孩子 ie678

lastElementChild 最后一个孩子 正常浏览器

常用的方式,子节点

childNodes 选出全部的孩子

childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (嫡出)

火狐 谷歌等高本版会把换行也看做是子节点。nodeType==1就只会获取元素节点,不把换行也当成是子节点了。

拓展nodeType==2属性节点,nodeType==3文本节点

  1. <body>
  2. <ul id="ul">
         <li>123</li>
         <li>123</li>
         <li>123</li>
  3. </ul>
  4. <script>
         var ul = document.getElementById("ul");
         var childrens = ul.childNodes;  // 选择全部的孩子  亲的
         //alert(childrens.length);
         for(var i=0;i<childrens.length;i++)
         {
             if(childrens[i].nodeType == 1)
             {
                 childrens[i].style.backgroundColor = "pink";
             }
         }
  5.  
  6. </script>
  7. </body>

常用(重要)

children选取所有孩子,只包括元素节点。庶出,但是最好用。

DOM节点操作

新建节点,插入节点,删除节点,克隆节点

创建节点:

var div = document.createElement(“li”); 比如新创建一个li标签(节点)

插入节点:(只能创建子节点)

appendChild(); 添加子节点,添加孩子。并且放在最后面。如果之前有子节点,那么就在这个节点之后,再插入一个子节点。

insertBefore(); 插入谁谁谁的前面

insertBefore(插入的节点,参照节点);

如果第二个参数,也就是参照节点为null,那么则默认这个新生盒子放到最后面。怎么参照节点为null呢?在没有参照节点的时候用null。

childrens[0]意思是第一个孩子

childrens[0] == firstChild 虽然相等,但是firstChild第一个空格也能算出来,会出错,所以使用childrens[0]代表第一个元素节点更好。最后意思是把test放在最前面。

删除节点

removeChild(); 只能删除孩子节点。

克隆节点

cloneNode(); 复制节点

括号里面可以跟参数,如果里面是true,则深层复制,除了复制本盒子,还复制子节点。如果false,则浅层复制,只复制本节点,不复制子节点。

  1. <body>
  2. <div id="demo">
         <div id="one"></div>
         <div id="xiongda"></div>
  3. </div>
  4. <script>
         var demo = document.getElementById("demo");  /*获取大盒子demo*/
         var childrens = demo.children;   /*代表大盒子里的所有子盒子*/
         // 创建节点
         var firstDiv = document.createElement("div");    /*新建了一个名为firsDiv的div*/
         // 添加节点
         demo.appendChild(firstDiv);     /*把firsDiv这个div放在demo里的子盒子中最后*/
         var test = document.createElement("div");    /*新建了一个text的div*/
  5.  
  6.      demo.insertBefore(test,null);      /*没有参照物用null,并且默认放到最后一个*/
         //移除节点
         var da = document.getElementById("xiongda");     /*获取id为xiongda并赋予变量名da*/
         demo.removeChild(da);      /*移除xiongda这个节点*/
         //克隆节点
         var last = childrens[0].cloneNode();    /*把第一个孩子克隆*/
         demo.appendChild(last);               /*把新克隆的放在子盒子中最后*/
         demo.parentNode.appendChild(demo.cloneNode(true));  /*在demo的父亲里插入一个,这个是以demo为原型,并深层克隆*/
         //他的爸爸添加孩子  就是我的兄弟
  7.  
  8. </script>
  9. </body>

function tab(obj){}

tab(“a”);

tab(“b”);

tab(“c”);

这样的形式,在想多个盒子相互不影响,要单个控制调用的时候用,一般用ID给他们分开。封装tab栏切换函数。例子:多个tab栏切换。

function $(id){}

当有一个动作时,例如选择或者点击时,有很多的id类会有样式或者其他的变化,可以使用id的调用方法。

对于动态添加节点,可以先把整体样式做出来,然后再做添加节点,原本的类以及可以自动生成的删除即可。

js基础第四天的更多相关文章

  1. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

  2. Node.js基础学习四之注册功能

    前言:在Node.js学习(二)和(三)中介绍了如何在Node.js 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端 需求:实现注册功能 为了区分登录和注册是两个不同的请求,在端口后面加上 ...

  3. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  4. [妙味JS基础]第四课:JS数据类型、类型转换

    知识点总结 JS数据类型:number数字(NaN).string字符串.boolean布尔值.函数类型.object对象(obj.[].{}.null).undefined未定义 typeof 用来 ...

  5. JS基础(四)之jQuery

    31.jQuery(http://jquery.com/)是一个快速.简洁的JavaScript框架. 它封装了JavaScript常用的功能代码,提供一种便捷的JavaScript设计模式,优化HT ...

  6. JS基础(四)运算符

    一.比较运算符 1.== : 判断两边值是否相等 2.>= : 判断左边的值是否大于或等于右边的值 3.<= : 判断左边边的值是否小于或等于右边的值 4.>   : 判断左边的值是 ...

  7. JS基础学习四:绑定事件

    添加事件 IE: attachEvent Other: addEventListener var button = document.getElementById("buttonId&quo ...

  8. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  9. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

随机推荐

  1. [Unity3D]支持的视频格式

    Unity3d只支持 .mov, .mpg, .mpeg, .mp4, .avi, .asf这些格式.

  2. python读写配置文件

    #coding:utf-8 import ConfigParser class Conf(): def __init__(self,name): self.name = name self.cp = ...

  3. [Ruby on Rails系列]5、专题:Talk About SaSS

    This is my presentation in the Rails lecture of Hosei University. I will introduce SaSS by 5 example ...

  4. 使用IntelliJ Idea创建Spring MVC项目

  5. JS动态特性

    var arr=[]; arr['js']='jquery'; arr['css']='oocss'; var obj={}; for(var i in arr) { obj[i]=arr[i]; } ...

  6. Java API ——Character类

    1.Character类的概述 · Character 类在对象中包装一个基本类型 char 的值 · 此外,该类提供了几种方法,以确定字符的类别(小写字母,数字,等等),并将字符从大写转换成小写,反 ...

  7. 区分jquery中的offset和position

    一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...

  8. java事务管理(二)

    数据库事务和Spring事务是一般面试都会被提到,很多朋友写惯了代码,很少花时间去整理归纳这些东西,结果本来会的东西,居然吞吞吐吐答不上来. 下面是我收集到一些关于Spring事务的问题,希望能帮助大 ...

  9. Descending Order

    Descending Order Description: Your task is to make a function that can take any non-negative integer ...

  10. maven-bundle-plugin插件, 用maven构建基于osgi的web应用

    maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中 今天终于把maven-bundle-plugin不能导出META-INF中的内容到Ex ...