黑馬程式設計師--JQuery學習筆記
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS開發</a>、<a
href="http://edu.csdn.net"target="blank">.Net培訓</a>、期待與您交流！ ----------------------
1.JQuery簡介
普通的JavaScript的缺點：每種空間的操作方式不統一，不同瀏覽器下有區別，要編寫跨瀏覽器的程式非常麻煩。因此出現了很多對JavaScript的封裝庫，比如Prototype、Doio、ExtJS、JQuery等，這些庫對JavaScript進行了封裝，簡化了研發。和諧庫對JavaScript的封裝，也就是我們呼叫JQuery的一句函式，JQuery內部這句函式幫我們呼叫JavaScript中的程式碼幾十句，因為JQuery就是JavaScript預壓寫的一些函式類，內部仍然是呼叫JavaScript實現的，所以並不是代替JavaScript的。使用JQuery的程式碼、編寫JQuery的擴充套件外掛仍然需要JavaScript的技術，JQuery本身就是一堆JavaScript函式。JQuery是最火的JavaScript庫，已經被整合到VS2010中了，得到了MS的支援，MS的Ajax、toolkit和JQuery結合也是最方便，JQuery的擴充套件外掛也是非常多。
JQuery可以和JavaScript混合使用.就像在MFC中依然可以呼叫WIN32函式
2.JQuery之ready
$(document).ready(function(){alert("載入完畢");})//註冊事件函式，和普通dom不一樣，不需要在元素上標記on**這樣的事件。
DOM中的事件onload只能註冊一次，後註冊的取代先註冊的。而ready則可以多次註冊都會被執行。
onload是所有dom元素建立完成，，圖片、css等都載入完畢後才被觸發，而ready則是dom元素建立完畢後就被觸發，這樣可以提高網頁的響應速度。在JQuery中也可以用$(window).load()來實現onload那種事件呼叫的時機。
當頁面Dom元素載入完畢時執行程式碼，可以簡寫為：
$(function(){alert("載入完畢！");});
3.JQuery提供的一些函式
<1>$.map(array,fn)對陣列array中的每個元素呼叫fn函式逐個進行處理，fn函式將處理返回，最後得到一個新的array。
var arr=[3,5,9];
var arr2=$.map(arr,function(item){return item*2})；
$.map不能處理Dictionary風格的陣列。
<2>$.each(array,fn)對陣列array每個元素呼叫fn函式進行處理，沒有返回值。
var arr={"tom":"湯姆","jim":"吉姆","jerry":"傑瑞"};
$each(arr.function(key,vlaue){alert(key+"="+value);});
如果是普通風格的陣列，則key的值是序號。
$each(arr.function(key){alert(key)});
單個元素取得key。
$each(arr.function(){alert(this)});
沒有引數使用this取得value。
4.JQuery物件和Dom物件
JQuery物件就是通過JQuery包裝Dom物件後產生的物件。
<1>alert($('#div1').html())。Dom物件要通過JQuery進行操作，先要轉換為JQuery物件進行操作。
$('#div1').html()等價於:document.getElementById("div1").innerHTML。
$('#div1')得到的就是JQuery物件，JQuery物件只能呼叫JQuery物件封裝的方法，不能呼叫Dom物件方法和屬性。
Array是JS語言本身的物件，不是Dom獨享，因此不需要轉換為JQuery物件才能用。
<2>將JQuery物件轉換為Dom物件的方法，$(dom物件);當呼叫JQuery沒有封裝方法的時候必須用Dom物件，轉換方法 var domobj=jqobj[0]或者var domobj=jqobj.get(0)
var div1_2=$(div1)[0];alert(div1_2.innerHTML);
<3>JQuery修改樣式：$('#div1').css("background","red");
獲得樣式$("#div1").css("background");
修改value:$("#un").val("abc")
獲得value:$("#un").val().型別的獲得、設定innerText、innerHTML用text()和html()。
5.JQuery選擇器
<1>JQuery選擇器使用者查詢滿足條件的元素，比如可以用$("#控制元件id")來格局空間id獲得空間的JQuery物件，相當於getElementById:$("#div1").html("<font color=red>hello</font>")
<2>$("TagName")來獲取指定標籤的JQuery物件，相當於getElementsByTagName:
$(function(){$("p").click(function(){laert("we are p")});})在載入完成以後再呼叫，否則沒有物件。隱式迭代，給所有選擇出來的元素增加click事件。
<3>CSS選擇器，同事選擇擁有樣式的多個元素。
<style type="text/css">
.test{background-color:red}
</style>
<script type="text/javascript">
$(function(){$(".test").click(function(){alert($(this).text());})};
</script>
<p class="test">test1</p>
<p class="test">test2</p>
<p class="test">test3</p>
<4>多條件選擇器:$("p,div,span.menuitem"),同時選擇p標籤、div標籤和擁有menuitem樣式的span標籤元素。
注意選擇器表示式中的空格不能多不能少。
<5>層次選擇器:
(1)$("div li")獲取div下的所有li元素(後代，子、子的子...)
(2)$("div>li")獲取div下的li子元素。
(3)$(".menuitem+div")獲取樣式名為menuitem之後第一個div元素（不常用）。
(4)$(".menuitem~div")獲取樣式名為menuitem之後所有的div元素（不常用）。
6.節點遍歷
next()方法使用者獲取節點之後的第一個同輩元素,$(".menuitem").next("div")
nextAll("div")方法用於獲取方法
後面括號是一個篩選器.
siblings()方法使用者獲取所有同輩元素,$("menuitem").siblings("li")
替換節點
$("br").replaceWith("<hr/>");
將<br/>替換為<hr/>將回車換行替換為橫線
包裹節點
wrap()方法用來將所有元素逐個用指定標籤包裹
$("b").wrap("<font color='red'></font>")將所有粗體字紅色顯示
7.基本過濾選擇器
相對定位:$("div:first",$(this))指定上下文context就會從指定位置開始.
<1>:first選取第一個元素$("div:first")選取第一個<div>
<2>:last選取最後一個元素$("div:last")選取最後一個<div>
<3>:not(選擇器)選擇不滿足"選擇器"條件的元素$("input:not(.myClass)")選取樣式名不是myClass的<input>
<4>:even/:odd,選取索引是奇數,偶數的元素:$("input:even")
<5>:eq(索引序號)/:gt(索引序號)/:lt(索引序號)選取索引等於/大於/小於索引序號的元素,比如$("input:lt(5)")選取索引小於5的<input>
<6>$(":header")選取所有的h1....h6元素.(*)
<7>$("div:animated")選取正在執行動畫的<div>元素.(*)
<8>屬性過濾選擇器
$("div[id]")選取有id屬性的<div>
$("div[title=test]")選取title屬性為"test"的<div>
$("div[title!=test]")選取title屬性不為test的<div>
$("input[name=abc]") getElementsByName進行封裝
還可以選擇開頭/結束/包含等,條件還可以符合.
<9>表單物件選擇器:
$("#form1:enabled")選取id為form1的表單內所有的啟用的元素
$("#form1:disabled")選取id為form1的表單內所有禁用的元素
$("input:checked")選取所有選中的元素(Radio/checkBox)
$("select:selected")選取所有選中的選項元素(下拉列表)
<10>表單選擇器
$(":input")選取所有<input>/<textarea>/<select>和<button>元素.和$("input")不一樣,$("input")只獲得<input>.
$(":text")選取所欲單行文字框,等價於$("input:[type=text]")
$(":password")選取所有密碼框.
同理還有:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden
8.JQuery元素的each
JQuery元素也可以呼叫each方法,只是對$.each的簡化呼叫.
<script type="text/javascript">
$(function () { $("input[name=ck]").click(function () {
var arr=new Array();
$("input[name=ck]:checked").each(function (key, value) { arr[key] = $(value).val() });
if (arr.length <= 0) {
$("#showp").text("No checkedbox had been checked!");
return;
}
$("#showp").text(arr.join(',')+"has been checked!");
})
});
</script>
</head>
<body>
<input type="checkbox" name="ck" value="beijing" />beijing<br />
<input type="checkbox" name="ck" value="nanjing" />nanjing<br />
<input type="checkbox" name="ck" value="shanghai" />shanghai<br />
<input type="checkbox" name="ck" value="tianjing" />tianjing<br />
<input type="checkbox" name="ck" value="anhui" />anhui<br />
<input type="checkbox" name="ck" value="hefei" />hefei<br />
<input type="checkbox" name="ck" value="chongqing" />chongqing<br />
<p id="showp" style="background-color:yellow"></p>
</body>
9.JQuery的Dom操作
1.使用html()方法讀取或者設定元素的innerHTML;
alert($("a:first").html());
$("a:first").html("hello");
2.使用text()方法獲取或者設定元素的innerText;
alert($("a:first").text();
$("a:first").text("hello");
3.使用attr()方法讀取或者設定元素的屬性,對於JQuery沒有封裝的屬性用attr進行操作.
alert($("a:first").attr("href"));
$("a:first").attr("href","http://www.rupeng.com");
4.使用removeAttr刪除屬性.刪除的屬性在原始碼中看不到,這是和清空屬性的區別.
5.使用$(html字串)來建立Dom節點,並且返回一個JQuery物件,然後呼叫append等方法將新建立的節點新增到Dom中.
$()建立的就是一個JQuery物件,可以完全進行操作.
append方法用來在元素末尾追加元素.
prepend在元素的開始新增元素
after在元素之後新增元素(新增兄弟)
before在元素之前新增元素(新增兄弟)
實現動態新增超連結:(新增的是子)
<script type="text/javascript">
$(function () {
var hrefs = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "CCTV": "http://www.cctv.com" };
var href;
$.each(hrefs, function (key, value) { href += ("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>") });
$("#tb").append(href);
});
</script>
</head>
<body>
<div>以下是動態建立的超連結:</div>
<table id="tb"></table>
</body>
6.remove()刪除選擇的節點,remove方法的返回值是被刪除的節點物件,還可以繼續使用被刪除的節點.比如重新新增到其他節點下.
var lis=$("#ulSite li").remove();
$("#ulSite2").append(lis);
$("ul li[class=testitem]").remove()等價於$("ul li.testitem").remove()
動態刪除節點
$(function () { $("#btn1").click(function () { $("ul li.testitem").remove();}) });
</script>
</head>
<body>
<div>以下是動態建立的超連結:</div>
<table id="tb"></table>
<input type="button" id="btn1" value="deleteyelloitem" /><br />
<ul>
<li class="testitem">abc</li>
<li>abc</li>
<li class="testitem">abc</li>
<li>abc</li>
</ul>
</body>
7.empty()是將節點清空.
10.樣式操作
獲取樣式attr("class"),
設定樣式attr("class","myclass"),
追加樣式addClass("myclass"),
移除樣式removeClass("myclass")
切換樣式(如果存在樣式則去掉樣式,如果沒有樣式則新增樣式)toggleClass("myclass"),
判斷是否存在樣式:hasClass("myclass")
11.RadioButton操作
<1>取得RadioButton的選中值
$("input[name=gender]:checked").val()
<input id="Radio2" checked="checked" name="gender"
type="radio" value="男"/>男<input
id="Radio1"checked="checked" name="gender"
type="radio"value="女"/>女<input id="Radio3" checked="checked" name="gender" type="radio"
value="未知"/>未知</p>
<2>設定RadioButton的選中值
$("input[name=gender]").val(["女"]);//[]不能省略
或者
$(":radio[name=gender]").val(["女"]);
注意val中引數的[]不能省略
12.JQuery事件屬性及移除事件繫結和一次性事件
<1>屬性:pageX/pageY/target獲得觸發事件的元素(冒泡的起始,和this不一樣),which如果是滑鼠事件獲得按鍵(1左鍵,2中鍵,3右鍵).
altKey/shiftKey/ctrlKey獲得alt/shift/ctrl是否按下,為bool值.
keyCode/charCode屬性是發生事件時候的keyCode(鍵盤碼,小鍵盤的1和主鍵盤的keyCode不一樣)/charCode(ASC碼)
<2>移除事件繫結:bind()方法即可移除元素上所有繫結的事件,如果unbind("click")則移除click事件的繫結.bind:+=;unbind:-=
<3>一次性事件:如果繫結的時間只想執行一次隨後立即unbind可以使用one()方法進行事件繫結.
示例程式碼:
1.獲得發生事件時滑鼠的位置
$(document).mousemove(function (e) { document.title=e.pageX+","+e.pageY});
2.一次性事件
$(function () { $("#oneevent").one("click", function () { alert("for one event")})});
13.實現滑鼠移到縮圖在滑鼠位置顯示大圖
<script type="text/javascript">
var data = {
"js/meinv1small.jpg": ["/js/meinv1.jpg", "美女1號", "180"],
"js/meinv2small.jpg": ["/js/meinv2.jpg", "美女2號", "185"],
"js/meinv3small.jpg": ["/js/meinv3.jpg", "美女3號", "170"],
};
$(function () {
$.each(data, function (key,value) {
var smallimg = $("<img src='/" + key + "'>");
smallimg.attr("detailpath", value[0]);
smallimg.attr("detailname", value[1]);
smallimg.attr("detailheight", value[2]);
smallimg.mousemove(function (e) {
$("#imgdetail").attr("src", $(this).attr("detailpath"));
$("#namedetail").text($(this).attr("detailname"));
$("#heightdetail").text($(this).attr("detailheight"));
$("#forimg").css("display","").css("left",e.pageX).css("top",e.pageY);
});
$("body").append(smallimg);
})
$("#detailclose").click(function () { $("#forimg").css("display", "none")});
});
</script>
<body>
<div id="forimg" style="display:none;position:absolute">
<img id="imgdetail" src="" />
<p id="namedetail"></p>
<p id="heightdetail"></p>
<input type="button" id="detailclose" value="close" />
</div>
</body>
14.類似QQ好友點選效果
<style type="text/css">
.head {
font-weight:bolder;background-color:gray;cursor:pointer;
}
.body {
font-weight:lighter;background-color:yellow;
}
</style>
<script type="text/javascript">
$(function () {
$("#ul1 li:odd").addClass("body").click(function () { alert("clicked")}); $("#ul1 li:even").addClass("head").click(function () {
$(this).next("li.body").show("normal").siblings("li.body").hide("normal");
})
});
</script>
<ul style="list-style-type:none;width:200px" id="ul1">
<li>我的好友</li>
<li>張三<br />李四<br />王五<br /></li>
<li>我的同學</li>
<li>奧巴馬<br />本拉登<br />習近平<br /></li>
<li>陌生人</li>
<li>eason<br />張惠妹<br />汪峰<br /></li>
</ul>
15.JQuery外掛之一:JQuery cookie
1.什麼是cookie:Cookie就是儲存在瀏覽器上的內容,使用者在這次瀏覽頁面的時候向Cookie中儲存文字內容,下次再訪問頁面的時候就可以取出來上次儲存的內容,這樣就可以得到上次"記憶的內容".Cookie不是JQuery特有的概念,只不過JQueryCookie把它簡化的更好而已.
2.Cookie需要瀏覽器的支援,瀏覽器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不過一般不考慮禁用Cookie的情況.Cookie的幾個特徵:Cookie是與域名相關的,所有163.com不能讀取baidu.com記錄的Cookie,正因為如此讀取/設定Cookie的時候不用擔心不同域名cookie的衝突,一個域名能寫入的Cookie總尺寸是有限制的,一般是幾千個位元組,能寫入的Cookie總條數一般是幾十條,超過以後瀏覽器自己會根據自己的策略移除一些Cookie;Cookie不是寫入以後一定下次讀出來,瀏覽器可能會定期清除,使用者也可能會手動清除.
3.使用方法:
<1>新增對jquery.cookie.js
<2>設定值,$.cookie('名字','值').cookie中儲存的值都是文字.
<3>讀取值,var v=$.cookie('名字')
<4>設定值的時候可以指定第三個引數,$.cookie('名字','值'{expiress:7,path:'/',domain:'itcast.cn',secure:true})
16.常用測試工具
<1>DebugBar->IE的
<2>IE8內建了開發人員工具(工具->開發人員工具),IE6/7需要安裝Internet Explorer Developer Toolbar
<3>Firebug->FireFox下的
<4>多版本IE工具:IECollection,比IETester更強大.
17.JQuery常用外掛:JQueryUI
1.JQuery官方UI空間JQueryUI
檢視內容下index可以檢視常用功能,然後儲存成原始檔進行檢視用法.
<1>將css資料夾和JQueryUI.js放到程式中,然後引用,就可以直接呼叫了.
http://jqueryui.com/
2.JQuery.validate表單驗證外掛
3.Form,用於為表單提供直接的Ajax能力
4.所有外掛列表http://plugins.jquery.com/
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS開發</a>、<a
href="http://edu.csdn.net"target="blank">.Net培訓</a>、期待與您交流！ ----------------------