js遇到的问题
一些開發前臺時遇到的小問題：
-----------------------------------------
一眼看出頁面使用html還是html5：
html有三種聲明方式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
? ? ? ? ? ? ?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
? ? ? ? ? ? ?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">.
html5只有一種：<!DOCTYPE html>
------------------------------------------------------
isNaN(xxxxx）用于判斷是否為字符，true/false
?
&& 是 and
|| 是 or
在前臺和后臺都能用 && 和 || 進行判斷?
?
padding&margin:
margin 和 padding 是很容易搞混的概念
一般都是上，右，下，左的順序設定，單位可以是cm，px...
1 <div style=" padding: 6px 0px 0px 10px; margin: 2px 0px 0px 75px; background: #FFF;"></div>?margin用來設定外邊距，padding設定內邊距
?用下圖解釋就是：margin控制白塊在紅色背景中的位置，padding控制橘黃色小塊在白塊中位置
?
在前臺定義對象時
var a;? ?-->? ?前臺定義變量只是字符串，不看數據類型
var a = [];???-->? 定義數組 ，有push方法 比如定義一個數組jsonA，jsonObj是現有的json數據? ?那么就可以有jsonA.push(jsonObj);?
i=[] 數組字面量 等同 i = new Array();
var a = {};??-->? 定義對象
i={} 對象字面量 等同 i = new Object();
?
js 分類數據：
https://blog.csdn.net/qq_26747571/article/details/52066664
https://zhidao.baidu.com/question/485828807.html
?
jQuery ?each()循環檢索：
https://www.cnblogs.com/sweeeper/p/6106274.html
https://blog.csdn.net/qq_21683643/article/details/80418718
?
按指定比例顯示引入的圖片：
<img src='hello.jpg' width=450? height=350? />
<img src='hello.jpg' οnlοad="javascript:if(this.width>450)this.width=450;if(this.height>350)this.height=350;"?/>
?
觸發事件時，讓下拉框選中指定值：
$(".rankingType").click(function(){
$("select").val("all"); --> 下拉框選中value為 all 的option
});
?
$("select").change(function(){
var planType = $('.planChoose option:selected').val(); --> 取選中 optionn 的 value 值
?
Table:
表格邊框問題：
1 //border屬性用于控制表格邊框大小，數字越大邊框越粗 2 <table border = "1"> 3 <tr> 4 <th>aaa</th> 5 </tr> 6 <tr> 7 <td>a</td> 8 </tr> 9 </table> 10 11 //但這樣設置看著是空的邊框，很丑 12 //我們可以加 cellspacing屬性控制單元格間距 13 14 <table border = "1" cellspacing = "0"> 15 <tr> 16 <th>aaa</th> 17 </tr> 18 <tr> 19 <td>a</td> 20 </tr> 21 </table>效果：
?
?
現在我們被要求在第一個td的右下角加個圖片就像這樣：
?
正常html可以通過套用table實現：
1 <html> 2 <body> 3 4 <table border = "1" cellspacing = "0" width = 200> 5 <tr> 6 <th>aaa</th> 7 <th>aaa</th> 8 </tr> 9 <tr> 10 <td>a<br/> 11 <table align = "right"> 12 <tr> 13 <td><img src="/i/eg_tulip.jpg" height = 15 width = 30/></td> 14 </tr> 15 </table> 16 </td> 17 <td>a</td> 18 </tr> 19 </table> 20 21 </body>?
但是在html5中，這種方法是不行的，因為html中 table 標簽沒有了align屬性，這時我們可以用div實現：
1 <html> 2 <body> 3 4 <table border = "1" cellspacing = "0" width = 200> 5 <tr> 6 <th>aaa</th> 7 <th>aaa</th> 8 </tr> 9 <tr> 10 <td>a<br/> 11 <div align="right"> 12 <img src="/i/eg_tulip.jpg" height = 15 width = 30/> 13 </div> 14 </td> 15 <td>a</td> 16 </tr> 17 </table> 18 19 </body> 20 </html>?
如果是讓我們在同一位置顯示兩個圖片，那就用span套一下（div塊級，會換行，span是行級，不會換行）：
1 <div align="right"> 2 <span><img src="/i/eg_tulip.jpg" height = 15 width = 30/></span> 3 <span><img src="/i/eg_tulip.jpg" height = 15 width = 30/></span> 4 </div>?
關于 href="javascript:void(0)" ：
href=”javascript:void(0);”這個的含義是，讓超鏈接去執行一個js函數，而不是去跳轉到一個地址， ?而void(0)表示一個空的方法，也就是不執行js函數。為什么要使用href=”javascript:void(0);”？
javascript:是偽協議，表示url的內容通過javascript執行。void(0)表示不作任何操作，這樣會防止鏈接跳轉到其他頁面。這么做往往是為了保留鏈接的樣式，但不讓鏈接執行實際操作，
<a href="javascript：void(0)" onClick="window.open()"> 點擊鏈接后，頁面不動，只打開鏈接
<a href="#" οnclick="javascript:return false;"> 作用一樣，但不同瀏覽器會有差異。
href=”javascript:void(0);”與href=”#"的區別
?
<a href="javascript:void(0)">點擊</a>點擊鏈接后不會回到網頁頂部?<a href="#">點擊</a> 點擊后會回到網面頂部
"＃"其實是包含了位置信息，例如默認的錨點是＃top 也就是網頁的上端 而javascript:void(0) 僅僅表示一個死鏈接這就是為什么有的時候頁面很長瀏覽鏈接明明是＃可是跳動到了頁首 而javascript:void(0) 則不是如此所以調用腳本的時候最好用void(0) 使用javascript的方法 <a href="#" οnclick="javascript:方法;return false;">文字</a> <a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字</a> 補充： <a href="javascript:hanshu();"這樣點擊a標簽就可以執行hanshu()函數了。jQuery：
判斷顯示/隱藏：
if($(".xxx").is(":visible") && $(".xxxxx").is(":hidden")){ }
.is(":visible")
.is(":hidden")
?
jquery循環表格每一行：
?$("tr").each(function(){
xxxxxxxxxxxxxxxx;
});
?
循環ajax取來的json：
?
1 function changePlan(ret){ 2 for(var i = 0; i<20; i++){ 3 jsonObj = ret.list[i]; 4 if(jsonObj.aPlan = true){ 5 jsonA.push(jsonObj); 6 } 7 if(jsonObj.bPlan = true){ 8 jsonB.push(jsonObj); 9 } 10 } 11 } 12 13 function bindRankDc401kbuyprice() { 14 $('#rankDc401kbuyprice').html($("#rank_dc401k_buyprice_tmpl").tmpl(ret)); 15 $('.md-l-table-01 tbody tr:odd').addClass('md-addclass'); 16 hideProgress(); 17 $(".planChoose").change(function(){ 18 if($('.planChoose option:selected').val() == "a" ){ 19 changePlan(ret); 20 $('#rankDc401kbuyprice').html($("#rank_dc401k_buyprice_tmpl").tmpl(jsonA)); 21 } 22 if($('.planChoose option:selected').val() == "b"){ 23 changePlan(ret); 24 $('#rankDc401kbuyprice').html($("#rank_dc401k_buyprice_tmpl").tmpl(jsonB)); 25 } 26 if($('.planChoose option:selected').val() == "all"){ 27 changePlan(ret); 28 $('#rankDc401kbuyprice').html($("#rank_dc401k_buyprice_tmpl").tmpl(ret)); 29 } 30 $('.md-l-table-01 tbody tr:odd').addClass('md-addclass'); 31 hideProgress(); 32 jsonA = []; 33 jsonB = []; 34 }); 35 } 36 }; 37 });?
?
?
?
?
?
?
?
?
?
ps：
目前要學的有：??
高并發?
Spring boot/cloud? ? 微服務
框架運行原理? ?比如springbean的封裝? ?各種底層知識? ?
學會用 IDEA
Java連數據庫? ?連接池那部分也做得不好
再就是一些瑣碎? 一時說不起來但是會時常遇到（cache原理之類）
?
其他（按優先級 desc）：
node.js學了快一個月，目前剛看完基礎（速度感覺是慢了），接下來準備學習express等常用框架
react 之前淺顯的學過，還是不能流利編碼? 要練習
最近發現 .net core很火? 有丶想學了
英文文檔？這個等緣分到了再逼著自己讀一份吧
java11
?
再寫一篇緩存的隨筆（自己的理解）
寫一篇ajax的隨筆
java 垃圾回收機制
轉載于:https://www.cnblogs.com/guojia314/p/9670478.html
總結
- 上一篇： sql注入问题-视图-事物-以及存储过程
- 下一篇： Xshell5