?

javascript簡介

JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言.

不同于服務器端腳本語言，例如PHP與ASP，JavaScript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運行，不需要服務器的支持而可以獨立運行 .

JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱 點是安全性較差，而且在JavaScript中，如果一條運行不了，那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯，加載后，有些代碼會延 遲至運行時才解譯，甚至會多次解譯，所以速度較慢。

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

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

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

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

?

javascript作用

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

百度統計個人初探

本人博客統計使用了百度統計，很是好奇百度統計是怎么統計我的博客一些信息，研究了一下js部分實現沒有什么技術可言，如何把采集的數據處理感覺才是很牛逼，不多說了，先說說百度統計實現功能：

百度統計實現功能

網站統計：訪客數量計數

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

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

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

?

網站統計：訪客數量計數

下面使用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??
});??
});??
2、$(document).ready(function(){??
$("#a").click(function(){??
//adding your code here???
});??
});??
3、window.onload = function(){??
$("#a").click(function(){??
//adding your code here??
});??
}

?

第一種 第二種：

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

第三種：

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

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

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

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

ps：初探百度統計，最不懂的就是數據處理部分了，好了，以后的時間可以專注與數據庫的知識了

轉載于:https://www.cnblogs.com/sunscheung/p/4699224.html

總結

以上是生活随笔為你收集整理的js/jquery学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。