js/jquery學習筆記

時間 2019-11-19

原文原文鏈接

javascript簡介

JavaScript是一種基於對象和事件驅動並具備相對安全性的客戶端腳本語言.javascript

不一樣於服務器端腳本語言，例如PHP與ASP，JavaScript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運行，不須要服務器的支持而能夠獨立運行 .php

JavaScript是一種腳本語言，其源代碼在發往客戶端運行以前不需通過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差，並且在JavaScript中，若是一條運行不了，那麼下面的語言也沒法運行。並且因爲每次從新加載都會從新解譯，加載後，有些代碼會延遲至運行時才解譯，甚至會屢次解譯，因此速度較慢。css

關鍵詞：基於對象，事件驅動，客戶端語言html

基於對象：所謂萬物皆對象，不提供抽象、繼承、重載等有關面嚮對象語言的功能

事件驅動：js的觸發都是以事件觸發引發，必須有事件觸發才能夠

客戶端語言：指js的解析和執行由瀏覽器來解釋

javascript做用

JavaScript 使網頁增長互動性。JavaScript 使有規律地重複的HTML文段簡化，減小下載時間。JavaScript 能及時響應用戶的操做，對提交表單作即時的檢查，無需浪費時間交由CGI 驗證….java

百度統計我的初探

本人博客統計使用了百度統計，非常好奇百度統計是怎麼統計個人博客一些信息，研究了一下js部分實現沒有什麼技術可言，如何把採集的數據處理感受纔是很牛逼，很少說了，先說說百度統計實現功能：jquery

百度統計實現功能

網站統計：訪客數量計數ajax

趨勢分析：--受訪頁面瀏覽軌跡開始時間停留時間頁面url ，包括上下游算法

來源分析---搜索工具（頁面）數據庫

訪客屬性---地域屬性，瀏覽器，職業屬性，新老訪客，訪問頁面數量（忠誠度）json

網站統計：訪客數量計數

下面使用js cookie原理實現一個訪客計數的js

 1 <script language="JavaScript">
 2 <!--
 3 var caution = false
 4 function setCookie(name, value, expires, path, domain, secure) {
 5     var curCookie = name + "=" + escape(value) +
 6     ((expires) ? "; expires=" + expires.toGMTString() : "") +
 7     ((path) ? "; path=" + path : "") +
 8     ((domain) ? "; domain=" + domain : "") +
 9     ((secure) ? "; secure" : "")
10      
11     if (!caution || (name + "=" + escape(value)).length <= 4000)
12         document.cookie = curCookie
13     else if (confirm("Cookie exceeds 4KB and will be cut!"))
14     document.cookie = curCookie
15     }
16      
17 function getCookie(name) {
18     var prefix = name + "="
19     var cookieStartIndex = document.cookie.indexOf(prefix)
20     if (cookieStartIndex == -1)
21         return null
22     var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
23     if (cookieEndIndex == -1)
24         cookieEndIndex = document.cookie.length
25         return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
26     }
27 function deleteCookie(name, path, domain) {
28     if (getCookie(name)) {
29     document.cookie = name + "=" +
30     ((path) ? "; path=" + path : "") +
31     ((domain) ? "; domain=" + domain : "") +
32     "; expires=Thu, 01-Jan-70 00:00:01 GMT"
33     }
34     }
35      
36 function fixDate(date) {
37     var base = new Date(0)
38     var skew = base.getTime()
39     if (skew > 0)
40     date.setTime(date.getTime() - skew)
41 }
42  
43 var now = new Date()
44 fixDate(now)
45  
46 now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)
47 var visits = getCookie("counter")
48 if (!visits)
49     visits = 1
50 else
51     visits = parseInt(visits) + 1
52     //setCookie("counter", visits, now)
53     document.write("您是第" + visits + "訪客！")
54 // -->
55 </script>

View Code

每次頁面訪問，頁面就會加1，得到ip後還可進一步分析PV，UV數據

趨勢分析：--瀏覽軌跡開始時間停留時間頁面url

 
        1 
        jsDOM裏面有這些值的獲取：

 
      <!--得到上級url-->
<script type="text/javascript">
document.write(document.referrer);//上級url
document.write(document.URL);//當前url
document.write(document.domain);//域名
//document.write(document.cookie);//cookie值
document.write(document.lastModified);//當前文檔修改最新時間
document.write(document.title);//當前頁面標題
</script>
 
     

上面js能夠得到用戶從那個頁面跳轉到你的頁面，實現瀏覽軌跡上下游頁面的url

更多信息獲取能夠參考：

http://www.w3school.com.cn/htmldom/dom_obj_document.asp

還有一個就是獲取到在頁面停留的時間：

<!--頁面停留了多少時間-->

<form name=forms>
<p>你在網頁已停留了：</p>
<input type=text name=input size="12">
<script language="javascript">
var second=0;
var minute=0;
var hour=0;
idt=window.setTimeout("interval();",1000);
function interval(){
second++;
if(second==60){second=0;minute+=1;}
if(minute==60){minute=0;hour+=1;}

document.forms.input.value=hour+"時"+minute+"分"+second+"秒";
idt=window.setTimeout("interval();",1000);}
</script>
</form>

根據當前頁面停留時間和上下游的頁面信息，基本上能夠分析出在你網站的瀏覽軌跡和頁面停留時間

來源分析---搜索工具來源

判斷從哪一個搜索工具找到你的網站，剛開始非常好奇這個功能，原理其實很簡單，

上面說過：document.write(document.referrer);//上級url

這個能夠獲取到你上級頁面，加入你是從百度進入我博客的

那麼得到的url就是：http://www.baidu.com/baidu?wd=php%BB%B4%B1%B1&tn=monline_dg

看到沒有上級url裏面包含baidu，就能夠粗略的判斷你是從百度訪問個人頁面：

if(document.referrer.indexOf(「baidu」)!=-1){

alert(‘歡迎從百度搜索到PHP淮北的博客！’);

}

根據這一原理，判斷百度谷歌雅虎等等搜索來源就很簡單的實現了

注：園友問關於關鍵詞的分析，這裏淺析一下搜索關鍵詞，以百度爲例：

百度搜索「PHP淮北」的url：http://www.baidu.com/baidu?wd=php%BB%B4%B1%B1&tn=monline_dg

其中wd部分就是搜索關鍵詞，你能夠js解碼得到搜索關鍵詞，同理能夠分析其餘搜索工具的搜索關鍵

訪客屬性---地域屬性，瀏覽器，職業屬性，新老訪客，訪問頁面數量（忠誠度）

訪客的屬性根據用戶的ip信息來獲取到地域熟悉，咱們可使用第三方的ip接口來實現獲取地理位置，如新浪接口

<script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
<script type="text/javascript">document.write("歡迎來自："+remote_ip_info.country+remote_ip_info.province+remote_ip_info.city+"的朋友！");
</script>

本人右側的博客地圖就是使用新浪的ip接口，主要是返回的是json數組，詳細參考：

打造屬於本身的谷歌地圖版博客公告【演示+源碼】

瀏覽器的獲取，訪問頁面數量，新老訪客：這些都比較容易實現

職業屬性：這個就是不知道怎麼分析的了

百度特點---熱力圖

先在網站蒙上一層圖層，採集用戶點擊的密度數據，而後在把根據返回的數據動態增長色彩，這裏有一篇介紹百度熱力圖的文章：基於Canvas的熱力圖繪製方法

跨域傳值

使用js得到用戶的數據以後，確定須要把採集的數據傳遞出去，這個就涉及到js跨域傳值了，

js靜態跨域傳值：

使用script標籤，這個script標籤的src屬性指向咱們api的url，並提供 api須要的一些參數，一般其中包括了一個做爲callback的js函數名。針對這個腳本請求，咱們服務器端的http handler會根據url中攜帶的參數，生成並返回相應的腳本，一般這個腳本的內容是調用callback函數，並傳入用戶須要的數據做爲參數，使用雅虎的一個例子；

<script type="text/javascript">
function ws_results(obj)
{
alert(obj.ResultSet.totalResultsAvailable);
}
</script>
<script type="text/javascript"src="http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=ws_results"></script>

這種傳值的缺點是靜態的，不能動態獲取參數傳值，由於url傳遞參數已經寫死

動態傳值跨域：

可使用jquery的$.getJSON，以jquery手冊爲例：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });

跨域說明：只支持get方式傳值，url裏面callback必定要設置，返回數據爲json數據結構，在這裏再次稱讚一次json數據結構，可謂是短小精悍，

以前接觸過序列化存儲，感受序列化把數據變繁雜了。關於getjson方法更多能夠參考jquery手冊

處理數據

使用原生的js能夠採集到數據，使用jquery裏面的gejson能夠把採集到的數據跨域傳值，最最繁雜的就是這個大量數據的處理了，這裏可能設計到算法和深層數據結構知識，這個我不懂.

ps：這裏我感受爲何淘寶DB團隊很強大了，不是通常人能夠搞這個

附帶上面的代碼：點擊下載js統計源碼

JQUEY學習

jquery簡介：

jQuery 是一個「寫的更少，但作的更多」的輕量級 JavaScript 庫。

優勢：

1：比較強大的函數功能，比較js體積也比較小

2；解決瀏覽器的兼容問題

3：AJax交互

4：豐富的插件和社區支持

5：保持html和js分離

6：第三方插件不少，這也是一個插件的時代。

設計思想

$(selector).action()

$符號定義 jQuery

選擇符（selector）HTML 元素

jQuery 的 action() 執行對元素的操做

-----總結：就是先選擇對象在操做，上面也說到js是一種基於對象的語言。

分類

按照：JavaScript是一種基於對象和事件驅動並具備相對安全性的客戶端腳本語言

來分jquery的話：

基於對象選擇：萬能的選擇器

事件驅動：事件觸發類/css 類/ajax/動畫操做/文檔插入

另外還有一些工具方法，沒必要選擇元素能夠直接使用，如瀏覽器檢測方法等

這裏重點介紹選擇器，

萬能的選擇器

jquery名字裏有query就查詢，如何查詢出所須要的元素很重要，

（1）最快的選擇器：id選擇器和元素標籤選擇器

$('#id')

$('form')

$('input')

遇到這些選擇器的時候，jQuery內部會自動調用瀏覽器的原生方法（好比getElementById()），因此它們的執行速度快。

（2）較慢的選擇器：class選擇器

$('.className')的性能，取決於不一樣的瀏覽器。

（3）最慢的選擇器：僞類選擇器和屬性選擇器

找出網頁中全部的隱藏元素，就要用到僞類選擇器：

$(':hidden')

屬性選擇器的例子則是：

$('[attribute=value]')

這兩種語句是最慢的，由於瀏覽器沒有針對它們的原生方法。可是，一些瀏覽器的新版本，增長了querySelector()和querySelectorAll()方法，所以會使這類選擇器的性能有大幅提升。

總結：選擇器優先級：id>class>屬性

其實這個也很容易理解，就像你想找人，id相似人的身份證，具備惟一性，class是人的副主屬性如人的名字，（可是名字能夠能重複）效果小於身份證，最後根據這我的的穿戴屬性查找（這個比名字重合的機率更高）

4）

善於利用jQuery鏈

jQuery鏈不但容許以簡潔的方式寫出強大的操做，並且提升了開發效率，由於它可以把多個命令應用到包裝集，而沒必要從新計算包裝集。從而你不用再這樣寫了：

記住，永遠不要讓相同的選擇器在你的代碼裏出現屢次.

如：

$("#traffic_light input.on").bind("click", function(){  });
    $("#traffic_light input.on").css("border", "1px dashed yellow");

能夠改寫成：

var $active_light = $("#traffic_light input.on");
    $active_light.bind("click", function(){  });
    $active_light.css("border", "1px dashed yellow");

更多jquery性能優化參考：http://kb.cnblogs.com/page/48099/

jQuery最佳實踐：http://kb.cnblogs.com/page/110902/

http://kb.cnblogs.com/page/52290/2/

http://kb.cnblogs.com/zt/jquery/

jquery初始化

$(function(){
$("#a").click(function(){
//adding your code here
});
});
二、$(document).ready(function(){
$("#a").click(function(){
//adding your code here
});
});
三、window.onload = function(){
$("#a").click(function(){
//adding your code here
});
}

第一種第二種：

就僅僅只須要加載全部的DOM結構，在瀏覽器把全部的HTML放入DOM tree以前就執行js效果。包括在加載外部圖片和資源以前。

第三種：

這段代碼會在整個頁面的document所有加載完成之後執行。不幸的這種方式不只要求頁面的DOM tree所有加載完成，並且要求全部的外部圖片和資源所有加載完成。更不幸的是，若是外部資源，例如圖片須要很長時間來加載，那麼這個js效果就會讓用戶感受失效了。

可是一些特效的功能，例如拖放, 視覺特效和動畫, 預載入隱藏圖像等等，都是適合這種技術場合

*******************************

好吧js的學習筆記就到此了，更多的學習須要實踐和經驗，

ps：初探百度統計，最不懂的就是數據處理部分了，好了，之後的時間能夠專一與數據庫的知識了