Menu
第1章 認識jQuery
1.3 jQuery代碼的編寫
1.4 jQuery對象和DOM對象
- 1.4.1 DOM對象和jQuery對象簡介
- 1.4.2 jQurey對象和DOM對象的相互轉換
- 1.5 解決jQuery和其他庫的沖突
第2章 jQuery選擇器
- 2.1 jQuery選擇器是什么
- 2.2 jQuery選擇器的優(yōu)勢
- 2.3 jQuery選擇器
- 2.5 選擇器中的一些注意事項
- 2.7 其他選擇器
第3章 jQuery中的DOM操作
- 3.1 DOM操作的分類
- 3.2 jQuery中的DOM操作
第4章 jQuery中的事件和動畫
- 4.1 jQuery中的事件
- 4.2jQuery中的動畫
- JQuery中animate的一些坑Script
第5章 jQuery對表單、表格的操作及更多應用
- 5.1表單應用
- 5.2表格應用
- 5.3其他應用
第一章 認識jQuery
1.3 jQuery代碼的編寫
- 在頁面中引入jQuery
- 放在HTML頁面的head之間；
<head>
<script src="../scripts/jquery.js" type="text/javascript"></script>
</head>
- 1.3.2 編寫簡單的jQuery代碼
- $ 等價于 jQuery
- 編寫第1個jQuery程序
<script>
$(document).ready(function(){ //等待Dom元素加載完畢
alert("Hello World!"); //彈出一個框
});
</script>
- 等待Dom元素加載完畢 簡寫形式
<script>
$(function(){ //等待Dom元素加載完畢
alert("Hello World!"); //彈出一個框
});
</script>
window.onload 和 $(document).ready的區(qū)別
- 1.3.3 jQuery代碼風格
- 鏈式操作風格
<script>
$(".level1 > a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
});
</script>
- （1）對于同一個對象不超過3個操作的凸主，可以直接寫成一行口芍。代碼如下：
$("li").show().unbind("click")口猜；
- （2）對于同一個對象的較多操作峻贮，建議每行寫一個操作。代碼如下：
<script>
$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",1)
.unbind("click")
.click(function(){
// do something …
});
</script>
- （3）對于多個對象的少量操作唉韭，可以每個對象寫一行茸习，如果涉及子元素畜隶，可以考慮適當?shù)乜s進。例如上面提到的代碼：
$(this).addClass("highlight")
.children("li").show().end()
.siblings().removeClass("highlight")
.children("li").hide()；
- （4）程序塊嚴格采用縮進風格書寫籽慢，能保證代碼清晰易讀浸遗，風格一致。
- 為代碼添加注釋
1.4 jQuery對象和DOM對象
- 1.4.1 DOM對象和jQuery對象簡介
- DOM對象
var someElement = document.getElementById("id")
- jQuery對象
$("#foo").html()箱亿； //獲取id為foo的元素內的html代碼跛锌。.html()是jQuery里的方法
- 這段代碼等同于：
document.getElementById("foo").innerHTML；
- 1.4.2 jQurey對象和DOM對象的相互轉換
- 如果獲取的對象是jQuery對象届惋，那么在變量前面加上$髓帽，例如：
var $variable = jQuery對象；
- 1．jQuery對象轉成DOM對象
- jQuery提供了兩種方法將一個jQuery對象轉換成DOM對象脑豹，即[index]和get（index）郑藏。
（1）jQuery對象是一個類似數(shù)組的對象，可以通過[index]的方法得到相應的DOM對象晨缴。
（2）另一種方法是jQuery本身提供的译秦，通過get(index)方法得到相應的DOM對象峡捡。
// [index]
var $cr = $("#cr")击碗； //jQuery對象
var cr = $cr[0]； //DOM對象
alert( cr.checked ) //檢測這個checkbox是否被選中了
// get(index)
var $cr = $("#cr")们拙； //jQuery對象
var cr = $cr.get(0)稍途； //DOM對象
alert(cr.checked) //檢測這個checkbox是否被選中了
- 2. DOM對象轉成jQuery對象
- 對于一個DOM對象，只需要用$()把DOM對象包裝起來砚婆，就可以獲得一個jQuery對象了械拍。方式為$（DOM對象）。
var cr = document.getElementById("cr")装盯； //DOM對象
var $cr = $(cr)坷虑； //jQuery對象
- 轉換后，可以任意使用jQuery中的方法埂奈。通過以上方法迄损，可以任意地相互轉換jQuery對象和DOM對象。
- 注意：平時用到的jQuery對象都是通過$()函數(shù)制造出來的账磺，$()函數(shù)就是一個jQuery對象的制造工廠芹敌。
- 1.5 解決jQuery和其他庫的沖突
- 1. jQuery在其他庫之后導入
- 在其他庫和jQuery 庫都被加載完畢后可以在任何時候調用 noConflict() 方法。noConflict() 方法會釋放對 $ 標識符的控制權垮抗，這樣其他腳本就可以使用它了氏捞。
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script language="javascript">
jQuery.noConflict(); //將變量$的控制權移交給prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})
$("pp").style.display = 'none'; //使用prototype.js隱藏元素
</script>
- 利用自定義快捷方式
var $j = jQuery.noConflict(); //自定義一個快捷方式
$j(function(){ //使用jQuery，利用自定義快捷方式—$j
$j("p").click(function(){
alert( $j(this).text() );
})
})
$("pp").style.display = 'none'; //使用prototype.js隱藏元素
- 定義匿名函數(shù)并設置形參為$
jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js
(function($){ //定義匿名函數(shù)并設置形參為$
$(function(){ //匿名函數(shù)內部的$均為jQuery
$("p").click(function(){ //繼續(xù)使用 $()方法
alert($(this).text() );
});
});
})(jQuery); //執(zhí)行匿名函數(shù)且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
- 2. jQuery在其他庫之前導入
- 只能使用jQuery() 了吧冒版。
第2章 jQuery選擇器
- 2.1jQuery選擇器是什么
$("#myP").click(function () {
alert("click on paragraph!")
})
- 2.2 jQuery選擇器的優(yōu)勢
- 根據返回的數(shù)組的長度來判斷是否獲取到元素
if ($("#tt").length > 0 ) {
//do something
}
- 或者轉化成DOM對象來判斷液茎，代碼如下：
if ($("#tt")[0]) {
//do something
}
2.3 jQuery選擇器
jQuery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器捆等。
2.3.1 基本選擇器
$("#one").css("background","cyan");
$(".mini").css("background", "cyan");
$("div").css("background", "cyan");
$("*").css("background", "cyan");
$("span,#two").css("background", "cyan")
- 2.3.2 層次選擇器
$("body div").css("background", "cyan"); // 選擇body內所有div元素的背景色
$("body>div").css("background", "cyan"); // 選擇body內所有div子元素的背景色
$(".one+div").css("background", "cyan"); // 選擇class為one的后面div同輩元素
$(".one").next("div").css("color", "red") // 等價于$(".one+div")
$("#two~div").css("background", "cyan"); // 選擇id為two后面的所有同輩元素為div的元素哼凯；
$(".one").nextAll("div").css("color", "red") // 等價于 $("#two~div")
$(".one").siblings("div").css("color", "red") // 選擇于.one 同輩的所有div元素；
- 2.3.3 過濾選擇器
- 過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的DOM元素楚里，過濾規(guī)則與 CSS中的偽類選擇器語法相同断部，即選擇器都以一個冒號(:)開頭。按照不同的過濾規(guī)則班缎，過濾選擇器可以分為基本過濾蝴光、內容過濾、可見性過濾达址、屬性過濾蔑祟、子元素過濾和表單對象屬性過濾選擇器。
- 基本過濾選擇器
// $("div:first").css("color", "red") // 選擇第一個div元素
// $("div:last").css("color", "red") // 選擇最后一個div元素
// $("div:not(.one)").css("color", "red") // 選擇class不是one的所有div元素
// $("div:even").css("background", "pink") // 選擇下標為雙數(shù)的div元素
// $("div:odd").css("background", "pink") // 選擇下標為單數(shù)的div元素
// $("div:eq(6)").css("background", "pink") // 選擇下標為6的div元素
// $("div:gt(6)").css("background", "pink") // 選擇下標大于6的div元素（不包含6）
// $("div:lt(6)").css("background", "pink") // 選擇下標小于6的div元素（不包含6）
// $(":header").css("color", "pink"); //選擇所有head元素
// $(":animated") // 選擇正在執(zhí)行動畫的所有元素沉唠；
// $(":focus") // 選擇當前獲取焦點的所有元素疆虚；
- 內容過濾選擇器
- 內容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它所包含的子元素或文本內容上。
$("div:contains(di)").css("color", "pink") // 選擇含有“di”文本的div元素
$(":empty").css("background", "cyan") // 選擇空元素
$("div:has(.mini)").css("background", "pink") // 選擇含有class為mini元素的div元素
$("div:parent").css("background", "pink") // 選擇不為空的div元素
- 可見性過濾選擇器
- 可見性過濾選擇器是根據元素的可見和不可見狀態(tài)來選擇相應的元素满葛。
- 在可見性選擇器中径簿，需要注意選擇器:hidden，它不僅包括樣式屬性display為“none”的元素嘀韧，也包括文本隱藏域（<input type="hidden" />）和visibility:hidden之類的元素篇亭。
// show()是jQuery的方法，它的功能是顯示元素锄贷，3000是時間译蒂，單位是毫秒。
$("div:visible").hide(3000) // 選擇所有可見的div元素
$("div:hidden").show(3000) // 選擇所有隱藏的div元素
- 屬性過濾選擇器
- 屬性過濾選擇器的過濾規(guī)則是通過元素的屬性來獲取相應的元素谊却。
$("div[title]").css("background", "pink"); // 選擇屬性有title的div元素
$("div[title=test]").css("background", "pink"); // 選擇屬性title的值為test的div元素
$("div[title!=test]").css("background", "pink"); // 選擇屬性title的值不為test的div元素（沒有title屬性的也會被選擇）
$("div[title^=en]").css("background", "pink"); // 選擇屬性title的值以en開頭的div元素
$("div[title$=en]").css("background", "pink"); // 選擇屬性title的值以en結尾的div元素
$("div[title*=st]").css("background", "pink"); // 選擇屬性title的值含有st的div元素
$("div[class][id=two]").css("background", "pink"); // 選擇有class屬性并且id屬性值為two的div元素
$("div[title|=en]").css("background", "pink") // 選擇title屬性的值為en 或 以en為前綴的（en-）div元素
$("div[title~=en]").css("background", "pink") // 選擇title屬性用空格分隔的值中含有en的div元素柔昼；
- 子元素過濾選擇器
:nth-child(n|even|odd|formula)
// 匹配第幾個子元素。從1開始索引炎辨。
$("div:nth-child(n)")
// 匹配偶數(shù)捕透，:nth-child(even)第一行算1。element:even第一行算0蹦魔；
$("div:nth-child(even)")
// 匹配奇數(shù)激率，:nth-child(odd)第一行算1。element:odd第一行算0勿决；
$("div:nth-child(odd)")
// 規(guī)定哪個子元素需通過公式 (an + b) 來選取乒躺。(2n+1)= 頻率是2，+1是從第一個元素開始低缩；+1可以省略嘉冒。
$("div:nth-child(2n+1)").css("background", "yellow") // 選擇div子元素
// 選擇父元素里的第一個p子元素曹货；
$("p:first-child")
// 選擇父元素里的最后一個p子元素；
$("p:last-child")
// 選擇的元素為父元素里的唯一的子元素讳推，如果父元素里有其他的子元素則不匹配顶籽；
$("div:only-child").css("background", "yellow")
- 表單對象屬性過濾選擇器
- 此選擇器主要是對所選擇的表單元素進行過濾，例如選擇被選中的下拉框银觅，多選框等元素
// 選中form元素下面的所有 可用 的input元素
$("#form input:enabled").val("input here")
// 選中form元素下面的所有 不可用 的input元素
$("#form input:disabled").val("disabled")
// 選擇input所有checked的元素
$("input:checked").length
// 選擇select 下面所有選中的元素
$("select :selected").css("color","red")
- 2.3.4 表單選擇器
- 為了使用戶能夠更加靈活地操作表單礼饱，jQuery中專門加入了表單選擇器。利用這個選擇器究驴，能極其方便地獲取到表單的某個或某類型的元素镊绪。
// 選擇所有的<input>, <textarea>, <select>, <button>元素；
// //注意與$("#form1 input")的區(qū)別
$(":input").css("color", "red")
// 選擇單行文本 input type=text的框
$(":text").css("background", "red")
// 選擇密碼框 input type=password的框
$(":password").css("background", "red")
// 選擇所有單選框 input type=radio的框
$(":radio").css("background", "red")
// 選擇所有多選框 input type=checkbox的框
$(":checkbox").css("background", "red")
// 選擇所有提交按鈕 input type=submit的框洒忧， botton元素也會選中
$(":submit").css("background", "red")
// 選擇所有圖像按鈕 input type=image的框
$(":image").css("background", "red")
// 選擇所有重置按鈕 input type=reset的框
$(":reset").css("background", "red")
// 選擇所有按鈕 input type=button的框
$(":button").css("background", "yellow")
// 選擇所有上傳域 input type=file的框
$(":file").css("background", "yellow")
// 選擇所有不可見元素 input type=hidden的框
$("form :hidden").show(1000)
- 2.5 選擇器中的一些注意事項
- 2.5.1 選擇器中含有特殊符號的注意事項
- 1. 選擇器中含有“· ”蝴韭、“#”、“（”或“]”等特殊字符就需要轉義熙侍，例如：
// HTML代碼如下：
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
//如果按照普通的方式來獲取榄鉴，就會報錯：
$("#id#b");
$("#id[1]");
// 正確的寫法如下：
$("#id\\#b"); //轉義特殊字符“#”
$("#id\\[1\\]"); //轉義特殊字符“[ ]”
第3章 jQuery中的DOM操作
- DOM是一種與瀏覽器、平臺蛉抓、語言無關的接口庆尘，使用該接口可以輕松地訪問頁面中所有的標準組件。
- 3.1DOM操作的分類
- 一般來說芝雪，DOM操作分為3個方面减余，即DOM Core（核心）、HTML-DOM和CSS-DOM惩系。
- DOM Core（核心）
- DOM Core并不專屬于JavaScript，任何一種支持DOM的程序設計語言都可以使用它如筛。它的用途并非僅限于處理網頁堡牡，也可以用來處理任何一種使用標記語言編寫出來的文檔，例如XML杨刨。JavaScript 中的getElmentById()晤柄、getElementsByTagName()、getAttribute()和setAttribute()等方法妖胀，這些都是DOM Core的組成部分芥颈。
// 使用DOM Core來獲取表單對象的方法：
document.getElementsByTagName("form")；
// 使用DOM Core來獲取某元素的src屬性的方法：
element.getAttribute("src")赚抡；
- HTML-DOM
- 在使用JavaScript和DOM為HTML文件編寫腳本時爬坑，有許多專屬于HTML-DOM的屬性。它提供了一些更簡明的記號來描述各種HTML元素的屬性涂臣。
// 使用HTML-DOM來獲取表單對象的方法：
document.forms //HTML-DOM提供了一個forms對象
// 使用HTML-DOM來獲取某元素的src屬性的方法：
element.src盾计；
- CSS-DOM
- CSS-DOM是針對 CSS的操作售担。在JavaScript中，CSS-DOM技術的主要作用是獲取和設置style對象的各種屬性署辉。通過改變style對象的各種屬性族铆，可以使網頁呈現(xiàn)出各種不同的效果。
// 例如：設置某元素style對象字體顏色的方法：
element.style.color = "red"哭尝；
- 3.2jQuery中的DOM操作
- 3.2.1 查找節(jié)點
- 查找元素節(jié)點
// HTML
<p title="選擇你最喜歡的水果." >你最喜歡的水果是哥攘？</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
// 打印第二個li的值；
var $li = $("ul li:eq(1)")
text = $li.text()
alert(text)
- 查找屬性節(jié)點
- 利用 jQuery 選擇器查找到需要的元素之后材鹦，就可以使用 attr()方法來獲取它的各種屬性的值献丑。attr()方法的參數(shù)寫一個是取值，寫兩個是設值侠姑；
var $para = $("p")创橄； //獲取<p>節(jié)點
var p_txt = $para.attr("title")； //獲取<p>元素節(jié)點屬性title
alert(p_txt)莽红； //打印title屬性值
- 3.2.2 創(chuàng)建節(jié)點
- 在DOM操作中妥畏，常常需要動態(tài)創(chuàng)建HTML內容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化安吁，并且達到各種各樣的人機交互的目的醉蚁。
- 創(chuàng)建元素 并 插入文檔
// 創(chuàng)建節(jié)點
var $li = $("<li><em>這是</em><b>一個</b><a href='#' >復雜的組合</a></li>")；
// 插入節(jié)點
$(ul).append($li)
3．創(chuàng)建屬性節(jié)點
//包括元素節(jié)點鬼店、文本節(jié)點和屬性節(jié)點, 其中title='香蕉'就是創(chuàng)建的屬性節(jié)點
var $li_1 = $("<li title='香蕉'>香蕉</li>")网棍；
- 3.2.3 插入節(jié)點
<p title="選擇你最喜歡的水果." >你最喜歡的水果是？</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
- append
- 在目標元素的結尾插入指定內容妇智。
var $li1 = $("<li>香蕉</li>")
$("ul").append($li1)
- prepend
- 在目標元素的起始處插入指定內容滥玷。
var $li1 = $("<li>香蕉</li>")
$("ul").prepend($li1)
- after
- 在目標元素之后插入元素；
$("p").after(<b>content</b>")
- after
- 在目標元素之前插入元素巍棱；
$("p").before(<b>content</b>")
- 3.2.4 刪除節(jié)點
- jQuery 提供了三種刪除節(jié)點的方法惑畴，即remove()，detach()和empty()航徙。
-
remove()方法
- 當某個節(jié)點用remove()方法刪除后如贷，該節(jié)點所包含的所有后代節(jié)點將同時被刪除。這個方法的返回值是一個指向已被刪除的節(jié)點的引用到踏，因此可以在以后再使用這些元素杠袱。
- 另外remove()方法也可以通過傳遞參數(shù)來選擇性地刪除元素；
// 獲取第2個<li>元素節(jié)點后窝稿，將它從網頁中刪除
$("li:eq(1)").remove()
//將<li>元素中屬性title不等于“菠蘿”的<li>元素刪除
$("ul li").remove("li[title!=菠蘿]")楣富；
- detach()方法
- detach() 方法移除被選元素，包括所有文本和子節(jié)點讹躯。這個方法會保留 jQuery 對象中的匹配的元素菩彬，因而可以在將來再使用這些匹配的元素缠劝。
- detach() 會保留所有綁定的事件、附加的數(shù)據骗灶，這一點與 remove() 不同惨恭。
- empty()方法
- empty()方法并不是刪除節(jié)點，而是清空節(jié)點耙旦，它能清空元素中的所有后代節(jié)點
- 3.2.5 復制節(jié)點
- clone()方法
- clone方法有一個可選參數(shù)脱羡。布爾值。規(guī)定是否復制元素的所有事件處理免都。
$("ul li").click(function(){
$(this).clone(true).appendTo("ul")
// $(this).parent().append($(this).clone())
})
- 3.2.6 替換節(jié)點
- 如果要替換某個節(jié)點锉罐，jQuery提供了相應的方法，即replaceWith()和replaceAll()绕娘。
- replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML或者DOM元素脓规。
$("p").replaceWith("<strong>Do you like it?</strong>")
- replaceAll()與replaceWith()作用相同，就是與之相反险领；
$("<strong>Do you like it?</strong>").replaceAll("p")
- 注意：如果在替換之前侨舆，已經為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失绢陌，需要在新元素上重新綁定事件挨下。
- 3.2.7 包裹節(jié)點
- wrap()、wrapAll() 和 wrapInner()
- wrap() 單獨包裹
- 如果要將某個節(jié)點用其他標記包裹起來脐湾，jQuery提供了相應的方法臭笆，即wrap()。該方法對于需要在文檔中插入額外的結構化標記非常有用秤掌，而且它不會破壞原始文檔的語義愁铺。
// 用div元素包裹ul元素；
$("ul").wrap("<div></div>")
- wrapAll() 整體包裹
- 該方法會將所有匹配的元素用一個元素來包裹机杜。它不同于wrap()方法帜讲，wrap()方法是將所有匹配到的元素進行單獨的包裹。
$("ul").wrap("<div></div>")
<div><li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li></div>
- wrapInner() 包裹匹配元素的子元素
$("ul").wrapInner("<b></b>")
// 效果如下：
<ul>
<b>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</b>
</ul>
- 3.2.8 屬性操作
- 獲取屬性和設置屬性
var text = $("p").attr("title")
- 如果要設置<p>元素的屬性title的值椒拗，也可以使用同一個方法，不同的是获黔，需要傳遞兩個參數(shù)即屬性名稱和對應的值蚀苛。
$("p").attr("title", "new title")
- 如果需要一次性為同一個元素設置多個屬性，可以使用下面的代碼來實現(xiàn)：
$("p").attr({"title":"new title", "name":"test"})
- 注意：jQuery 中的很多方法都是同一個函數(shù)實現(xiàn)獲如枋稀（getter）和設置（setter）的堵未，例如上面的attr()方法，既能設置元素屬性的值盏触，也能獲取元素屬性的值渗蟹。類似的還有html()块饺、text()、height()雌芽、width()授艰、val()和css()等方法。
- 刪除屬性
- 需要刪除文檔中某個元素的特定屬性世落，可以使用 removeAttr()方法來完成該任務淮腾。
- 如果需要刪除<p>元素的title屬性，可以使用下面的代碼實現(xiàn)：
$("p").removeAttr("title")屉佳； //刪除<p>元素的屬性title
- 3.2.9 樣式操作
- 獲取樣式和設置樣式
- 例如使用attr()方法來獲取<p>元素的class谷朝；
var p_class = $("p").attr("class")； //獲取<p>元素的class
- 也可以使用attr()方法來設置<p>元素的class武花，jQuery代碼如下：
$("p").attr("class","high")圆凰； //設置<p>元素的class為“high”
- 追加樣式
- jQuery提供了專門的addClass()方法來追加樣式。
$("p").addClass("another")体箕； //給<p>元素追加“another”類
- 移除樣式
$("p").removeClass("high")专钉； //移除<p>元素中值為“high”的class
- 刪除多個class屬性
$("p").removeClass("high another")；
- 刪除全部class屬性干旁；
$("p").removeClass()驶沼； //移除<p>元素的所有class
- 判斷是否含有某個樣式
hasClass()可以用來判斷元素中是否含有某個class，如果有争群，則返回true宾符，否則返回false彬碱。
$("p").hasClass("another")；
- 注意：這個方法是為了增強代碼可讀性而產生的。在jQuery內部實際上是調用了is()方法來完成這個功能的贮预。該方法等價于如下代碼：$("p").is(".another")；
- 3.2.10 設置和獲取HTML椭懊、文本和值
- html()方法
- 此方法類似于JavaScript中的innerHTML屬性旱爆，可以用來讀取或者設置某個元素中的HTML內容。
- 獲取 元素的html代碼：$("p").html()冲泥；
- 設置 元素的html代碼：$("p").html("html code")
var p_html = $("p").html()驹碍； //獲取<p>元素的HTML代碼
$("p").html("<strong>你最喜歡的水果是？</strong>")凡恍； //設置<p>元素的HTML代碼
注意：html()方法可以用于XHTML文檔志秃，但不能用于XML文檔。
- text()方法
- 此方法類似于JavaScript中的innerText屬性嚼酝，可以用來讀取或者設置某個元素中的文本內容浮还。
<p title="選擇你最喜歡的水果." ><strong>你最喜歡的水果是？</strong></p>
var p_text = $("p").text()闽巩； // 獲取<p>元素的文本內容
alert(p_text)钧舌； // 你最喜歡的水果是担汤？
- 設置元素的text
$("p").text("你最喜歡的水果是？")洼冻； //設置<p>元素的文本內容
- val()方法
- 此方法類似于 JavaScript 中的value 屬性崭歧，可以用來設置和獲取元素的值。無論元素是文本框碘赖，下拉列表還是單選框驾荣，它都可以返回元素的值。如果元素為多選普泡，則返回一個包含所有選擇的值的數(shù)組播掷。
<input type="text" id="address" value="請輸入郵箱地址"/><br /><br />
<input type="text" id="password" value="請輸入郵箱密碼"/><br /><br />
<input type="button" value="登錄"/><br />
<script>
$("#address").focus(function () { //地址框獲得鼠標焦點
var $addval = $(this).val(); //獲取地址文本框的值
// if($addval==this.defaultValue),也可以使用defaultValue屬性代替
//this指向當前的文本框，“this.defaultValue”就是當前文本框的默認值撼班。
if($addval=="請輸入郵箱地址"){
$(this).val("") //如果符合條件歧匈，則清空文本框內容
}
})
$("#address").blur(function () { //地址框失去鼠標焦點
var $addval = $(this).val();
if(!$addval){
$(this).val("請輸入郵箱地址") //如果符合條件，則設置內容
}
})
</script>
// 密碼框方法同上
- 通過上面的例子可以發(fā)現(xiàn)val()方法不僅能設置元素的值砰嘁，同時也能獲取元素的值件炉。另外，val()方法還有另外一個用處矮湘，就是它能使select（下拉列表框）斟冕、checkbox（多選框）和radio（單選框）相應的選項被選中，在表單操作中會經常用到缅阳。
$("#single").val("選擇3號") // 單選框用val方法設定默認值磕蛇；
$("#multiple").val(["選擇4號","選擇3號"]) // 多選框用val方法設定多個默認值；
$(":checkbox").val(["check1", "check3"]) // checkbox用val方法設定多個默認值十办；
$(":radio").val(["radio2"]) // radio用val方法設定默認值秀撇；
- 3.2.11 遍歷節(jié)點
- children()方法
- 該方法用于取得匹配元素的子元素集合
- 注意：children()方法只考慮子元素而不考慮其他后代元素。
var $ul = $("ul").children()
for(i=0, len=$ul.length; i<len; i++){
// 如果只寫$ul[i]向族，那里面存的是JavaScriptDom呵燕，就需要用js的屬性innerHtml來獲取里面的html
// $($ul[i]) 用$()工廠函數(shù)把JavaScriptObj變成了jQueryObj；
alert($($ul[i]).html())
}
- next()方法
- 該方法用于取得匹配元素后面緊鄰的同輩元素件相。
var $p1 = $("p").next()再扭； //取得緊鄰<p>元素后的同輩元素
- prev()方法
- 該方法用于取得匹配元素前面緊鄰的同輩元素。
var $ul = $("ul").prev()夜矗； //取得緊鄰<ul>元素前的同輩元素
- siblings()方法
- 該方法用于取得匹配元素前后所有的同輩元素霍衫。（不包括選中元素本身）
var $p = $("#myli").siblings();
- closest()
- 該方法用于取得最近的匹配元素。首先檢查當前元素是否匹配侯养，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素澄干，逐級向上直到找到匹配選擇器的元素逛揩。如果什么都沒找到則返回一個空的jQuery對象柠傍。
- 比如，給點擊的目標元素的最近的li元素添加顏色辩稽，可以使用如下代碼：
$("body").click(function (e) {
$(e.target).closest("li").toggleClass("bg")
})
- parent()惧笛，parents()與closest()的區(qū)別
- parent(): 返回元素的父元素；
- parents()：返回元素的所有祖先元素逞泄；
- closest()：元素向上找患整，返回的第一個匹配的元素；
- 3.2.12 CSS-DOM操作
- 取得元素的css樣式：
$("p").css("color")喷众； //獲取<p>元素的樣式顏色
$("p").css("color","red")各谚； //設置<p>元素的樣式顏色為紅色
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) // 也可以同時設置多個樣式屬性
注意：（1）如果值是數(shù)字，將會被自動轉化為像素值到千。（2）在css()方法中昌渤，如果屬性中帶有“-”符號，例如font-size和background-color屬性憔四，如果在設置這些屬性的值的時候不帶引號膀息，那么就要用駝峰式寫法，例如：$("p").css({ fontSize : "30px" , backgroundColor : "#888888" })如果帶上了引號了赵，既可以寫成“font-size”潜支，也可以寫成“fontSize”∈裂矗總之建議大家加上引號冗酿，養(yǎng)成良好的習慣。
對透明度的設置
$("p").css("opacity","0.5")苛茂；
css()方法獲取的高度值與樣式的設置有關已烤，可能會得到"auto"，也可能得到"10px"之類的字符串妓羊；而 height()方法獲取的高度值則是元素在頁面中的實際高度胯究，與樣式的設置無關，并且不帶單位躁绸。
在CSS-DOM中裕循，關于元素定位有以下幾個經常使用的方法。
- offset()方法
- 獲取元素在當前視窗的相對偏移净刮，其中返回的對象包含兩個屬性剥哑，即top和left，它只對可見元素有效淹父。
var li = $("#myLi").offset()
alert(li.left)
alert(li.top)
- position()方法
- 它的作用是獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節(jié)點的相對偏移株婴，與 offset()一樣，它返回的對象也包括兩個屬性，即 top和left困介。
var li = $("#myLi").position()
alert(li.left)
alert(li.top)
- scrollTop()方法和scrollLeft()方法
- 這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離大审。
var $p = $("p")；
var scrollTop = $p.scrollTop()座哩； //獲取元素的滾動條距頂端的距離
var scrollLeft = $p.scrollLeft()徒扶； //獲取元素的滾動條距左側的距離
- 可以為這兩個方法指定一個參數(shù)，控制元素的滾動條滾動到指定位置根穷。例如使用如下代碼控制元素內的滾動條滾動到距頂端300和距左側300的位置：
var $p = $("p")姜骡；
$("textarea").scrollTop(300)； //元素的垂直滾動條滾動到指定的位置
$("textarea").scrollLeft(300)屿良； //元素的橫向滾動條滾動到指定的位置
第4章 jQuery中的事件和動畫
-
4.1 jQuery中的事件
$(document).ready() // DOM準備就緒就會執(zhí)行圈澈；
$(window).load() //則會在所有內容（包括窗口、框架管引、對象和圖像等）加載完畢后觸發(fā)
- 4.1.2 事件綁定
- 在文檔裝載完成后士败，如果打算為元素綁定事件來完成某些操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定褥伴，與ready()方法一樣谅将，bind()方法也可以多次調用。
- bind()方法的調用格式為：bind( event [, event.data] , function)重慢；
$("h5.head").bind(
{
"mouseover":function (){$(".content").css({"width":"200px", "border":"1px solid blue", "background-color":"cyan", "margin-top":"-25px"}).show(10)},
"mouseout":function (){$(".content").hide()},
})
})
- 4.1.3 合成事件
- jQuery有兩個合成事件—hover()方法和toggle()方法饥臂，
- hover()
- hover()方法用于模擬光標懸停事件。當光標移動到元素上時似踱，會觸發(fā)指定的第1個函數(shù)（enter）隅熙；當光標移出這個元素時，會觸發(fā)指定的第2個函數(shù)（leave）核芽。
- hover()的語法hover(enter,leave)囚戚；
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});
4.1.4 事件冒泡
阻止事件冒泡
在頁面上可以有多個事件，如果span in div in body轧简， 這3個元素都綁定了click驰坊，如果點擊span同時會引發(fā)div和body的click事件；如果需要阻止事件冒泡可以使用：event.stopPropagation()
$('span').bind("click",function(event){ //event : 事件對象
var txt = $('#msg').html() + "<p>內層span元素被單擊.<p/>"哮独；
$('#msg').html(txt)拳芙；
event.stopPropagation()； //停止事件冒泡
})皮璧；
- event.stopPropagation()舟扎； 阻止冒泡也可以改寫為：return false；
- 阻止默認行為
- 在jQuery中悴务，提供了preventDefault()方法來阻止元素的默認行為睹限。
- 舉一個例子，在項目中，經常需要驗證表單邦泄，在單擊“提交”按鈕時删窒，驗證表單內容，例如某元素是否是必填字段顺囊，某元素長度是否夠 6 位等，當表單不符合提交條件時蕉拢，要阻止表單的提交（默認行為）特碳。
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //獲取元素的值
if(username==""){ //判斷值是否為空
$("#msg").html("<p>文本框的值不能為空.</p>"); //提示信息
event.preventDefault(); //阻止默認行為( 表單提交 )
}
});
})
</script>
**event.preventDefault()； 阻止默認行為也可以改寫為：return false晕换；
**4.1.6 移除事件
刪除元素的所有click事件 ：$('#btn').unbind("click");
語法：unbind([type],[data])午乓；
-
第1個參數(shù)是事件類型，第2個參數(shù)是將要移除的函數(shù)闸准，具體說明如下益愈。
- （1）如果沒有參數(shù)，則刪除所有綁定的事件夷家。
- （2）如果提供了事件類型作為參數(shù)蒸其，則只刪除該類型的綁定事件。
- （3）如果把在綁定時傳遞的處理函數(shù)作為第2個參數(shù)库快，則只有這個特定的事件處理函數(shù)會被刪除摸袁。
單獨刪除某一個事件：
// 首先需要為這些匿名處理函數(shù)指定一個變量。
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的綁定函數(shù)1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的綁定函數(shù)2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>我的綁定函數(shù)3</p>");
});
// 然后就可以單獨刪除某一個事件了义屏，jQuery代碼如下：
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2); //刪除“綁定函數(shù)2"
});
- one( type, [data], fn )靠汁；
- 只需要觸發(fā)一次，隨后就要立即解除綁定的情況闽铐， jQuery 提供了一種簡寫方法——one()方法蝶怔。One()方法可以為元素綁定處理函數(shù)。當處理函數(shù)觸發(fā)一次后兄墅，立即被刪除踢星。即在每個對象上，事件處理函數(shù)只會被執(zhí)行一次察迟。
- 4.1.7 模擬操作
- 常用模擬
- 以使用trigger()方法完成模擬操作斩狱。例如可以使用下面的代碼來觸發(fā)id為btn的按鈕的click事件。
- 也可以直接用簡化寫法click()扎瓶，來達到同樣的效果：
$('#btn').trigger("click")所踊；
$('#btn').click()；
- 觸發(fā)自定義事件
// 例如為元素綁定一個“myClick”的事件概荷，jQuery代碼如下：
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定義事件.</p>")秕岛；
})；
// 想要觸發(fā)這個事件，可以使用以下代碼來實現(xiàn)：
$('#btn').trigger("myClick")继薛；
- 傳遞數(shù)據
- trigger(type,[data])方法有兩個參數(shù)修壕，第1個參數(shù)是要觸發(fā)的事件類型，第2個參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據遏考，以數(shù)組形式傳遞慈鸠。通常可以通過傳遞一個參數(shù)給回調函數(shù)來區(qū)別這次事件是代碼觸發(fā)的還是用戶觸發(fā)的灌具。
下面是一個傳遞數(shù)據的例子青团。
$('#btn').bind("myClick", function(event, message1, message2){ //獲取數(shù)據
$('#test').append( "<p>"+message1 + message2 +"</p>")；
})咖楣；
$('#btn').trigger("myClick", ["我的自定義","事件"] )督笆； //傳遞兩個數(shù)據
- 執(zhí)行默認操作
- trigger()方法觸發(fā)事件后，會執(zhí)行瀏覽器默認操作诱贿。例如：
- $("input").trigger("focus")娃肿；
- 以上代碼不僅會觸發(fā)為<input>元素綁定的focus事件，也會使<input>元素本身得到焦點（這是瀏覽器的默認操作）珠十。
- 如果只想觸發(fā)綁定的focus事件料扰，而不想執(zhí)行瀏覽器默認操作，可以使用jQuery中另一個類似的方法——triggerHandler()方法宵睦。
- $("input").triggerHandler("focus")记罚；
- 該方法會觸發(fā)<input>元素上綁定的特定事件，同時取消瀏覽器對此事件的默認操作壳嚎，即文本框只觸發(fā)綁定的focus事件桐智，不會得到焦點。
- 4.1.8 其他用法
- 綁定多個事件類型
$(function(){
$("div").bind("mouseover mouseout", function(){
$(this).toggleClass("over");
});
});
- 添加事件命名空間烟馅，便于管理
- 例如可以把為元素綁定的多個事件類型用命名空間規(guī)范起來说庭，jQuery代碼如下:
$(function(){
$("div").bind("click.plugin",function(){ // 為click添加了plugin命名空間
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function(){ // 為mouseover添加了plugin命名空間too
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
$("div").unbind(".plugin"); // 為div元素unbind時只需要指定命名空間即可刪除所有此命名空間的事件
});
});
- 相同事件名稱，不同命名空間執(zhí)行方法
- 例如可以為元素綁定相同的事件類型郑趁，然后以命名空間的不同按需調用
$(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin", function(){
$("body").append("<p>click.plugin事件</p>");
});
$("button").click(function() {
$("div").trigger("click!"); //注意click后面的感嘆號刊驴，+感嘆號只觸發(fā)沒有命名空間的click事件;
});
});
- 如果需要兩者都被觸發(fā)，改為如下代碼即可：
- $("div").trigger("click")寡润； //去掉感嘆號
- 4.2jQuery中的動畫
- 注意：用 jQuery做動畫效果要求要在標準模式下捆憎，否則可能會引起動畫抖動。標準模式即要求文件頭部包含如下的DTD定義：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
show()方法和hide()方法
- show()方法和hide()方法是 jQuery 中最基本的動畫方法梭纹。在 HTML 文檔里躲惰，為一個元素調用hide()方法，會將該元素的display樣式改為“none”变抽。
- 可以使用show()方法將元素的display樣式設置為先前的顯示狀態(tài)（“block”或“inline”或其他除了“none”之外的值）础拨。
show()方法和hide()方法讓元素動起來
- 如果希望在調用show()方法時氮块，元素慢慢地顯示出來，可以為show()方法指定一個速度參數(shù)诡宗，"slow", ",normal”和“fast”（長度分別是600毫秒滔蝉，400毫秒和200毫秒）。$("element").show("slow")塔沃；
- 不僅如此蝠引，還可以為顯示速度指定一個數(shù)字，單位是毫秒芳悲。例如立肘，使用如下代碼使元素在1秒鐘（1000毫秒）內顯示出來：$("element").show(1000)；
- 4.2.2 fadeIn()方法和fadeOut()方法
$(":header").click(function () {
var $con = $(this).next()
if($con.is(":visible")){
$con.fadeOut()
}
else{
$con.fadeIn()
}
})
4.2.3 slideUp()方法和slideDown()方法
- slideDown() 方法通過使用滑動效果名扛，顯示被隱藏的元素。
- slideUp() 通過使用滑動效果茧痒，隱藏被選元素肮韧，如果元素已顯示出來的話。
- $(selector).slideUp or slideDown(speed,callback)
- speed 可以是 毫秒數(shù) 也可以是關鍵詞 "slow"旺订，"normal"弄企，"fast"
- callback可選。slideUp 函數(shù)執(zhí)行完之后区拳，要執(zhí)行的函數(shù)拘领。
- 4.2.4 自定義動畫方法animate()
- $(selector).animate(styles,speed,easing,callback)
- animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)樱调。CSS屬性值是逐漸改變的约素，這樣就可以創(chuàng)建動畫效果。
- 只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）笆凌。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）圣猎。
$("#btn1").click(function () {
$("p").animate({"borderWidth":"10px", fontSize:"30px"})
})
$("#btn2").click(function () {
$("p").animate({"borderWidth":"1px", fontSize:"20px"})
})
- 綜合動畫
- 接下來將完成更復雜的動畫。單擊<div>元素后讓它向右移動的同時增大它的高度乞而，并將它的不透明度從50%變換到100%送悔，然后再讓它從上到下移動，同時它的寬度變大爪模，當完成這些效果后欠啤，讓它以淡出的方式隱藏。
$(function(){
$("#myP").css("opacity", "0.5");//設置不透明度
$("#myP").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top: "200px", width :"200px"}, 3000 )
.fadeOut("slow");
});
});
- 4.2.5 動畫回調函數(shù)
- 如果在動畫的最后一步要切換元素的CSS樣式屋灌，而不是隱藏元素：
- 如果只是按照常規(guī)的方式洁段，將fadeOut ("slow") 改為css ("border","5px solid blue") 預期的效果是在動畫的最后一步改變元素的樣式，而實際的效果是声滥，剛開始執(zhí)行動畫的時候眉撵，css()方法就被執(zhí)行了侦香。原因是 css()方法并不會加入到動畫隊列中，而是立即執(zhí)行纽疟。
- 可以使用回調函數(shù)（callback）對非動畫方法實現(xiàn)排隊罐韩。只要把 css()方法寫在最后一個動畫的回調函數(shù)里即可。代碼如下：
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000, function(){
$(this).css("border","5px solid blue");
})
});
- 注意：callback回調函數(shù)適用于jQuery所有的動畫效果方法污朽，例如slideDown()方法的回調函數(shù)：
- 這段代碼表示id = "element"的元素將在0.4秒內（正常速度）向下完全展開散吵。當動畫完成后，執(zhí)行回調函數(shù)體內的代碼蟆肆。
$("#element").slideDown("normal", function(){
//在效果完成后做其他的事情
})矾睦；
- 4.2.6 停止動畫和判斷是否處于動畫狀態(tài)
- 停止元素的動畫
很多時候需要停止匹配元素正在進行的動畫，例如上例的動畫炎功，如果需要在某處停止動畫枚冗，需要使用stop()方法。
stop()方法的語法結構為：stop([clearQueue],[gotoEnd])蛇损；參數(shù)clearQueue和gotoEnd都是可選的參數(shù)赁温，為Boolean值（ture或flase）。
clearQueue：后面的動畫隊列是否還要執(zhí)行淤齐；true執(zhí)行股囊，false不執(zhí)行；
gotoEnd：是否需要完成當前的動畫更啄；true完成稚疹，false不完成；
$(".btn1").click(function(){
//$("p").stop(); // 停止當前動畫祭务；
$("p").css("left",$("p").position().left+"px") // 當前位置内狗；
$("p").css("right","auto"); // 反向設置為auto
$("p").animate({left:"+=100px"},1000); //當前位置向右移動100
});
$(".btn2").click(function(){
$("p").stop();
$("p").css("right", -($("p").position().left)+"px")
$("p").css("left","auto");
$("p").animate({"right":"+=100px"},1000);
});
- 判斷元素是否處于動畫狀態(tài)
if(! $(element).is(":animated")){ //判斷元素是否正處于動畫狀態(tài)
//如果當前沒有進行動畫，則添加新動畫
}
- 延遲動畫 delay()
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.delay(1000)
.animate({top: "200px" , width :"200px"}, 3000 )
.delay(2000)
.fadeOut("slow");
4.2.7 其他動畫方法
-
toggle( speed, [callback] )
- toggle()方法可以切換元素的可見狀態(tài)待牵。如果元素是可見的其屏，則切換為隱藏的；如果元素是隱藏的缨该，則切換為可見的偎行。
-
slideToggle()方法
- slideToggle()方法通過高度變化來切換匹配元素的可見性。這個動畫效果只調整元素的高度贰拿。
$("#panel h5.head").click(function(){
$(this).next().slideToggle();
});
- fadeTo()方法
- $(selector).fadeTo(speed,opacity,callback)
$(".btn1").click(function(){
$("p").fadeTo(1000,0.4);
});
- fadeToggle()方法
$(selector).fadeToggle(speed,easing,callback)
淡入和淡出的切換：fadeToggle() 方法在 fadeIn()和 fadeOut() 方法之間切換蛤袒。
-
4.2.8 動畫方法概括
動畫方法概括
第5章 jQuery對表單、表格的操作及更多應用
- 5.1表單應用
- 5.1.1 單行文本框應用
- 對textarea設置動畫animate
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger" >向上</span>
<span class="smaller" >向下</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度變化.多行文本框高度變化.多行文
本框高度變化.多行文本框高度變化.多行文本框高度變化.多行文本框高度變化.多行文本框高度變化.多行文本框高度變
化.多行文本框高度變化.</textarea>
</div>
</div>
</form>
// jQuery代碼
$(function(){
var $comment = $('#comment'); //獲取評論框Obj
$('.bigger').click(function(){ //“放大”按鈕綁定單擊事件
if( $comment.height() < 500 ){
//重新設置高度膨更，在原有的基礎上加50
if(!$comment.is(":animated")){
// $comment.animate({height:"-=50"},400); // element高度的變化
$comment.animate({scrollTop:"-=50"},400); // element滾動條高度變化
}
}
});
$('.smaller').click(function(){ //“縮小”按鈕綁定單擊事件
if( $comment.height() > 50 ){
//重新設置高度妙真，在原有的基礎上減50
if(!$comment.is(":animated")){
$comment.animate({scrollTop:"+=50" },400);
}
}
});
});
- 對復選框最基本的應用，就是對復選框進行全選荚守、反選和全不選等操作珍德。復雜的操作需要與選項掛鉤爆存，來達到各種級聯(lián)反應效果潮尝。
<form>
你愛好的運動是药薯？<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<br/>
<input type="button" id="CheckedAll" value="全 選"/>
<input type="button" id="CheckedNo" value="全不選"/>
<input type="button" id="CheckedRev" value="反 選"/>
<input type="button" id="send" value="提 交"/>
</form>
</body>
<script type="text/javascript">
$("#CheckedAll").click(function(){
//哪些應該用prop()訪問呢获诈？第一個原則：只添加屬性名稱該屬性就會生效應該使用prop()；第二個原則：只存在true/false的屬性應該使用prop()泵琳。按照官方說明摄职，如果是設置disabled和checked 這些屬性，應使用prop()方法获列，而不是使用attr()方法谷市。
//對于HTML元素本身就帶有的固有屬性，在處理時击孩，使用prop方法迫悠。
//對于HTML元素我們自己自定義的DOM屬性，在處理時巩梢，使用attr方法及皂。
$('input[type=checkbox]').prop("checked","true");
});
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').prop('checked', false); //
});
$("#CheckedRev").click(function () {
$("input[type=checkbox]").each(function () { // 遍歷每一個符合的元素
// 值取反, 如果選中checkbox是true那么用！變成false且改，沒選中false！取反變成true作為值設置到checked屬性里;
$(this).prop("checked", !$(this).prop("checked"))
})
})
$("#send").click(function () {
str = "you checked is ： "
$('input[type=checkbox]:checked').each(function () { // :checked 挑選出選中的checkbox
str += $(this).val()+"\r\n"; // val() get element value
})
alert(str)
})
- 根據一個復選框的屬性值 來給其它復選框加同樣的屬性值
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr("checked", this.checked);
});
5.1.4 下拉框應用
-
是某網站的一個后臺新增界面板驳，在“負責頻道”這個區(qū)域又跛，用戶可以通過中間的按鈕將左邊選中的選項添加到右邊，也可以將右邊的選項添加到左邊若治，或者雙擊選項慨蓝，將其添加給對方。
圖片.png
<style>
select {
width:100px;
height:160px;
}
.floatDiv{
float:left;
}
#select1{
background: #eaffe7;
}
#select2{
background: #ffd9eb;
}
</style>
<script src="./jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<select multiple id="select1">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
<option value="7">option7</option>
<option value="8">option8</option>
</select>
<select multiple id="select2"></select>
<div>
<div class="floatDiv">
<span id="add">添加選中項> > </span><br/>
<span id="addAll">添加全部項> ></span>
</div>
<div class="floatDiv">
<span id="remove">刪除選中項> > </span><br/>
<span id="removeAll">刪除全部項到左邊> ></span>
</div>
</div>
</body>
<script type="text/javascript">
$("span#add").click(function () {
var $option = $("select#select1 option:selected")
var $remove = $option.remove()
$("#select2").append($remove)
})
$("#addAll").click(function () {
$("#select2").append($("#select1 option").remove())
})
$("span#remove").click(function () {
var $option = $("select#select2 option:selected")
var $remove = $option.remove()
$("#select1").append($remove)
})
$("#removeAll").click(function () {
$("#select1").append($("#select2 option").remove())
})
$("#select1").dblclick(function () {
var $options = $("option:selected"); //獲取選中的選項
$options.appendTo('#select2'); //追加給對方
})
$("#select2").dblclick(function () {
var $options = $("option:selected"); //獲取選中的選項
$options.appendTo('#select1'); //追加給對方
})
</script>
- 5.1.5 表單驗證
<style>
div.int{
width:500px;
text-align:left;
}
div.sub{
width:230px;
text-align:center;
position:relative;
}
.high{
color:red;
font-weight:bold;
}
</style>
<script src="./jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用戶名:</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">郵箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">個人資料:</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/>
<input type="reset" id="res"/>
</div>
</form>
</body>
<script type="text/javascript">
$("form :input.required").each(function () {
$(this).after($("<strong class='high'> * </strong>"))
})
$("form :input").bind("blur keyup focus", function () {
var $parent = $(this).parent()
if($(this).is($("#username"))){
$(this).parent().find(".formtips").remove()
if(this.value=="" || this.value.length<6){
$(this).after($('<span class="formtips onError">至少輸入六位的用戶名</span>'))
}
else{
$(this).after($('<span class="formtips onSuccess">輸入正確</span>'))
}
}
if ($(this).is($("#email"))){
$(this).parent().find(".formtips").remove()
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]+/.test(this.value) ) ){
$(this).after($('<span class="formtips onError">請輸入正確的E-Mail地址</span>'))
}
else{
$(this).after($('<span class="formtips onSuccess">輸入正確</span>'))
}
}
})
$("#send").click(function () {
$("form .required:input").trigger("blur");
if($("form .onError").length){
return false
}
alert("go to next...")
})
</script>
- 5.2表格應用
-
5.2.1 表格變色
1.普通的隔行變色
// Html 代碼
<table>
<thead>
<tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
</thead>
<tbody>
<tr><td>張山</td><td>男</td><td>浙江寧波</td></tr>
<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>王五</td><td>男</td><td>湖南長沙</td></tr>
<tr><td>趙六</td><td>男</td><td>浙江溫州</td></tr>
<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
// jQuery 代碼
<script>
$("tr:odd").addClass("odd")端幼； /* 給奇數(shù)行添加樣式*/
$("tr:even").addClass("even")礼烈； /* 給偶數(shù)行添加樣式*/
</script>
2.單擊控制表格行高亮
$("tbody>tr").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
})
// 當初始化表格的時候，默認已經選中的行將被高亮顯示
$('tbody>tr:has(:checked)').addClass('selected')婆跑；
3.復選控制多行表格行高亮
$("tbody>tr").click(function () {
if($(this).hasClass("selected")){
$(this).removeClass("selected")
}
else{
$(this).addClass("selected")
}
})
//可以簡化成以下格式
$('tbody>tr').click(function() {
var hasSelected=$(this).hasClass('selected');
$(this)[hasSelected?"removeClass":"addClass"]('selected');
})
- 5.2.2 表格展開關閉
// Html 代碼
<table>
<thead>
<tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前臺設計組</td></tr>
<tr class="child_row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前臺開發(fā)組</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南長沙</td></tr>
<tr class="child_row_02"><td>趙六</td><td>男</td><td>浙江溫州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后臺開發(fā)組</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
// jQuery 代碼
<script>
$("tr[class=parent]").click(function () {
var classv = $(this).prop("id")
$(this).siblings(".child_"+classv).toggle()
}) // 選中的element立刻調用一次click
</script>
- 如果當用戶剛進入頁面時此熬，默認需要收縮起來，也是很簡單的滑进。只要觸發(fā)click()事件即可犀忱。
$("tr[class=parent]").click(function () {
var classv = $(this).prop("id")
$(this).siblings(".child_"+classv).toggle()
}).click()
- 5.2.3 表格內容篩選
- 首先在表格上方添加一個文本框，用于根據用戶輸入的內容來篩選表格內容扶关，然后為文本框綁定blur事件
$("input#myi").ready(function () {
$("tr").css("display","none").removeClass("selected")
$("input#myi").blur(function () {
$("tr").css("display","none").removeClass("selected")
var value = $(this).val();
$("tr:contains('"+value+"')").addClass("selected").show()
})
})
- 5.3其他應用
- 5.3.1 網頁字體大小
<body>
<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >縮小</span>
</div>
<div>
<p id="para">
This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text.
</p>
</div>
</div>
</body>
<script type="text/javascript">
$("span").click(function () {
var thisEle = $("#para").css("font-size")
var textFontSize = parseInt(thisEle , 10) // 轉換為10進制的整數(shù)阴汇；
var unit = thisEle.slice(-2) // 得到字體單位slice切-2開始到最后的str 這里就是px
var cName = $(this).attr("class") // 得到點擊元素的class屬性
if(cName=="bigger"){
if(textFontSize<=22){ // 不超過22時+=2
textFontSize+=2;
}
}
else if(cName=="smaller") {
if(textFontSize>=12){
textFontSize-=2;
}
}
$("p#para").css("font-size",textFontSize+unit)
})
</script>
5.3.2 網頁選項卡
<style>
ul{
padding-left:0;
}
ul li{
width:60px;
height:20px;
border:1px solid black;
margin-right:5px;
background-color: #eaeaea;
display:block;
float:left;
text-align:center;
}
.tab_box div.hide{
display:none
}
.tab_box div{
width:500px;
height:250px;
border:1px solid black;
float:left;
}
.tab_box{
clear:both;
}
.selected{
background-color: #4974ff;
color:white;
}
</style>
<script src="./jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">時事</li>
<li>體育</li>
<li>娛樂</li>
</ul>
</div>
<div class="tab_box">
<div>時事</div>
<div class="hide">體育</div>
<div class="hide">娛樂</div>
</div>
</div>
</body>
<script type="text/javascript">
$("ul li").click(function () {
$(this).siblings().removeClass("selected").end().addClass("selected"); // 先把選中的siblings全部刪除selected，再把選中的加上selected节槐；
var value = $(this).text()
$(".tab_box div:contains('"+value+"')").siblings().hide().end().show() // 先把內容隱藏搀庶，然后把相關內容顯示拐纱；
})
</script>
- 5.3.3 網頁換膚
