每日记载内容总结18
1.java实现两个collection的交集和并集
交集:
//求出交集 strList2.retainAll(strList); System.out.println("交集大小："+ strList2.size());
并集:
//求出并集 strList2.removeAll(strList); strList2.addAll(strList); System.out.println("并集大小："+ strList2.size());
不用retainAll实现两个collection集合的交集
public static Collection<Account> getMixedCollect(Collection<Account> accountsOne ,Collection<Account> accountsTwo){ Collection<Account> mixedAccounts = new ArrayList<Account>(); if (accountsOne != null && accountsOne.size() > 0 && accountsTwo !=null && accountsTwo.size() > 0) { Iterator<Account> iteratorTwo = accountsTwo.iterator(); for (Iterator<Account> iteratorOne = accountsOne.iterator() ; iteratorOne.hasNext();) { Account accountO = (Account)iteratorOne.next(); while(iteratorTwo.hasNext()){ Account accountT = (Account)iteratorTwo.next(); if (accountO.getId().equals(accountT.getId())) { mixedAccounts.add(accountT); } } } } return mixedAccounts ; }
后来经测试，发现只有iteratorOne的第一个数据与iteratorTwo的所有数据进行了比较，而iteratorOne剩下的数据没有进行比较以及放入mixedAccounts ,原因如下:
iteratorTwo第一次迭代完之后，迭代器的指向已经指向最后，而不会回到第一个，因此没有进入while方法，
新代码如下：
public static Collection<Account> getMixedCollect(Collection<Account> accountsOne ,Collection<Account> accountsTwo){ Collection<Account> mixedAccounts = new ArrayList<Account>(); if (accountsOne != null && accountsOne.size() > 0 && accountsTwo !=null && accountsTwo.size() > 0) { for (Iterator<Account> iteratorOne = accountsOne.iterator() ; iteratorOne.hasNext();) { Account accountO = (Account)iteratorOne.next(); Iterator<Account> iteratorTwo = accountsTwo.iterator(); while(iteratorTwo.hasNext()){ Account accountT = (Account)iteratorTwo.next(); if (accountO.getId().equals(accountT.getId())) { mixedAccounts.add(accountT); } } } } return mixedAccounts ; }
2.在css选择器中选择checkbox
input { background-color:expression((this.type=="checkbox" ? "blue" : "")); } input[type="checkbox"] input.checkbox
checkbox在不同浏览器下的区别：
IE浏览器下checkbox对width,border,background敏感，而且ie版本在ie10以下
而对margin:0一点反应也没有；Firefox，chrome等浏览器对border,background一点反应都没有，
Firefox对width一点反应也没有，但是Firefox等对margin反应强烈，margin:0;会使复选框后面的文字紧贴这复选框。
所以为了实现漂亮的checkbox,且兼容各种类型的浏览器，一般采用图片模拟checkbox,点击切换图片来实现功能。
jquery获取checkbox的值以及checkbox是否选中
<input type="checkbox" value="501" >
获取值:$("input[type='checkbox']").attr('value')返回 501
判断是否选中:$("input[type='checkbox']").is(':checked') 选中则返回true,不选中则返回false
3.html知识：
margin:0 auto;的意思 就是 上下距离是0 左右距离自动 也就是说 是居中的意思！
5秒后显示内容
<html> <head> <style> #div1{height:100px;width:100px;background-color:yellow;display:none} </style> <script type="text/javascript"> // window.onload=function(){ // var i=0; // setInterval(function(){ // i++; // document.getElementById("div2").innerHTML="计时:"+ i ; // if(i==5){ // document.getElementById("div1").style.display="block"; // document.getElementById("div2").style.display="none"; // } // },1000); // } function runfun(){ var i=0; var stoptime = document.getElementById("stopTime").value; document.getElementById("div1").style.display="none"; document.getElementById("div2").style.display="block"; setInterval(function(){ i++; document.getElementById("div2").innerHTML="计时:"+ i ; if(i==stoptime){ document.getElementById("div1").style.display="block"; document.getElementById("div2").style.display="none"; i = 0 ; } },1000); }
//清除interval window.clearInterval(id); </script> </head> <body> <div id ="div0"> 设置经过 <input type="text" id="stopTime" /> 显示 <input type="button" id="runfun" value="开始" onclick = "runfun()"/> </div> <div id="div1"> 2货,还真等啊 </div> <div id="div2"> 计时开始: </div> </body> </html>
测试toggle以及oneclick等知识: <html> <head> <style type="text/css" > .dd{ text-align : center; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function(){
//测试是否含有名字为dd的class alert($("#f").hasClass("dd")); //通过点击按钮实现切换body的背景
$("button").toggle(function(){ $("body").css("background-color","green");}, function( ){ $(this).stop( );}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} );
//用toggle给text添加动画效果 $("#eee").toggle(function(){ $("#eee").animate({"left":"500px","opacity":0.5},3000);},//顺便改改透明度 function(){ $(this).stop( ); }, function(){ $("#eee").animate({"left":"0px","opacity":1},3000 );} );
//动态实现下一个控件的显示与隐藏 $("#fff").click( function(){ $(this).next().slideToggle( ); // 注意不能在自己身上写这个表达式，因为收起后，没法展开，收起后就没法点击啦。。一般都是写给next( )。 $(this).toggleClass("vvvvvvv"); } ) $("#f").toggle( function(){ // toggle通过鼠标点击触发的 $(this).css("color","red"); }, function() { $(this).css("color","blue"); } ); $("#fff").one("click",function(){//执行一次就失效 alert($(this).val()); }); }); </script> </head> <body> <button>请点击这里，来切换不同的背景颜色</button> <input type="text" value="test" id="f" style="text-valign:center" class="dd"> <input type="text" value="one time" id="fff" class=""> <input type="text" value="one wwwww" id="eee" style="position:relative"> </body> </html>
用bind绑定多个事件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#eee").bind({click:function(){ alert(1); }, mouseover:function( ){ alert(2); } }); }); </script> <style type="text/css"> </style> </head> <body> <input type="text" value="one wwwww" id="eee" style="position:relative"> </body> </html>
用js获取元素坐标 <html> <head> <script type="text/javascript"> //获取元素的纵坐标 function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } //获取元素的横坐标 function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } function locatio(obj){ alert(obj.offsetParent); alert("y:"+getTop(obj)+"--x:"+getLeft(obj)); } </script> </head> <body> <div> <table> <tr><td><input type="text" value="hello" onclick="locatio(this)"/></td><td><input type="text" value="world" onclick="locatio(this)"/></td></tr> <tr><td><input type="text" value="fuck" onclick="locatio(this)"/></td><td><input type="text" value="you" onclick="locatio(this)"/></td></tr> <tr><td><input type="button" value="hello" onclick="locatio(this)"/></td><td><input type="button" value="hello" onclick="locatio(this)"/></td></tr> <tr><td><input type="button" value="fuck" onclick="locatio(this)"/></td><td><input type="button" value="you" onclick="locatio(this)"/></td></tr> </table> </div> </body> </html
制作多样表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style> table{border-collapse:collapse;border-top:3px solid #000;border-bottom:3px solid #000;} .notVert{border:none; } td,th{ width:60px; border-right:1px solid #aaa; border-bottom:1px solid #aaa; text-align:center; font-size:16px; }; th{font-size:16px;font-weight:normal} .last{border-right:none; } .lastTr td{border-bottom:none; } strong{color:red; } </style> </head> <body> <p> <strong>四周（上下左右都不封闭）</strong> </p> <table cellspacing="0" cellpadding="2" class="notVert"> <tr> <th>一月</th> <th>二月</th> <th>三月</th> <th class="last">总计</th> </tr> <tr> <td>29</td> <td>38</td> <td>65</td> <td class="last">24</td> </tr> <tr> <td>26</td> <td>47</td> <td>58</td> <td class="last">4</td> </tr> <tr class="lastTr"> <td>56.45</td> <td>665</td> <td>76</td> <td class="last">8</td> </tr> </table> <p> <strong>常用型，左右不封闭</strong> </p> <table cellspacing="0" cellpadding="2"> <tr> <th>一月</th> <th>二月</th> <th>三月</th> <th class="last">总计</th> </tr> <tr> <td>22</td> <td>112</td> <td>52</td> <td class="last">4</td> </tr> <tr> <td>15</td> <td>265</td> <td>39</td> <td class="last">4</td> </tr> <tr class="lastTr"> <td>72</td> <td>43</td> <td>521</td> <td class="last">8</td> </tr> </table> </body> </html>
4.div边框重叠解决办法：
设置重叠部分边框所在div的margin为边框宽度的相反数就可以
以下为测试代码：
.div {width:100px; height:103px; border:1px solid #333; margin-right:-1px; margin-bottom:-1px;} .float-left{float:left;} .clear-both{clear:both;}
<div class="div"></div> <div class="div"></div> <div class="div float-left"></div> <div class="div float-left"></div> <div class="div float-left"></div> <div class="clear-both"></div>
