js/jquery学习笔记
?
javascript簡介
JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言.
不同于服務器端腳本語言，例如PHP與ASP，JavaScript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運行，不需要服務器的支持而可以獨立運行 .
JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱 點是安全性較差，而且在JavaScript中，如果一條運行不了，那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯，加載后，有些代碼會延 遲至運行時才解譯，甚至會多次解譯，所以速度較慢。
關鍵詞：基于對象，事件驅動，客戶端語言
?
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
?
趨勢分析：--瀏覽軌跡 開始時間 停留時間 頁面url
| 1 | jsDOM里面有這些值的獲取： |
上面js可以獲得用戶從那個頁面跳轉到你的頁面，實現瀏覽軌跡 上下游頁面的url
還有一個就是獲取到在頁面停留的時間：
<!--頁面停留了多少時間--><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>
?
來源分析---搜索工具來源
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>?
打造屬于自己的谷歌地圖版博客公告【演示+源碼】
瀏覽器的獲取，訪問頁面數量，新老訪客：這些都比較容易實現
職業屬性：這個就是不知道怎么分析的了
?
百度特色---熱力圖
先在網站蒙上一層圖層，采集用戶點擊的密度數據，然后在把根據返回的數據動態增加色彩，這里有一篇介紹百度熱力圖的文章：基于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学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sqlserver日志文件过大的处理方法
- 下一篇： 将decimal类型的数据转成2.12这