什麼是跨域？怎麼解決跨域問題？
什麼是跨域？javascript
跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全限制。php
瀏覽器執行javascript腳本時，會檢查這個腳本屬於哪一個頁面，若是不是同源頁面，就不會被執行。css
解決辦法：html
一、JSONP：java
使用方式就不贅述了，可是要注意JSONP只支持GET請求，不支持POST請求。git
二、代理：github
例如www.123.com/index.html須要調用www.456.com/server.php，能夠寫一個接口www.123.com/server.php，由這個接口在後端去調用www.456.com/server.php並拿到返回值，而後再返回給index.html，這就是一個代理的模式。至關於繞過了瀏覽器端，天然就不存在跨域問題。正則表達式
三、PHP端修改header（XHR2方式）chrome
在php接口腳本中加入如下兩句便可：json
header('Access-Control-Allow-Origin:*');//容許全部來源訪問
header('Access-Control-Allow-Method:POST,GET');//容許訪問的方式
請說出三種減小頁面加載時間的方法
1.儘可能減小頁面中重複的HTTP請求數量
2.服務器開啓gzip壓縮
3. css樣式的定義放置在文件頭部
4. Javascript腳本放在文件末尾
5.壓縮合並Javascript、CSS代碼
6.使用多域名負載網頁內的多個文件、圖片
js操做字符串經常使用的方法
JS操做String對象的方法
charAt(index):返回指定索引處的字符串
charCodeAt(index):返回指定索引處的字符的Unicode的值
concat(str1,str2,...):鏈接多個字符串，返回鏈接後的字符串的副本
fromCharCode():將Unicode值轉換成實際的字符串
indexOf(str):返回str在父串中第一次出現的位置，若沒有則返回-1
lastIndexOf(str):返回str在父串中最後一次出現的位置，若沒有則返回-1
match(regex):搜索字符串，並返回正則表達式的全部匹配
replace(str1,str2):str1也能夠爲正則表達式，用str2替換str1
search(regex):基於正則表達式搜索字符串，並返回第一個匹配的位置
slice(start,end)：返回字符索引在start和end（不含）之間的子串
split(sep，limit)：將字符串分割爲字符數組，limit爲從頭開始執行分割的最大數量
substr(start，length)：從字符索引start的位置開始，返回長度爲length的子串
substring(from,to)：返回字符索引在from和to（不含）之間的子串
toLowerCase()：將字符串轉換爲小寫
toUpperCase()：將字符串轉換爲大寫
valueOf()：返回原始字符串值
Json對象與Json字符串互轉
1>jQuery插件支持的轉換方式：
$.parseJSON( jsonstr ); // //jQuery.parseJSON(jso(jsonstr),能夠將json字符串轉換成json對象
2>瀏覽器支持的轉換方式(Firefox，chrome，opera，safari，ie9，ie8)等瀏覽器：
JSON.parse(jso(jsonstr); //能夠將json字符串轉換成json對象
象
JSON.stringify(jso(jsonobj); //能夠將json對象轉換成json對符串
注：ie8(兼容模式),ie7和ie6沒有JSON對象，推薦採用JSON官方的方式，引入，引入json.js。
3>Javascript支持的轉換方式：
eval('(' + jsonstr + ')'); //能夠將json字符串轉換成json對象,注意須要在json字符外包裹一對小括號
注：ie8(兼容模式),ie7和ie6也可使用eval()將字符串轉爲JSON對象，但不推薦這些方式，這種方式不安全eval會執行json串中的表達式。
4>JSON官方的轉換方式：
http://www.json.org/提供了/提供了一個了一個json.js,這樣i,這樣ie8(兼容模式),ie7和ie6就能夠支持JSON對象以及其stringify()和parse()方法；
能夠在能夠在https://github.com/douglascrockford/JSON-js上獲取到上獲取到這個js，通常如今用如今用json2.js。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("$("p.intro")ro") 選取全部 class="intro" 的 <p> 元素。
$("p#demo") 選取全部 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取全部帶有 href 屬性的元素。
$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
$("p").css("background-color","red");
$(this) 當前 HTML 元素
$("p") 全部 <p> 元素
$("$("p.intro")ro") 全部 class="intro" 的 <p> 元素
$(".intro") 全部 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每一個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']") 全部帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head") id="intro" 的 <div> 元素中的全部 class="head" 的元素
打印三角形
document.writeln("打印三角形</br>"); for(var i=0;i<5;i++){ for(var j=5;j>i;j--){ document.writeln(" "); } for(var k=0;k<2*i+1;k++){ document.writeln("*"); } document.writeln("</br>") }
清除浮動的方式及優缺點
1）之前清除浮動的時候老是在想要清除浮動的元素後面加：
<div style="clear:both;"></div>
優勢：通俗易懂，容易掌握
點：能夠想象經過此方法，會添加多少無心義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅定不能忍受的，因此你看了這篇文章以後仍是建議不要用了吧。
2）使用 br標籤和其自身的 html屬性
這個方法有些小衆，br 有 clear=「all | left | right | none」 屬性
<div class="warp" id="float2">
<h2>2）使用 br標籤和其自身的 html屬性</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<br clear="all" />
</div>
<div class="footer">.footer</div>
優勢：比空標籤方式語義稍強，代碼量較少
缺點：一樣有違結構與表現的分離，不推薦使用
3)父元素設置 overflow：hidden
經過設置父元素overflow值設置爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1；
<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素設置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
優勢：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素；04年POPO就發現overflow:hidden會致使中鍵失效，這是我做爲一個多標籤瀏覽控所不能接受的。因此仍是不要使用了
4)父元素設置 overflow：auto 屬性
一樣IE6須要觸發hasLayout，演示和3差很少
優勢：不存在結構和語義化問題，代碼量極少
缺點：多個嵌套後，firefox某些狀況會形成內容全選；IE中 mouseover 形成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無端產生focus等, 請看 嗷嗷的 Demo ,不要使用
5）父元素也設置浮動
優勢：不存在結構和語義化問題，代碼量極少
缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用
6）父元素設置display:table
優勢：結構語義化徹底正確，代碼量極少
缺點：盒模型屬性已經改變，由此形成的一系列問題，得不償失，不推薦使用
7）使用:after 僞元素
須要注意的是 :after是僞元素（Pseudo-Element），不是僞類（某些CSS手冊裏面稱之爲「僞對象」），不少清除浮動大全之類的文章都稱之爲僞類，不過csser要嚴謹一點，這是一種態度。
因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
下面是用after僞類實現，兼容多種瀏覽器：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 爲兼容IE6,IE7，由於ie6,ie7不能用after僞類 */
.clearfix{
zoom:1;
}
優勢：結構和語義化徹底正確,代碼量居中
缺點：複用方式不當會形成代碼量增長
通常狀況下，若是父層內部有浮動(float)可能致使父層的高度爲0，加上clearfix後就好了。
HTML:
<div class="parent clearfix">
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS:
.clearfix {
zoom: 1
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.parent {
background-color: red;
width: 120px;
}
.left {
float: left;
background-color: pink;
height: 60px;
}
.right {
float: right;
background-color: #abcdef;
}
css三角形運用
<style>
.colored-border-empty-retangle {
margin: 50px auto;
width: 0;
height: 0;
border-top: 40px solid pink;
border-right: 40px solid green;
border-bottom: 40px solid red;
border-left: 40px solid blue;
}
</style>
<div class="colored-border-empty-retangle"></div>
推薦連接： https://www.cnblogs.com/keepfool/p/5616326.html