1、$(function(){})是什么
-----------------(1)-----------------
$(function() {
//...
});
-----------------(2)-----------------
$(document).ready(function(){
//...
});
-----------------(3)-----------------
window.onload = function() {
//...
}
說明：(1)就是(2)的簡寫形式，window.onload 只能出現(xiàn)一次，而(1)、(2)可以出現(xiàn)多個(gè)次，都是指當(dāng)文檔載入完畢后執(zhí)行。如果該段js代碼放到了dom文檔的最后，可以不用寫這幾個(gè)方法。
注意：$(document).ready(function(){...})里面還可以定義多個(gè)函數(shù)。但是，外面的語句無法調(diào)用里面的函數(shù)；
2、常用的選擇器
| 選擇器 | 舉例 | 說明 |
|---|---|---|
| #id | $("#lastname") | 選取id="lastname" 的元素 |
| .class | $(".intro") | 選取class="intro" 的所有元素 |
| element | $("p") | 選取所有<p> 元素 |
| :first | $("p:first") | 選取第一個(gè)<p> 元素 |
| :input | $(":input") | 選取所有 input 元素 |
實(shí)例
(1)獲取value等于10的input元素：$("input[value=" + 10 + "]")
(2)獲取id="hahaha"的直接父元素：$("#hahaha").parent
3、jQuery對(duì)象與DOM對(duì)象的相互轉(zhuǎn)換
(1)jQuery通過選擇器獲取的對(duì)象并不是原生的DOM對(duì)象。
jQuery對(duì)象是包裝DOM對(duì)象后產(chǎn)生的，是一個(gè)數(shù)據(jù)對(duì)象；jQuery無法使用DOM對(duì)象的任何方法，DOM對(duì)象也不能使用jQuery的任何方法。$("#test").innerHTML、document.getElementById("id").html()之類的寫法都是錯(cuò)誤的。
(2)jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象：
$("#id") [0]：其中$("#id")是jQuery對(duì)象，$("#id") [0]是DOM對(duì)象，在后面加上[0]可以獲取對(duì)應(yīng)的DOM對(duì)象，或者使用$("#id").get(0)同樣可以獲取。
(3)DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象:
只需要用$()把DOM對(duì)象包裝起來，就可以獲得一個(gè)jQuery對(duì)象，如：
var v = document.getElementById("id"); //DOM對(duì)象
var v1 = $(v); //jQuery對(duì)象
4、jQuery設(shè)置元素的屬性等
假如有元素：<div id="haha"><input id="haha1" value="zhangSan"></div>
(1)設(shè)置某元素的高度：$("#haha").height("200px");
(2)設(shè)置某元素的樣式：$("#haha").css("display", "none");
(3)獲取瀏覽器窗口的高度：$(window).height()
(4)獲取input元素的值：$("#haha1").val()
(5)設(shè)置input元素的值：$("#haha1").val("liSi")
(6)設(shè)置src、href等屬性：
$('#img-id').attr("src","http://你的圖片地址");
$('#a-id').attr("href","http://你的鏈接地址");
5、常用處理方法
(1)屏蔽html標(biāo)簽：$('<div/>').text("<h1>我是h1標(biāo)簽</h1>").html()
(2)顯示文本內(nèi)容：假如使用p標(biāo)簽<p id="text-viewer"></p>，然后設(shè)置為：$("#text-viewer").html("要顯示的文本內(nèi)容");
(3)text()、html() 、與val()的區(qū)別
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val()- 設(shè)置或返回表單字段的值
(4)獲取某元素的scrollHeight值(實(shí)際高度，即使有由于滾動(dòng)而不接見的部分)：
$("#id").prop('scrollHeight')
引自：Stack Overflow
---------------------------------
There is no scrollHeight in jQuery - it's scrollTop():
var elemHeight = $("#container").scrollTop();
var scrollHeight = $("#scrollbars").scrollTop();
Alternatively if you want to use the native scrollHeight property,
you need to access the DOM element in the jQuery object directly, like this:
var elemHeight = $("#container")[0].scrollHeight;
var scrollHeight = $("#scrollbars")[0].scrollHeight;
------------------------------------
If you are using Jquery 1.6 or above, use prop to access the value.
$("#container").prop('scrollHeight')
Previous versions used to get the value from attr but not post 1.6.
6、jQuery常用事件
| 事件 | 說明 | 舉例 |
|---|---|---|
| click() | 點(diǎn)擊元素時(shí) | $("p").click(function(){ //...}); |
| dblclick() | 雙擊元素時(shí) | $("p").dblclick(function(){//...}); |
| mouseenter() | 鼠標(biāo)指針穿過元素時(shí) | $("#p1").mouseenter(function(){//...}); |
| hover() | 光標(biāo)懸停在元素時(shí) | $("#p1").hover(function(){//...}); |
| mousedown() | 鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí) | $("#p1").mousedown(function(){}); |
| mouseup() | 在元素上松開鼠標(biāo)按鈕時(shí) | $("#p1").mouseup(function(){//... }); |
| focus() | 元素獲得焦點(diǎn)時(shí) | $("input").focus(function(){//...}); |
| blur() | 當(dāng)元素失去焦點(diǎn)時(shí) | $("input").blur(function(){/...}); |
另外兩個(gè)：
bind()：向被選元素添加一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
unbind()：從被選元素上移除添加的事件處理程序。
常用處理方法：
禁用右鍵：
$("#container").bind("contextmenu",function(e){
return false;
});
禁止選擇文字：這里，選擇器可以是某個(gè)元素，但是如果寫成某個(gè)元素，依然可以從其他元素元素文字，然后拉動(dòng)鼠標(biāo)，選中你禁止選擇文字的元素，所以最好用document。
//適用IE和Chrome
$(document).bind("selectstart",function(){return false;});
//適用Firefox:注意這里不能寫document，否則會(huì)無效
$(document.body).css("-moz-user-select", "none");
監(jiān)聽窗口大小改變
$(window).resize( function(){
//調(diào)整視頻view的容器的高度
$("#vedio-viewer").height($("#vedio-viewer").width()*2/3);
});
為input標(biāo)簽綁定enter事件
$("#input-id").keypress(function(e) {
var key = window.event ? e.keyCode : e.which;
if (key.toString() == "13") {//enter鍵
//執(zhí)行一些操作
...
...
//防止事件繼續(xù)傳遞
return false;
}
});
點(diǎn)擊某一元素外的區(qū)域的事件
$(document).not($("#nav-search-input")).click(function(){
//點(diǎn)擊除nav-search-input之外的其他區(qū)域觸發(fā)的事件
});
//但是要加上這個(gè)，防止事件繼續(xù)傳遞
$("#nav-search-input").click(function(event) {
event.stopPropagation();
//操作...
});
禁止輸入特殊字符
$("#input-id").on('input',function(e){
var search = $("#input-id").val();
$("#input-id").val(search.replace(/\#/g, ''));
});
7、jQuery循環(huán)遍歷
$(".hahaha").each(function(){//對(duì)所有class中含有hahaha的元素進(jìn)行循環(huán)操作
//這里可以用this表示當(dāng)前遍歷的jQuery對(duì)象
});
8、其他
(1)判斷字符串是否以特定字符串結(jié)尾
String.prototype.endWith=function(endStr){
var d=this.length-endStr.length;
return (d>=0&&this.lastIndexOf(endStr)==d)
}
function(name){
name = name.toLowerCase();
if(name.endWith(".docx") ){
//...
...
}
}
9、ajax
$.ajax({
cache : false,//布爾值，表示瀏覽器是否緩存被請(qǐng)求頁面。默認(rèn)是 true。
type : "POST",//規(guī)定請(qǐng)求的類型（GET 或 POST）。
url:"請(qǐng)求的url路徑",//規(guī)定發(fā)送請(qǐng)求的 URL。默認(rèn)是當(dāng)前頁面。
data :... ,//規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)。
//這里要說明的是，data有三種形式：
文本形式 data : "uname=alice&mobileIpt=110",(也可以在url后面直接拼接)
json對(duì)象 data : {uanme:'vic',mobileIpt:'110'},
json數(shù)組 data : [
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":"2012-11-11"}
],
//如果是表單數(shù)據(jù)，可以這樣寫：
data : $('#表單的id').serialize(),
async : false,//布爾值，表示請(qǐng)求是否異步處理。默認(rèn)是 true。
error : function(request) {//如果請(qǐng)求失敗要運(yùn)行的函數(shù)。
//...
...
},
success : function(data) {//當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。
//假如獲取的數(shù)據(jù)類型是Map，如何取值？
//后臺(tái)Map map = new HashMap(); map.put("name", "zhangsan");
可以這樣來處理：data = eval("(" + data + ")");
那么data.name就是字符串"zhangsan"
//如何獲取map的長度
var length = Object.keys(data).length ;
...
}
});
10、jQuery對(duì)各種數(shù)據(jù)的處理
待續(xù)
11、關(guān)于瀏覽器
(1)獲取瀏覽器的flash有沒有安裝以及版本
//使用示例
var flash = flashChecker();
if(!flash.f){
//安裝了flash插件
console.log("flash的版本是：" + flash.v);
}else{
//沒安裝flash插件
$("#vedio-viewer").html("<p style='margin-top:20px;'>
您的瀏覽器沒有安裝flash插件，需安裝后才能播放視頻：
</p><a );
}
//函數(shù)定義
function flashChecker(){
var hasFlash = 0; // 是否安裝了flash
var flashVersion = 0; // flash版本
if (document.all) {
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (swf) {
hasFlash = 1;
VSwf = swf.GetVariable("$version");
flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i) {
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return {f:hasFlash,v:flashVersion};
}
