1 閉包
javascript中的閉包，實際上就是函數內部可以直接讀取外部的全局變量
比如：
var n="test";
function f1()
{
alert(n);
}
f1() //輸出test
但在函數外部無法訪問函數內部的變量，比如
function f1()
{
var n="test";
}
alert(n);//error
有時需要得到函數內部的變量，則要通過函數中的函數去實現
function f1()
{
var n="test";
function f2()
{
alert(n); //輸出test
}
}
f2可以訪問F1中的內部變量，但F2中的內部變量對F1不可見。所以可以寫成如下形式，以在F1的外部
得到其值
function f1()
{
var n="test";
function f2()
{
alert(n); //輸出test
}
return f2;
}
var result=f1();
result();//輸出test
這個時候f2稱爲F1的閉包
2 jquery中的加載：
$(document).ready( function() { })跟window.onload的區別。其中$(document).ready在框架加載
完畢後就可以使用，而window.onload必須是所有的頁面加載完成後才能用。
$(document).ready( function() { })等價於 $(function() { } )
3 jquery中的獲取元素小結：
1） 通過標籤名改變格式
<span>span標籤的顏色變爲紅色</span>
$(function(){
$("span").css("color","red");
});
2)通過id選擇器
<div id="id_name">標籤id爲id_name，變紅色</div>
$(function(){
$("#id_name").css("color","red");
});
3） 通過類名獲取元素
<div class="className">這個標籤的類名爲className，因此變爲紅色</div>
<div>沒有定義標籤的類名，不改變顏色</div>
$(function(){
$(".className").css("backgroundColor","red");
});
4） 一次性獲取多個元素
比如下面將多個元素的背景設置爲紅色，用逗號分開
$(function(){
$("p, #id_name, .className").css("backgroundColor","red");
});
5） 根據元素的屬性值獲得元素
<p id="p_test1" class="class1">p標籤中定義了id屬性，變紅色
$("p[id]").css("color","red");
6） 通過過濾器獲得元素
比如獲得第一個元素 :first,最後一個元素last
第0個li的文字變爲紅色<h3><span>第1個li</span>不變色</h3>第2個li不變色<span>第3個li不變色</span>最後一個li不變色
$(function(){
$("li:first").css("color","red");
});
此外還有li:last,li:even(偶數）,li:odd（奇數),:empty（獲得空元素） :parent(獲得非空元素)
7) 獲得表單元素
$(function(){
$("#msg").html(
"input元素有"+$(":input").length+"個(取得所有表單元素)<br/>"+
"text屬性的元素有"+$(":text").length+"個(取得text屬性的元素)<br/>"+
"password屬性元素有"+$(":password").length+"個(取得password屬性的元素)<br/>"+
"radio元素有"+$(":radio").length+"個(取得單選按鈕元素)<br/>"+
"checkbox元素有"+$(":checkbox").length+"個(取得多選按鈕元素)<br/>"+
"submit或image屬性元素有"+$(":submit").length+"個(取得submit屬性或image屬性的元素)<br/>"+
"image屬性元素有"+$(":image").length+"個(取得image屬性的元素)<br/>"+
"reset屬性元素有"+$(":reset").length+"個(取得reset屬性的元素)<br/>"+
"button屬性元素有"+$(":button").length+"個(取得button屬性的元素或button標籤)<br/>"+
"file屬性元素有"+$(":file").length+"個(取得file屬性的元素)<br/>"+
"hidden屬性元素有"+$("input:hidden").length+"個(取得hidden屬性的表單元素)"
);
});
8） 過濾器獲得表單元素
<form>
- <label>訂單號碼</label><input type = "text" name="" disabled="disabled"/>
-
<label>訂單所有者</label><input type = "text"/>
<li><input type = "checkbox" name="category" value="紅"/><label>紅</label>
<input type = "checkbox" name="category" value="黃"/><label>黃</label>
<input type = "checkbox" name="category" value="藍"/><label>藍</label>
<input type = "checkbox" name="category" value="紫"/><label>紫</label>
<input type = "checkbox" name="category" value="白"/><label>白</label></li>
<li><select multiple= "multiple " >
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
</select/></li>
</form>
<div id="msg">
<p id="option">
</div>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("input:text:enabled").val("能輸入");
$("input:text:disabled").val("不能輸入");
(function checkboxclick(){
$(":checkbox").unbind("click",checkboxclick);
var val='';
$(":checkbox:checked").each(function(){
val += $(this).val()+',';
});
$("#category").html("選擇的數據："+val);
$(":checkbox").click(checkboxclick);
})();
$("select").change(function(){
var txt='';
$("select option:selected").each(function(){
txt += $(this).text() + ',';
});
$("#option").html("選擇的選項是："+txt);
}).trigger("change");
});
</script>
這裏也演示了checkbox和option list中的事件操作用法了
9
獲取指定元素一致的元素
$('p').filter('.center');//獲取類屬性名爲center的標籤元素
10 獲取指定範圍的元素
//設置4到6標籤的背景色成黃色。
$(function(){
$("p").slice(4,7).css("backgroundColor","yellow");
});
11 獲取當前元素的前一個元素，後一個元素，父元素
$(function(){
$("p").next('.yes').css('backgroundColor','yellow');
});
前一個元素：
$(function(){
$("p").prev('.yes').css('backgroundColor','yellow');
});
父元素：
$(function(){
$("p").parent().css('backgroundColor','yellow');
});
子元素：
<div id="content">
0號
1號
3號
4號
5號
6號
7號
<div>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#content").children(".yes").css('backgroundColor','yellow');
});
12 在元素的不同位置添加元素
1）在元素內部添加元素
$(function(){
$("#content").append("追加的新文字串。");
});
2） $(a).append(b)，爲在A元素後添加B，$(a).appendTo(b),則表示將A添加到B後
3）在元素的開始位置加內容
$("p").prepend("<span>追加的新字符串。</span><br/>");
$(a).prepend(b)，爲在A元素後添加B，$(a).prependTo(b),則表示將A添加到B後
4) 在元素後追加兄弟元素，比如
在此標籤的後面追加內容。
同樣也在此標籤的後面追加內容。
$(function(){
$("p").after("<span>追加的新字符串。</span>");
});
則在所有的元素後都會添加字符串，相反，也有before
5) wrap
<span>將span標籤包含進div標籤中。</span><br/>
$("span").wrap("<div><p>
</div>");//將<span>標籤包含到<div>
</div>中去
6）替換元素
$(a).replaceWith(B) 用B元素替換A元素
$(a).replaceAll(B) 將B元素替換成A元素
7） 刪除元素
empty()，刪除元素
<p id="emptyTest">此標籤的使用empty方法進行刪除。
<p class="emptyTest">準備使用remove方法刪除。
$("#emptyTest").empty();
$("p").remove(".emptyTest");
13 獲取與設置屬性
1） attr:設置屬性，比如
$("p#two").attr("title","修改two的title屬性。");
2） 刪除屬性值
$("p#one").removeAttr("style");
3）增加CLASS
$("p#two").addClass("redbox");
4） 刪除
$("p#two").removeClass("redbox");
5） toggleClass(class),當指定類名存在，則刪除，否則添加
toggleClass(class,swith),當switch表達式爲真，則追加，爲假，則刪除
6） 設置HTML元素
<p id="one"><b>第一個</b>p標籤的內容。
var val=$("p#one").html();
$("p#two").html(val);
7) 設置CSS
<p id="one">將此標籤的文字變爲紅色
$('p#one').css('color','red');
$('p#two').css({color:'white',backgroundColor:'green'});
14 函數事件
1) bind和unbind
2) toggle(fn1,fn2,fn3) 定義元素被單擊時按順序執行定義的函數
<button id="one">提交</button>
<p id="two">文字顏色在紅/綠/黑間切換。
</body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('button#one').toggle(function(){
$('p#two').css('color','red');
},function(){
$('p#two').css('color','green');
},function(){
$('p#two').css('color','black');
});
});
</script>
15） AJAX控制
$.ajax(options)或jQuery.ajax(options)
在此放置讀入的內容。
$(function(){
$.ajax({
url:'test.html',
success:function(data){
$('p#ajax').html(data);
}
});
});
16 ajaxcomplete
例子如下：
<div id="comp">在此放置ajax完成時的信息。</div>
<div id="exec">在此放置讀入的內容。</div>
ajax.html:
-
第0號li元素。
-
第1號li元素。
-
第2號li元素。
-
第3號li元素。
-
第4號li元素。
$(function() {
$('div#comp').ajaxComplete(function()
{
$(this).html(..............)
} );
ajax通信失敗
$(function(){
$('div#error').ajaxError(function(){
$(this).html("ajax送信失敗...
").css('color','red');
});
$('div#exec').load('noajax.html');
});