如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
方式一
<!--1.1使用Vue.extend來創建全局的Vue組件--> var tem1 = Vue.extend({
template:'<h3>這是使用 Vue.extend 創建的組件</h3>' //指定組件要展示的HTML結構
}); <!--1.2使用Vue.component('組件名稱',創建出來的組件模板對象)--> Vue.component('myTem1',tem1);
/* <!--注意--> 使用 Vue.component() 定義全局組件的時候，
組件名稱使用 駝峰命名，則在引用組件的時候，需要把大寫改為小寫，并且用 '-'將單詞連接
組件名稱不適用駝峰命名，則直接拿名稱來使用即可
*/ <!--組合方式--> Vue.component('myTem1',Vue.extend({
template : '<h3>這是使用 Vue.extend 創建的組件</h3>'
})) <div id="app"> <!-- 如果要使用組件，直接把組件的名稱以 HTML 標簽的形式，引入到頁面中--> <my-tem1> </my-tem1> </div>
方式二
直接使用Vue.component()
Vue.component('mycom2',{
template : '<h3>這是使用 Vue.component 創建的組件</h3>' })
但是這樣寫會有一個問題：
<!--在h3標簽后緊接一個span標簽的話就會出問題了--> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span>
這個問題是在 組件template屬性指向的模板內容，必須有且只能有唯一的一個根元素
所以修改代碼如下：
Vue.component('mycom2',{
template :
'<div> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> </div>'
})
運行結果如下：
不過這種方式也有一個瑕疵，就是template 屬性的值是HTML標簽，而在軟件中，并沒有智能提示，容易出錯，若使用這種方式，需要仔細，避免出錯
方式三
<!--1.定義組件：--> Vue.component('mycom3',{
template : '#tem1'
}); <!--2.在被控制的 #app 外面使用 template 元素，定義組建的HTML模板結構--> <div id="app"> <!--3. 引用組件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>這是 template 元素</h1> <span>這種方式好用</span> </div> </template>
運行結果如下：
這是Vue創建組件(全局)的3種方式，其實相差不多，希望對大家有所幫助
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.url:
要求為String類型的參數，（默認為當前頁地址）發送請求的地址。
2.type:
要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。
3.timeout:
要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
4.async:
要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。
5.cache:
要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。
6.data:
要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看 processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType:
要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。
text：返回純文本字符串。
8.beforeSend：
要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
function(XMLHttpRequest){
this; //調用本次ajax請求時傳遞的options參數
}
9.complete：
要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest, textStatus){
this; //調用本次ajax請求時傳遞的options參數
}
10.success：要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。
(1)由服務器返回，并根據dataType參數進行處理后的數據。
(2)描述狀態的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調用本次ajax請求時傳遞的options參數
}
11.error:
要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調用本次ajax請求時傳遞的options參數
}
12.contentType：
要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
13.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
14.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
15.global：
要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。
16.ifModified：
要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
17.jsonp：
要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
18.username：
要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。
19.password：
要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。
20.processData：
要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
21.scriptCharset：
要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。
案例代碼：
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有內容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
22.順便說一下$.each()函數:
$.each()函數不同于JQuery對象的each()方法，它是一個全局函數，不操作JQuery對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數。回調函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對應變量或內容。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Web項目前后端分離開發時，經常會遇到跨域請求和跨域攜帶Cookie的相關問題：
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
getResponse().setHeader("Access-Control-Allow-Origin","*");
//表明服務器支持的所有頭信息字段
getResponse().setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma,Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
/** 目前測試來看為了兼容所有請求方式，上面2個必須設 **/
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
getResponse().setHeader("Access-Control-Allow-Credentials", "true");
// 首部字段 Access-Control-Allow-Methods 表明服務器允許客戶端使用 POST, GET 和 OPTIONS 方法發起請求。
//該字段與 HTTP/1.1 Allow: response header 類似，但僅限于在需要訪問控制的場景中使用。
getResponse().setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//表明該響應的有效時間為 86400 秒，也就是 24 小時。在有效時間內，瀏覽器無須為同一請求再次發起預檢請求。
//請注意，瀏覽器自身維護了一個最大有效時間，如果該首部字段的值超過了最大有效時間，將不會生效。
getResponse().setHeader("Access-Control-Max-Age", "86400");
// IE8 引入XDomainRequest跨站數據獲取功能,也就是說為了兼容IE
getResponse().setHeader("XDomainRequestAllowed","1");
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
response.setHeader("Access-Control-Allow-Credentials", "true");
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
//表明服務器支持的頭信息字段
response.setHeader("Access-Control-Allow-Headers","content-type");
前端根據實際情況修改發起請求的ajax，示例：
$.ajax({
type: "POST",
url: "實際的請求地址",
data: {參數：參數值},
dataType: "json",
crossDomain:true, //設置跨域為true xhrFields: {
withCredentials: true //默認情況下，標準的跨域請求是不會發送cookie的 },
success: function(data){ alert("請求成功");
}
});
另外還有代理、jsonp等方式不做介紹了
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.說下需求：點擊標題 跳轉 預覽的pdf 頁，下載功能 可選【最好有】。
2.實現結果 ：
3.代碼實現：
依賴pdf.js 【需要下載完整 控件】
下載官網：http://mozilla.github.io/pdf.js/
點擊 ‘Download ’ 到下載頁
git 克隆 或者下載。
下載后文件長這樣：
【重點在后面 項目如何部署組裝】
1.新建一個空項目 把文件放到項目根目錄下：
紅色圈里 是官網下載的 就改個文件名字，然后拖進項目里，完全不用動里面任何文件記住，有需要另說。
綠色是我寫的【dowwn.html 是測試文件;static 放pdf 文件】 下面貼代碼：
list.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">產品說明書</p>
-
<ul>
-
<li dataSrc = 'KD-122LA火災探測報警器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火災探測報警器說明書ccc</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-212LA可燃氣體探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃氣體探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-216LA可燃氣體探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃氣體探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'Kd-122LA_KD-601系統遙控器使用說明.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系統遙控器使用說明</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-602LA_SOS一鍵救助使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一鍵救助使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-701LA_溢水探測器使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探測器使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-702LA紅外人體移動探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA紅外人體移動探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-703LA_門窗探測器使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 門窗探測器使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-805A_WiFi系統主機使用說明書_V1.00.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系統主機使用說明書_V1.00</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'WIFI智慧家庭安防系統操作說明書_v0.01.pdf'onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系統操作說明書_v0.01</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
-
-
</ul>
-
<script src="js/jquery.min.js"></script>
-
<script>
-
function fun(e){
-
// console.log(e);
-
var dataSrc = $(e).attr('dataSrc');
-
// console.log(dataSrc);
-
// sessionStorage.setItem('dataSrc',dataSrc);
-
// window.location.href='index.html'
-
var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
-
$.ajax({
-
url: urlSrc,
-
type: "get",
-
success: function(xhr, data){
-
if (navigator.userAgent.indexOf('Android') > -1) {
-
//判斷移動端是android 還是ios ，若是android 則要借助pdf插件
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
} else {
-
//ios直接打開pdf
-
//window.location.href = url;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
}
-
},
-
error: function(){
-
//window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
-
}
-
});
-
}
-
</script>
-
</body>
-
-
</html>
完畢！
注釋：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html? 直接跳轉到 萬能的pdf 組件里的html 頁，該有的 國際化和下載打印功能 人家都寫好了！
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">產品說明書</p>
-
-
<a href="static/1.pdf">00001</a>
-
-
-
</body>
-
-
</html>
-
哈哈，直接a 標簽 href 跳轉 pdf文件；也是ok的哦！【蘋果手機：直接預覽；；；安卓:下載 鏈接 】
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有時候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下
Css代碼
查找一些教材中（w3schools等），只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優先級怎樣排列，沒有詳細說明。經過測試和繼續搜索，得知優先級如下排列：
1. 樣式表的元素選擇器選擇越，則其中的樣式優先級越高：
id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
所以上例中，#navigator的樣式優先級大于.current_block的優先級，及時.current_block是添加的，也不起作用。
2. 對于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優先級越高
注意，這里是樣式表文件中越靠后的優先級越高，而不是在元素class出現的順序。比如.class2 在樣式表中出現在.class1之后：
Css代碼
而某個元素指定class時采用 class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優先級更高，color的屬性為red，而非black。
3. 如果要讓某個樣式的優先級變高，可以使用!important來指定：
Css代碼
此時class將使用black，而非red。
對于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個class .block中，而.block放到.current_block之前：
Css代碼
需要莫仁為#navigator元素指定class="block"
2. 使用!important:
Css代碼
此時無需作任何其他改動即可生效?？梢姷诙N方案更簡單一些。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
獲取窗口屬性
為了解決兼容性的問題，我們來封裝一個函數：
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
為了解決兼容性的問題，我們來封裝一個函數:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
查看元素的幾何尺寸
讓滾動條滾動
練習：
做一個小閱讀器，會自動翻頁。
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加鎖，防止連續點start產生累加加速 start.onclick = function() { if(key) {
timer = setInterval(function() { window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() { clearInterval(timer);
key = true;
} </script>
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
變量包括：全局變量，局部變量
在JAvaScript中，函數中定義的變量是局部變量
分為：局部作用域和全局作用域
js中沒有塊級作用域---一對括號中定義的變量,這個變量可以在大括號外面使用
-
var num=10; //作用域鏈 級別:0
-
var num2=20;
-
var str = "abc"
-
function f1() {
-
var num2=20;
-
function f2() {
-
var num3=30;
-
console.log(num);
-
}
-
f2();
-
}
-
f1();
層層搜索,搜索到0級作用域的時候,如果還是沒有找到這個變量,結果就是報錯
（1）變量的提升
下面這種情況，變量的聲明被提前了，但是num的值并沒有提前，結果為undefined
-
//變量的提升
-
console.log(num);
-
var num=100;
-
-
-
//提升之后為：
-
var num;//變量的聲明提前
-
console.log(num);
-
var num=100;
（2）
函數聲明被提前，代碼仍然可以執行
-
//函數的聲明被提前了
-
f1();
-
function f1() {
-
console.log("這個函數,執行了");
-
}
但是對于下面這種情況，代碼報錯
-
f2();
-
var f2=function () {
-
console.log("小楊好帥哦");
-
}
-
-
//聲明提前后：
-
var f2;//為一個變量，undefind
-
f2();//undefind加括號是不被認可的，所以報錯
-
var f2=function () {
-
console.log("小楊好帥哦");
-
}
要想不報錯，代碼可以改為：
-
var f2;
-
f2=function () {
-
console.log("小楊好帥哦");
-
};
-
f2();
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
form表單提交，之前有個下載的項目接口，需要上url上邊傳超級多東西，但是 url是限制長度的 每個瀏覽器限制的url長度還不一樣，所以就想到用form表單的action提交表單。
form標簽 定義和用法 詳細了解請點擊
標簽用于為用戶輸入創建 HTML 表單。
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用于向服務器傳輸數據。（我們要用到的）
在這里我就寫個用js調用事件提交表單。表單不在頁面上顯示的例子。
下面這段代碼 form標簽的屬性 method 就是請求方法 跟 jquery的ajax一樣這里我使用post請求、 form標簽的屬性 enctype 規定發送表單數據之前如何對其進行編碼、form標簽的屬性 target=”_blank” 就相當于在新頁面打開 我這里做的是下載 所以要在新頁面打開。
<form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
<input type="hidden" name="account" value="多毛大叔愛蘿莉"/>
<input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button> //這里的name就是相當于post屬性的參數 value就是你傳的值 type是hidden 是因為我不想再頁面上看到他所以讓他隱藏了
接下來我們用js調用事件 動態給 form 添加 action 屬性讓form知道我們要讓他請求拿個位置。
// js 獲取form表單 var form_submit = document.getElementById('form-submit'); // js獲取按鈕 var go = document.getElementById('go'); // 當點擊go時執行事件 go.addEventListener（'click',function(){ // 動態給form表單設置請求位置 form_submit.active = "http://www.daxuehua.cn"; // 讓form表單提交 form_submit.submit()
}）如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
四種touch事件
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發
每個觸摸事件被觸發后，會生成一個event對象，event對象里額外包括以下三個觸摸列表
touches: //當前屏幕上所有手指的列表
targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對于頁面的位置
screenX / screenY: //觸摸點相對于屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素
注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放
通過meta元標簽來設置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滾動
preventDefault是阻止默認行為，在touchMove事件中使用可阻止默認行為滾動。
event.preventDefault();
3.解決穿透
在touchStart事件后添加touchMove事件的監聽，在touchMove事件里添加touchEnd事件的監聽，在touchEnd事件中移除touchMove和touchEnd的事件監聽，即可解決穿透問題
4.removeEventListener
傳入的處理事件函數一定是相同的函數，不能是匿名函數
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移動端觸摸滑動</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna's js lib" /> <meta name="description" content="移動端觸摸滑動" /> <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"> <style> *{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;} </style> </head> <body> <div class="m-slider"> <ul class="cnt" id="slider"> <li> <img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"> <p>20140813鏡面的世界，終究只是倒影。看得到你的身影，卻觸摸不到你的未來</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>20140812錫林浩特前往東烏旗S101必經之處，一條極美的鐵路。鐵路下面是個小型的鹽沼，淡淡的有了一絲天空之境的感覺?？上г诖送媪艘粋€小時也沒有看見一列火車經過，只好繼續趕往東烏旗。</p> </li> <li> <img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg"> <p>20140811水的顏色為什么那么藍，我也納悶，反正自然飽和度和對比度拉完就是這個顏色的</p> </li> <li> <img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg"> <p>海洋星球3重慶天氣熱得我想臥軌自殺</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>以上這些作品分別來自兩位設計師作為觀者，您能否通過設計風格進行區分</p> </li> </ul> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script> var slider = { //判斷設備是否支持touch事件 touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('slider'), //事件 events:{
index:0, //顯示元素的索引 slider:this.slider, //this為slider對象 icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){ var self = this; //this指events對象 if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
}
}, //滑動開始 start:function(event){ var touch = event.targetTouches[0]; //touches數組對象獲得屏幕上所有的touch，取第一個touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一個touch的坐標值 isScrolling = 0; //這個參數判斷是垂直滾動還是水平滾動 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false);
}, //移動 move:function(event){ //當屏幕有多個touch或者頁面被縮放過，就不執行move操作 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling為1時，表示縱向滑動，0為橫向滑動 if(isScrolling === 0){
event.preventDefault(); //阻止觸摸事件的默認行為，即阻止滾屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
}, //滑動釋放 end:function(event){ var duration = +new Date - startPos.time; //滑動的持續時間 if(isScrolling === 0){ //當為水平滾動時 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判斷是左移還是右移，當偏移量大于10時執行 if(endPos.x > 10){ if(this.index !== 0) this.index -= 1;
}else if(endPos.x < -10){ if(this.index !== this.icon.length-1) this.index += 1;
}
} this.icon[this.index].className = 'curr'; this.slider.className = 'cnt f-anim'; this.slider.style.left = -this.index*600 + 'px';
} //解綁事件 this.slider.removeEventListener('touchmove',this,false); this.slider.removeEventListener('touchend',this,false);
}
}, //初始化 init:function(){ var self = this; //this指slider對象 if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二個參數可以傳一個對象，會調用該對象的handleEvent屬性 }
};
slider.init(); </script> </body> </html>如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
寫在前面：
如果讓用簡單的幾句話說一下什么是原型，或者給原型下個定義，我覺得還是有點困難的，困難之處在于即使說了之后，對于聽的人來說，估計也是一頭霧水。不過，關于原型的一些基本的東西還是要說明的，這些基本的東西差不多就可以構成一個對原型的理解。首先，原型是函數才有的一個屬性；其次，原型就是一個對象，我們可以給它添加屬性或方法；最后，原型的作用是實現對象屬性的繼承。
每個對象都有一個隱藏的
每個函數都有一個
對象是沒有
通過原型
什么是原型鏈？
typeof在判斷引用數據類型時只能返回object和function，不能準確判斷引用數據類型時數組還是對象。而instanceof可以很好用于判斷引用數據類型。
用法：
instanceof是通過判斷對象
1、什么是對象？
對象就是屬性的集合；
2、對象與函數的關系？
對象都可以看做是由構造函數Object實例化生成的；
函數都可以看做是由構造函數Function實例化生成的；
構造函數Object也是由構造函數Function生成的；
1、原型prototype
__proto__屬性，__proto__屬性指向創建該對象的函數的原型prototype；
prototype屬性，其prototype屬性值是一個對象；
prototype屬性的，函數是沒有__proto__屬性的；
prototype，可以實現對象屬性的繼承，即創建在構造函數原型上的方法和屬性可以被所有由該構造函數生成的實例所共享；
2、原型鏈
原型鏈描述的是對象的繼承圖譜（類似于家譜圖），當訪問一個對象的屬性的時候，會在該對象中進行查詢，如果在該對象中沒有查詢到，則會沿著該對象的__proto__線進行查詢，直到查詢到該屬性或者到Object.prototype，這樣層層向上查詢的線路就是該對象的原型鏈。
3、instanceof
A instanceof B
A的原型鏈上是否存在B的原型來確定A的數據類型；
藍藍設計的小編 http://m.skdbbs.com