前端HR告訴你每日前端題（進Web前端交流群0007領取工具和資料）
1、使用原生JS寫一個兼容主流瀏覽器的事件添加和刪除封裝函數
var eventUtil={
addEvent:function(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener("on"+type,handler,false)
}elseif(ele.attachEvent){
ele.attachEvent(type,handler)
}else{
ele.["on"+type]=handler
},
removeEvent:function(ele,type,handler){
if(ele.removeEventListener){
ele.removeEventListener(type,handler,false)
}elseif(ele.detachEvent){
ele.detachEvent("on"+type,handler)
}else{
ele["on"+type]=null
}
}
}
2、冒泡排序
var arr = [15,2,6,8,10,9];
for (var i = 0; i < arr.length-1; i++) {
for (var j = 0; j < arr.length-i-1; j++) {
if(arr[j] < arr[j+1]){
var temp = arr[j+1];
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
3、jQuery對象和DOM對象相互轉換
// 1. DOM對象轉成 jQuery對象
//對于已經是一個 DOM對象，只需要用 $()把DOM對象包裝起來，就可以獲得一個 jQuery對象了，$(DOM對象)注： var是定義變量
//如：
var v =document.getElementById("v"); //DOM對象
var $v = $(v); //jQuery對象
//轉換后，就可以任意使用 jQuery的方法。
// 2. jQuery對象轉成 DOM對象
//兩種轉換方式講一個 jQuery對象轉換成 DOM對象： [index]和 .get(index)；
// (1) jQuery對象是一個數據對象，可以通過 [index]的方法，來得到相應的 DOM對象。
//如：
var $v = $("#v"); //jQuery對象
var v = $v[0]; //DOM對象
// alert(v.checked); //檢測這個checkbox是否被選中
// (2) jQuery本身提供，通過.get(index)方法得到相應的 DOM對象
//如：
var $v = $("#v"); //jQuery對象
var v = $v.get(0); //DOM對象 ($v.get()[0]也可以 )
4、從用戶輸入一個網址到網頁最終展現到用戶面前，中間究竟發生了什么？
/*
大致流程總結如下：
1.輸入地址
2.瀏覽器查找域名的 ip地址（這一步包括 DNS具體的查找過程，包括：瀏覽器緩存->系統緩存->路由器緩存...）
3.瀏覽器向 web服務器發送一個 HTTP請求
4.服務器的永久重定向響應（從http://example.com到 http://www.example.com）
5.瀏覽器跟蹤重定向地址
6.服務器處理請求
7.服務器返回一個 HTTP響應
8.瀏覽器顯示 HTML
9.瀏覽器發送請求獲取嵌入在 HTML中的資源（如圖片、音頻、視頻、CSS、JS等等）
10.瀏覽器發送異步請求
*/
5、關于跨域,以及跨域的幾種方式？
首先我們來想一想
為什么會有跨域這個名詞的出現呢?
跨域又是什么呢?為何要跨域?
瀏覽器的同源策略又是什么?怎么解決?
jsonp又是什么?
跨域的原理又是什么呢?
名詞解釋:
跨域:
瀏覽器對于javascript的同源策略的限制,例如a.cn下面的js不能調用b.cn中的js,對象或數據(因為a.cn和b.cn是不同域),所以跨域就出現了.
上面提到的,同域的概念又是什么呢???簡單的解釋就是相同域名,端口相同,協議相同
同源策略:
請求的url地址,必須與瀏覽器上的url地址處于同域上,也就是域名,端口,協議相同.
比如:我在本地上的域名是study.cn,請求另外一個域名一段數據
這個時候在瀏覽器上會報錯:
這個就是同源策略的保護,如果瀏覽器對Javascript沒有同源策略的保護,那么一些重要的機密網站將會很危險~
study.cn/json/jsonp/jsonp.html
請求地址 形式 結果
http://study.cn/test/a.html 同一域名,不同文件夾 成功
http://study.cn/json/jsonp/jsonp.html 同一域名,統一文件夾 成功
http://a.study.cn/json/jsonp/jsonp.html 不同域名,文件路徑相同 失敗
http://study.cn:8080/json/jsonp/jsonp.html 同一域名,不同端口 失敗
https://study.cn/json/jsonp/jsonp.html 同一域名,不同協議 失敗
jsonp:
jsonp 全稱是JSON with Padding,是為了解決跨域請求資源而產生的解決方案,是一種依靠開發人員創造出的一種非官方跨域數據交互協議。
一個是描述信息的格式，一個是信息傳遞雙方約定的方法。
jsonp的產生:
1.Ajax直接請求普通文件存在跨域無權限訪問的問題,不管是靜態頁面也好.
2.不過我們在調用js文件的時候又不受跨域影響,比如引入jquery框架的,或者是調用相片的時候
3.凡是擁有scr這個屬性的標簽都可以跨域例如<script><img><iframe>
4.如果想通過純web端跨域訪問數據只有一種可能,那就是把遠程服務器上的數據裝進js格式的文件里.
5.而json又是一個輕量級的數據格式,還被js原生支持
6.為了便于客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback 參數給服務端，
demo1:基于script標簽實現跨域
舉個例子:我在http://study.cn/json/jsonp/jsonp_2.html下請求一個遠程的js文件
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6
7<script type="text/javascript">
8 var message = function(data) {
9 alert(data[1].title);
10 };
11 </script>
12
13 <scripttype="text/javascript" src="http://web.cn/js/message.js"></script>
14 </head>
15 <body>
16 <div id='testdiv'></div>
17 </body>
18 </html>
遠程的message.js文件是
1message([
2 {"id":"1", "title":"天津新聞聯播，雷人搞笑的男主持人"},
3 {"id":"2", "title":"樓市告別富得流油專家:房價下跌是大概率事件"},
4 {"id":"3","title":"法國人關注時事八成年輕人每天閱讀新聞"},
5 {"id":"4", "title":"新聞中的歷史,歷史中的新聞"},
6 {"id":"5", "title":"東陽新聞20140222"},
7 {"id":"6", "title":"23個職能部門要增加新聞發布頻次"},
8 {"id":"7", "title":"《貴州新聞聯播》中國美麗鄉村"},
9 {"id":"8", "title":"朝韓離散家屬團聚首輪活動結束"},
10 {"id":"9", "title":"索契冬奧會一天曝出兩例興奮劑事件"},
11 {"id":"10", "title":"今天中國多地仍將出現中度霾"}
12 ]);
這個時候我們得到的相應頭是:
這樣就實現跨域成功了,因為服務端返回數據時會將這個callback參數(message)作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
demo2: 基于script標簽實現跨域
讓遠程js知道它應該調用的本地函數叫什么名字,只要服務端提供的js腳本是動態生成的就好了,這樣前臺只需要傳一個callback參數過去告訴服務端,我需要XXX代碼,于是服務端就會得到相應了.
例如在http://study.cn/json/jsonp/jsonp_3.html頁面請求 http://192.168.31.137/train/test/jsonpthree
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6
7<script type="text/javascript">
8 var messagetow = function(data){
9 alert(data);
10 };
11 var url ="http://192.168.31.137/train/test/jsonpthree?callback=messagetow";
12 var script = document.createElement('script');
13 script.setAttribute('src', url);
14 document.getElementsByTagName('head')[0].appendChild(script);
15 </script>
16 </head>
17 <body>
18 </body>
19 </html>
得到的響應頭是:
demo3: 基于jquery跨域
那么如何用jquery來實現我們的跨域呢???jquery已經把跨域封裝到ajax上了,而且封裝得非常的好,使用起來也特別方便
如果是一般的ajax請求:
1 $.ajax({
2 url:'http://192.168.31.137/train/test/testjsonp',
3 type : 'get',
4 dataType : 'text',
5 success:function(data){
6 alert(data);
7 },
8 error:function(data){
9 alert(2);
10 }
11 });
那么在瀏覽器中會報錯:
jsonp形式的ajax請求:并且通過get請求的方式傳入參數,注意:跨域請求是只能是get請求不能使用post請求
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6<script type="text/javascript"src="./js/jquery.js"></script>
7<script type="text/javascript">
8$(document).ready(function(){
9 var name = 'chenshishuo';
10 var sex = 'man';
11 var address = 'shenzhen';
12 var looks = 'handsome ';
13 $.ajax({
14 type : 'get',
15 url:'http://192.168.31.137/train/test/testjsonp',
16 data : {
17 name : name,
18 sex : sex,
19 address : address,
20 looks : looks,
21 },
22 cache :false,
23 jsonp: "callback",
24 jsonpCallback:"success",
25 dataType : 'jsonp',
26 success:function(data){
27 alert(data);
28 },
29 error:function(data){
30 alert('error');
31 }
32 });
33 });
34 </script>
35 </head>
36 <body>
37 <input id='inputtest' value='546'name='inputtest'>
38 <div id='testdiv'></div>
39 </body>
40 </html>
jsonp傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(默認為:callback)
jsonpCallback自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名
看看請求頭和相應頭吧
請求頭:jquery會自動帶入callback參數,當服務端獲取到這個參數后,返回回來.(響應頭)
現在是不是明白了跨域的基本原理,和基本的使用方法呢??
上面我們說到img中的src可以自動調用遠程圖片的(這個比較簡單我在這里就不說了)
還有ifram請求:
基于iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點，
也就是兩個頁面必須屬于一個基礎域（例如都是xxx.com)，使用同一協議和同一端口，這樣在兩個頁面中同時添加document.domain，就可以實現父頁面調用子頁面的函數
要點就是 :通過修改document.domain來跨子域
demo4: 通過iframe來跨子域
http://a.study.cn/a.html請求http://b.study.cn/b.html
在a.html:
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6 <script type="text/javascript">
7 document.domain = 'study.cn';
8 function test() {
9 alert(document.getElementById('a').contentWindow);
10 }
11 </script>
12 </head>
13 <body>
14 <iframe id='a' src='http://b.study.cn/b.html' onload='test()'>
15 </body>
16 </html>
在b.html:
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6
7<script type="text/javascript">
8document.domain = 'study.cn';
9</script>
10 </head>
11 <body>
12 我是b.study.cn的body
13 </body>
14 </html>
運行效果截圖:
我們就可以通過js訪問到iframe中的各種屬性和對象了
如果你想在http://a.study.cn/a.html頁面中通過ajax直接請求頁面http://b.study.cn/b.html，即使你設置了相同的document.domain也還是不行的.
所以修改document.domain的方法只適用于不同子域的框架(父類與子類)間的交互。
如果想通過使用ajax的方法去與不同子域間的數據交互或者是js調用，只有兩種方法,一種是使用jsonp的方法外，還有一種是使用iframe來做一個代理。
原理就是讓這個 iframe載入一個與你想要通過ajax獲取數據的目標頁面處在相同的域的頁面，所以這個iframe中的頁面是可以正常使用ajax去獲取你要的數據的，
然后就是通過我們剛剛講得修改document.domain的方法，讓我們能通過js完全控制這個iframe，這樣我們就可以讓iframe去發送ajax請求，然后收到的數據我們也可以獲得了。
6、如何水平垂直居中？
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>flex布局</title>
<styletype="text/css">
#box{width:800px;height: 680px;border: 5px solid deeppink;margin: 10px auto;display:flex;justify-content: center;align-items: center;}
#boxdiv{width: 120px;height: 80px;background: red;border: 5px solid #ccc;}
</style>
</head>
<body>
<divid="box">
<divclass="h100">1</div>
</div>
</body>
</html>
7、常見的兼容性問題
/*
1 ie6.0橫向margin加倍
產生因素：塊屬性、float、有橫向margin。
解決方法：display：inline；
2 ie6.0下默認有行高
解決方法：overflow:hidden;或font-size:0;或line-height：xx px；
3在各個瀏覽器下img有空隙(原因是：回車。)
解決方法:讓圖片浮動。
4一個父標簽與幾個子標簽嵌套，父標簽不浮動，子標簽float，子標簽不撐開父的高度。
解決方法：a在子標簽最后清浮動{<divstyle="height:0;clear:both;"> </div>}
b父標簽添加{overflow：hidden；}
c給父標簽設置高度
5 Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和Max-width/height在ie6中沒效果，
解決方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}
html>body.abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（因為ie6有一個特征，當定義一個高度時，如果內容超過高度，元素會自動調整高度。）
6 Ie6里面：如li設寬、高，并且li里面的標簽浮動，那么li之間會有間距
解決方法：li不設寬、高或者li內的標簽不浮動
7 li之間有間距
解決方法：li設置vertical-align:middle;
8 3像素問題：ie6下，當浮動元素與流動元素并列顯示時，他們之間會存在三像素問題。
解決方法：用hack技術，例如：所有瀏覽器通用height:100px;
ie6專用_height:100px;
ie7專用*+height:100px;
ie6/ie7共用*height:100px;
9當定義行內元素為包含框時，且包含框包含的絕對定位元素以百分比為單位進行定位時，會出現混亂。
解決方法：在行內元素里加入{zoom：1；}
10當多個浮動元素中間夾雜著HTML注釋語句時，如果浮動元素寬度為100%，則在下一行多顯示一個上一行最后一個字符。
解決辦法：給浮動元素添加display:inline;。
11 opacity定義元素的不透明度
filter：alpha（opacity=80）；ie支持該屬性
opacity：0.8；支持css3的瀏覽器
12兩個塊元素，豎向的margin值不增加，會重疊，其間距為最大margin值。
13優先級：被!important注明的css屬性具有最高優先級(.abc{color:red!important;})。但在ie6中!important具有一個bug:在同一組css屬性中，!important不起作用。
14火狐不識別background-position-y或background-position-x;
15 ie6不支持 fixed
*/
8、輸出明天日期
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//獲取 AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth()+1;//獲取當前月份的日期
var d = dd.getDate();
return y+"-"+m+"-"+d;
}
document.write("前天："+GetDateStr(-2));
document.write("<br/>昨天："+GetDateStr(-1));
document.write("<br/>今天："+GetDateStr(0));
document.write("<br/>明天："+GetDateStr(1));
document.write("<br/>后天："+GetDateStr(2));
document.write("<br/>大后天："+GetDateStr(13));
新聞熱點
疑難解答
