就業(yè)教程35g價值7600北風網(wǎng)發(fā)布jquery編程

北京傳智播客教育JQuery編程講師：楊中科課前說明內容：掌握JQuery編程思想，使

用JQuery進行常見網(wǎng)頁效果開發(fā)。目標：能夠使用JQuery開發(fā)常見網(wǎng)頁效果。演示JQueryDom的那個例子。參考書：《鋒利的JQuery》JQuery簡介普通JavaScript的缺點：每種控件的操作方式不統(tǒng)一，不同瀏覽器下有區(qū)別，要編寫跨瀏覽器的程序非常麻煩。因此出現(xiàn)了很多對JavaScript的封裝庫（就像SqlHelper之于ADO.Net），比如

Prototype、Dojo、ExtJS、JQuery等，這些庫對

JavaScript進行了封裝，簡化了開發(fā)。這些庫是對JavaScript的封裝，也就是咱們調用JQuery的一句函數(shù)，JQuery內部這句函數(shù)幫我們調用

JavaScript中的代碼幾十句，因為JQuery就是

JavaScript語法寫的一些函數(shù)類，內部仍然是調用JavaScript實現(xiàn)的，所以并不是代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴展插件JQuery簡介JQuery能做什么。JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。JQuery的優(yōu)點：尺寸小、使用簡單方便（WriteLess,Do

More，吃得少干得多。鏈式編程（$("#div1").draggble().show().hide().fly()）、隱式迭代（自動對于多個元素進行迭代方法調用））、屏蔽瀏覽器差異跨瀏覽器兼容性好（IE6.0+,FF2+,Safari3.0+,Opera9.0+,Chrome）、插件豐富、開源、免費。VS中JavaScript、JQuery的自動完成功能：在

VS2010中直接有，VS008需要安裝VisualStudio和VS90SP1-KB958502-x86補丁會更強更好用,下載地址見備注。然后引用jquery-1.4.2.js放到同簡單的JQueryDom中動態(tài)設置事件和靜態(tài)設置。Jquery中一般習慣動態(tài)設置。$(document).ready(function()

{alert("加載完畢！");

});//注冊事件的函數(shù)，和普通的dom不一樣，不需要在元素上標記on**這樣的事件。當頁面Dom元素加載完畢時執(zhí)行代碼，可以簡寫為：$(function()

{JQuery選擇器JQuery選擇器用于查找滿足條件的元素，比如可以用$("#控件Id")來根據(jù)控件id獲得控件的jQuery對象，相當于getElementById：$(“#div1”).html(“<fontcolor=red>hello</font>”)。語法、意義類似于CSS選擇器$就是函數(shù)，自己動手寫一把。$("TagName")來獲取所有指定標簽名的jQuery對象，相當于getElementsByTagName：$(function()

{$("#btnClick").click(function()

{–

$("p").html("我們都是P");});–

});匿名函數(shù)的寫法如果嵌套層數(shù)過多，可以將匿名函數(shù)寫到單獨的一個匿名函數(shù)然后用變量指向它

但是不jQuery對象、Dom對象jQuery對象就是通過jQuery包裝Dom對象后產生的對象：

alert($('#div1').html())。Dom對象要想通過jQuery進行操作，先要轉換為JQuery對象。$('#div1').html()等價于：

document.getElementById("div1").innerHTML;$('#div1')得到的就是jQuery對象，jQuery對象只能調用

jQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用jQuery對象的方法，所以

alert($('#div1').innerHTML是錯的，因為innerHTML是DOM對象的屬性。Array是JS語言本身的對象，不是Dom對象，因此不需要轉換為Jquery對象才能用（*）將Dom對象轉換為JQuery對象的方法，$(dom對象)；JQuery選擇器2CSS選擇器，同時選擇擁有樣式的多個元素（類似于CSS選擇器）：<style

type="text/css">.test{

background-color:Red}</style><script

type="text/javascript">$(function()

{$(".test").click(function()

{alert($(this).text());–

});–

});</script>JQuery選擇器3標簽選擇器，擁有樣式的標簽選擇器多條件選擇器：$("p,div,span.menuitem")，同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽元素（類似于CSS選擇器）注意選擇器表達式中的空格不能多不能少。易錯！層次選擇器：（1）$("divli")獲取div下的所有l(wèi)i元素（后代，子、子的子……）（2）$("div>li")獲取div下的直接li子元素JQuery的迭代如何判斷對象是否存在，jQuery選擇器返回的是一個對象數(shù)組(數(shù)組中的每個對象還是Dom對象)，調用text()、html()、click()之類方法的時候其實是對數(shù)組中每個元素迭代調用每個方法，因此即使通過id選擇的元素不存在也不會報錯，如果需要判斷指定的id是否存在，應該寫：if

($("#btn1").length

<=

0)

{alert("id為btn1的元素不存在！");}JQuery的Dom操作1、使用html()方法讀取或者設置元素的

innerHTML：alert($("#btn1").html());$("#btn1").html("hello");2、使用text()方法讀取或者設置元素的innerText：alert($("#btn1").text());$("#btn1").text("hello");3、使用attr()方法讀取或者設置元素的屬性，對于JQuery沒有封裝的屬性（所有瀏覽器沒有差異的屬性）用attr進行操作。alert($(“#btn1").attr("href"));節(jié)點遍歷next()方法用于獲取節(jié)點之后的挨著的第一個同輩元素，$(".menuitem").next("div")、nextAll()方法用于獲取節(jié)點之后的所有同輩元素，$(".menuitem").nextAll("div")prev、prevAll兄弟中之前的元素。siblings()方法用于獲取所有同輩元素，$(“.menuitem”).siblings(“l(fā)i”)。siblings、next等所有能傳遞選擇器的地方能夠使用的語法都和$()語法一樣。如果是兩組ul，則

其中一個的siblings不包括另外一個ui中的，練習問題1、鼠標放到圖片上前面的右看、右邊的左看。問題1、表兄弟不是兄弟。$函數(shù)使用選擇器的時候，如果沒有傳第二個參數(shù)，則是相對于整個dom樹根的。如果傳遞第二個參數(shù)，則是相對于第二個參數(shù)的選擇器。問題1、css("")參數(shù)能傳遞哪些東西？還是樣式的名字，沒特殊的。問題2、alert((“l(fā)i”).text());為什么不是打印每一個？聯(lián)想委托的組合。如何解決？用for循環(huán)或者each方法（數(shù)組的每個元素是//對于設置css、attr等這種本來不需要返回值的函數(shù)，jquery前面對象給返回。如果函數(shù)返回jquery對象數(shù)組(siblings)，則后續(xù)是基于返回的數(shù)組進行迭代。如果函數(shù)返回值根本不是jquery對象數(shù)組(取innerHTML的html())，則無法繼續(xù)迭代。??//前面的所有的“后面的”$(this).css("backgroundColor","red").prevAll().css("backgroundColor","green").nextAll().css("backgroundColor",鏈式編程高亮選中項：給所有有menuitem這個樣式的元素添加click監(jiān)聽事件，當click的時候，向被點擊的元素添加highlight這個樣式，然后從其兄弟節(jié)點（siblings）中移除highlight風格。“.”的時候是針對的上一步的返回值的節(jié)點集合的操作。鏈式編程就是對象一棒棒向下傳，能不能正確傳下來要看返回值，html()不能傳，

prevAll().nextAll()也傳錯。自己動手寫。$("#tableRatingtd").click(function(){$(this).prevAll().next().html("a");});//經(jīng)典！<styletype="text/css">.menuitem{background-color:Yellow;

}.highlight

{background-color:Red;}</style>$(function()

{$(".menuitem").click(function()

{?$(this).addClass("highlight").siblings().removeClass("highlight");基本過濾選擇器:first選取第一個元素。$("div:first")選取第一個<div>$(".warn:first");:last選取最后一個元素。$("div:last")選取最后一個<div>:not(選擇器)選取不滿足“選擇器”條件的元素，$("input:not(.myClass)")選取樣式名不是myClass的<input>:even、:odd，選取索引是奇數(shù)、偶數(shù)的元素：$("input:even")選取索引是奇數(shù)的<input>案例todo：需求不太好，需要修改。第一行是表頭，所以顯示大字體（fontSize=30），最后一行是匯總，所以顯示紅色字體。正文的前三行是前三名，所以顯示大的字體（28）表格的奇數(shù)行是黃色背景。用Dom實現(xiàn)；用JQuery實現(xiàn)。對比差異！樣式操作獲取樣式attr("class")，設置樣式attr("class","myclass")，追加樣式addClass("myclass")(不影響其他樣式)，移除樣式removeClass("myclass")，切換樣式（如果存在樣式則去掉樣式，如果沒有樣式則添加樣式）toggleClass("myclass")，判斷是否存在樣式：

hasClass("myclass")案例：網(wǎng)頁開關燈的效果。background練習：給body設置body{filter:Gray;}這個style就可以讓網(wǎng)頁變?yōu)楹诎罪@示，做切換黑白效果的按鈕。點擊表格行，被點擊的行高亮顯示（背景是黃色），其他行白色背景。監(jiān)聽每個tr的click事件，將點擊的背景設置為黃色，其他的設置為白色背景。顏色定義為class樣式。練習：聚焦控件的高亮顯示。顏色定義為class樣式。案例案例：表格隔行變色案例：前三名粗體顯示不僅可以使用選擇器進行進行絕對定位，還可以進行相對定位，只要在$()指定第二個參數(shù)，第二個參數(shù)為相對的元素.$("ul",$(this)).css("background",

"red");案例：修改點擊行的所有td的背景色過濾器（*）屬性過濾選擇器：$("div[id]")選取有id屬性的<div>$("div[title=test]")選取title屬性為“test”的<div>，JQuery中沒有對getElementsByName進行封裝，用$("input[name=abc]")$("div[title!=test]")選取title屬性不為“test”的<div>還可以選擇開頭、結束、包含等，條件還可以復合。（*）表單對象選擇器（過濾器）：$("#form1:enabled")選取id為form1的表單內所元素的eachjQuery元素的也可以調用each方法，只是對$.each的簡化調用。顯示選中的復選框信息$(function()

{$("input[name=names]").click(function()

{var

names

=

$("input[name=names]:checked");var

arr

=

new

Array();

names.each(function(key,

value)

{

arr[key]

=$(value).val();

});$("#msgNames").text("共選中"+names.length+"條："+arr.join(","));});表單選擇器$(":input")選取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一樣，$("input")只獲得<input>$(":text")選取所有單行文本框，等價于$("input[type=text]")$(":password")選取所有密碼框。同理還

有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。選擇器的相對定位$(select,queryContext)siblings、next、children等方法都可以指定選擇器動態(tài)創(chuàng)建Dom節(jié)點使用$(html字符串)來創(chuàng)建Dom節(jié)點，并且返回一個jQuery對象，然后調用append等方法將新創(chuàng)建的節(jié)點添加到其他節(jié)點（元素）中：var

link=$("<a

href=''>百度</a>");$("div:first").append(link);$()創(chuàng)建的就是一個jQuery對象，可以完全進行操作var

link=$("<a

href=''>百度</a>");link.text("百毒");$("div:first").append(link);。getElementByid的問題append方法用來在元素的末尾追加元素。//$("#select1option:selected").remove().appendTo($("#select2"));$("#select1

option:selected").appendTo($("#select2"))

;創(chuàng)建出的元素沒有append到界面之前是無法用選擇器找到的，就像new一個對象，沒有insert到數(shù)據(jù)庫之前是無法select出來的。刪除節(jié)點（1）remove()刪除選擇的節(jié)點–案例：清空ul中的項，代碼見備注。$(“ulli.testitem”).remove();刪除ul下li中有testitem樣式的元素。自殺。把找到的都刪掉。remove方法的返回值是被刪除的節(jié)點對象，還可以繼續(xù)使用被刪除的節(jié)點。比如重新

添加到其他節(jié)點下var

lis

=$("#ulSite

li").remove();$("#ulSite2").append(lis);

//$("#ulSite補充寫代碼的好習慣，{、(寫完開始就寫結束，省得忘了。，在JQuery中這樣寫就不容易寫錯了。如果報錯“例外被拋出”等，很可能是選擇器表達式有問題，比如單詞拼寫錯誤、加了不必要的空格等。val是方法不是屬性。jQuery是完全按照JavaScript的語法寫出來的JavaScript函數(shù)庫，沒有任何的魔法，任何看似怪異的寫法都是很合法的JavaScript語法。JQuery就是一堆寫好的JavaScript函數(shù)庫而已，沒有什么特殊的，你也可以寫出來，因此完全可以和普通JS代碼混著用。最好不要dom、jQuery方式混著用。暈了一天重新站在JavaScript、Dom角度重新審視JQuery這個小弟。練習加法計算器。兩個文本框中輸入數(shù)字，點擊【=】按鈕將相加的結果放到第三個文本框中。attr(“”),val()十秒鐘后協(xié)議文本框下的注冊按鈕才能點擊，時鐘倒數(shù)。設置可用性等JQuery未封裝方法：attr("")練習：搜索框效果。焦點放入控件，如果文本框中的值是

“請輸入關鍵詞”，那么將文本清空，并且顏色設置為黑

色。如果焦點離開控件，如果文本框中是空值，那么將文

本框填充為“請輸入關鍵詞”，顏色設置為灰色（Gray）。顏色定義為class樣式。無刷新評論。案例1：創(chuàng)建若干個輸入文本框，當光標離開文本框的時候如果文本框為空，則將文本框背景色設置為紅色，如果不為空則為白色。提示：焦點進入控件的事件是focus，節(jié)點操作(*)替換節(jié)點：$("br").replaceWith("<hr/>");將<br/>替換為<hr/>包裹節(jié)點wrap()方法用來將所有元素逐個用指定標簽包裹：$("b").wrap("<font

color='red'></font>")將所有粗體字紅色顯示RadioButton操作取得RadioButton的選中值–

$("input[name=gender]:checked").val()––– <input

id="Radio2"

checked="checked"name="gender"

type="radio"

value="男"/>男<inputid="Radio1"

checked="checked"name="gender"

type="radio"

value="女"/>女<input

id="Radio3"checked="checked"

name="gender"type="radio"

value="未知"/>未知</p>設置RadioButton的選中值：事件(*)JQuery中的事件綁定：$(“#btn”).bind(“click”,functi