JQuery基礎多媒體課件

第10章jQuery基礎主要內(nèi)容jQuery概述jQuery中的"$"jQuery與CSS使用選擇器管理選擇結果10.1jQuery概述10.1.1Jquery及其優(yōu)勢jQuery是一個優(yōu)秀的JavaScript框架，集JavaScript、CSS、DOM、Ajax功能于一體。簡化JavaScript的復雜操作方便地選取頁面元素—DOM的主要工作。簡化常用的JavaScript操作，如數(shù)組的操作，迭代等。提供了Ajax操作，簡化了代碼的書寫，方便了異步交互的開發(fā)和使用。簡化了制作動畫效果的過程。提供大量實用方法10.1jQuery概述解決了瀏覽器的兼容性問題便捷地修改頁面的表現(xiàn)—CSS的主要工作，并解決了瀏覽器的兼容性問題。輕松地處理事件，解決了瀏覽器的兼容問題。10.1.2jQuery的下載下載地址：10.1.3jQuery設計思想1、選擇網(wǎng)頁元素的方法模擬CSS選擇元素獨有表達式選擇多種篩選方法（1）模擬CSS選擇元素document.getElementById('div1');$('#div1')$('div')$('.box').document.getElementsByTagName('div');getByClass(document,'box');（2）獨有表達式選擇$("li.box")$("li[title]")$("li:last")<ul>

<li>1</li><liclass='box'>1</li><liclass='box'>1</li><lititle='hello'>1</li><lititle='world'>1</li></ul>（3）多種篩選方法$("li:last")$("li").filter("[title=world]")$("li:eq(4)")<ul>

<li>1</li><liclass='box'>1</li><liclass='box'>1</li><lititle='hello'>1</li><lititle='world'>1</li></ul>$("li[title=world]")（4）Jquery兼容性處理window.onload=function(){ varoUl=document.getElementsByTagName("ul")[0]; varaChild=oUl.childNodes; for(vari=0;i<aChild.length;i++){ if(aChild[i].nodeType==1){ aChild[i].style.background="blue";

} });$('ul').children().css('background','red');10.1.3jQuery設計思想2、jQuery寫法方法函數(shù)化取值賦值合體鏈式操作window.onload=function(){};$(function(){});innerHTML=123;html(123)onclick=function(){};click(function(){})（1）Jquery的方法函數(shù)化（1）Jquery的方法函數(shù)化$(function(){ $('div').click(function(){ $(this).html('divdiv'); })})window.onload=function(){ varoDiv=document.getElementById('div1'); oDiv.onclick=function(){ oDiv.innerHTML="div"; }}（2）取值和賦值方法合體html()css()注意：當操作一組元素的時候取值是一組中的第一個賦值是一組中的所有元素$(“div”).css(“background”)讀取$(“div”).css(“background”,“red“)賦值（3）Jquery的鏈式操作varoDiv=$('#div1');oDiv.html('hello');oDiv.css('background','red');oDiv.click(function(){ alert(123);})$('#div1').html('hello').css('background','red').click(function(){ alert(123);});10.2jQurey中的"$""$"是什么？函數(shù)！等同于“jQuery""$"能接收的參數(shù)函數(shù)（$是函數(shù)的前綴）字符串選擇DOM元素創(chuàng)建DOM元素對象“$”調(diào)用jQuery中的自定義函數(shù)alert(typeof$)1.$(document).ready()頁面HTML框架需要在頁面完全加載后才能使用，因此JavaScript編程時要使用window.onload函數(shù)。如果需要在頁面中多處使用該函數(shù)，或者其他.js文件中也包含window.onload，沖突將十分棘手。jQuery中的ready函數(shù)解決了這個問題，可以自動將其中的函數(shù)在頁面加載完成后運行，并且同一個頁面中可以使用多個ready方法，互相不沖突。$(document).ready(function(){

//dosomething});$(function(){

//dosomething});2.利用"$"創(chuàng)建DOM元素JavaScript創(chuàng)建DOM的方法創(chuàng)建節(jié)點元素創(chuàng)建文本節(jié)點將文本節(jié)點作為孩子添加到節(jié)點document.onclick=function(){ varoNewP=document.createElement("p"); varoText=document.createTextNode("這是一個感人肺腑的故事"); oNewP.appendChild(oText); document.body.appendChild(oNewP);}2.利用"$"創(chuàng)建DOM元素jQuery創(chuàng)建DOM的方法$("")$(document).click(function(){ varoNewP=$("<p>這是一個感人肺腑的故事</p>"); $(document.body).append(oNewP);});3.包裝JavaScript對象JS對象在JQ中的引用方法：使用"$"選取$(this)$(document)$(document.body)$(window)varoDiv;$(oDiv)3.包裝JavaScript對象JQ與JS代碼可以共存，但在一個表達式中不能混寫JavaScript中的原生對象可以調(diào)用原生的方法/屬性JQ對象可以調(diào)用JQ中的方法

$(this).html()

//jq的寫法

this.innerHTML

//js的寫法

$(this).innerHTML

//錯誤！this.html()

//錯誤！4.使用$調(diào)用jQurey的功能函數(shù)jQuery中提供了很多功能函數(shù)，完成諸多方面的功能，涉及Javascript的方方面面。調(diào)用方法：$.4.使用$調(diào)用jQurey的功能函數(shù)<scriptsrc="jquery-1.11.1.min.js"></script><script>varsStr="123456";sStr=$.trim(sStr);alert(sStr.length);</script>【例】$引用功能函數(shù)的用法。10.3jQuery與CSS3CSS1：1996年由W3C推出CSS2：1998年推出，陸續(xù)得到多數(shù)瀏覽器支持CSS3：陸續(xù)發(fā)布中，吸取了web發(fā)展的需求，提出了很多新穎的CSS特性。增強了選擇器，如屬性選擇器，位置選擇器等。存在的問題：各瀏覽器對CSS3的支持還有待提高。jQuery：提供了幾乎CSS3下的所有選擇器，具有很好的兼容性，使理論上的CSS3選擇器變成了事實。10.3jQuery與CSS3CSS選擇器參考手冊10.4使用選擇器基本選擇器層疊選擇器屬性選擇器位置選擇器過濾選擇器反向過濾選擇器10.4.1基本選擇器$("#id")

id選擇器$("tagName")

標簽選擇器，返回數(shù)組

$(".class")

類選擇器，返回數(shù)組

$("*")

選擇文檔中的所有的元素組合形式：$("E.C")選擇樣式名稱為C的E標記$("E#I")選擇id為I的E標記10.4.2層疊選擇器目前主流的瀏覽器尚不完全支持CSS3選擇器，jQuery在滿足兼容性的前提下，實現(xiàn)按照CSS3方式選擇元素10.4.2層疊選擇器$("E,F")選擇所有E元素和所有F元素（并集）$("EF")選擇E元素內(nèi)部的所有F元素（子孫節(jié)點）$("E>F")選擇父元素是E的所有F元素（子節(jié)點）$("E+F")選擇E元素后面的直接兄弟F元素（兄弟）$("E~F")選擇E元素后面的兄弟F元素，包括非直接兄弟節(jié)點10.4.2層疊選擇器$("EF")選擇E元素下面的所有子節(jié)點，包括非直接子節(jié)點$("forminput")10.4.2層疊選擇器$("E>F")選擇E元素下面的直接子節(jié)點$("form>input")10.4.2層疊選擇器$("E+F")選擇E元素后面的直接兄弟節(jié)點$("label+input")10.4.2層疊選擇器$("E+F")選擇E元素后面的直接兄弟節(jié)點$("form+input")10.4.2層疊選擇器$("E~F")選擇E元素后面的兄弟節(jié)點，包括非直接兄弟節(jié)點$("label~input")10.4.3屬性選擇器基本語法：$("E[屬性及其邏輯關系]")E[屬性]設置了該屬性的標記E[屬性=V]屬性值等于V的E標記E[屬性!=V]屬性值不等于V的E標記E[屬性^=V]屬性值以V開頭的E標記E[屬性$=V]屬性值以V結尾的E標記E[屬性*=V]屬性值包含V的E標記10.4.3屬性選擇器a{text-decoration:none;color:#000000;}<ul> <li><ahref="http://">(設置了href)</a>

<ul>

<li>10-6.html</li>

<li><ahref="10-7.html">10-7.html(設置了href)</a></li>

<li><ahref="10-8.html"title="圓角矩形">10-8.html（設置了href和title）</a></li>

<li><ahref="10-9.html">10-9.html（設置了href）</a></li><li><ahref="isaac.html"title="制作中...">isaac.html（設置了href和title）</a></li>

</ul>

</li></ul>10.4.3屬性選擇器1、選擇設置了"title"屬性的a標記，將其樣式設置為顯示下劃線2、將鏈接屬性為"10-9.html"的a標記，樣式設置為顯示下劃線3、將鏈接以"http://"開頭的a標記設置顯示下劃線4、將鏈接以"html"結尾的a標記設置為顯示下劃線5、將鏈接中包含"isaac"字符串的設置顯示下劃線10.4.4位置選擇器$("E:first")

選擇所有E元素的第一個$("E:last")

選擇所有E元素的最后一個$(“E:even”)

選擇所有E元素偶數(shù)序列（全局計數(shù)，從0開始）$(“E:odd”)

選擇所有E元素奇數(shù)序列（全局計數(shù)，從0開始）

10.4.4位置選擇器$("E:first-chilid")

選擇作為第一個子節(jié)點存在的E$("E:last-child")

選擇作為最后一個子節(jié)點存在的E$("E:nth-child(n)")選擇作為第n個子節(jié)點存在的E（從1開始計數(shù)）$("E:nth-child(odd|even)")選擇作為奇數(shù)序或偶數(shù)序存在的子節(jié)點E（局部計數(shù)，從1開始）$("E:parent")選擇作為父節(jié)點的E元素10.4.4位置選擇器$("E:eq(n)")

選擇所有的E中序號為n+1的元素$("E:gt(n)")

選擇E元素中序號大于n的所有元素（不包括n本身）$("E:lt(n)")

選擇E元素中序號小于n的所有的元素（不包括n本身）10.4.4位置選擇器$("p:first")$("p:last")$("p:first-child")$("p:last-child")$("p:odd")$("p:even")$("p:nth-child(odd)")$("p:nth-child(even)")$("p:eq(2)")$("p:gt(2)")$("p:lt(2)")10.4.4位置選擇器$("p:first")整個頁面排序$("p:first-child")根據(jù)各自的父節(jié)點排序10.4.4位置選擇器$("p:nth-child(odd)")根據(jù)各自的父元素單獨排序，局部排序從1開始$("p:odd")整個頁面排序，全局排序從0開始10.4.4位置選擇器$("p:nth-child(1)")從１開始計數(shù)10.4.4位置選擇器$("p:eq(2)")整個頁面排序從0開始$("p:gt(2)")整個頁面排序從0開始$("p:lt(2)")整個頁面排序從0開始10.4.4位置選擇器從1開始計數(shù)nth-child(n)

:nth-child(odd|even)：奇偶從1開始計數(shù)從0開始計數(shù)的選擇器oddeven:eq():gt():lt()10.4.4位置選擇器練習：1、選擇最后一個p標記2、選擇每個div中的偶數(shù)行3、選擇頁面中所有奇數(shù)p標記4、選擇所有p標記中的第5個5、選擇3-6的p標記6、選擇1-3的p標記補充slice()函數(shù)的使用7、選擇3-5的標記10.4.4位置選擇器【練習】利用jQuery使用CSS3的選擇器：:nth-child(n)。<style>.myclass{ background-color:#069; color:#900; }</style><ul><li>波斯帝國</li>

<li>羅馬帝國</li><li>匈奴帝國</li><li>拜占庭帝國</li><li>孔雀王朝</li><li>查理曼帝國</li></ul>10.4.4位置選擇器【練習】實現(xiàn)表格的隔行變色。10.4.4位置選擇器<tableclass="datalist"

id="oTable"> <tr> <thscope="col">Name</th> <thscope="col">Class</th> <thscope="col">Birthday</th> <thscope="col">Constellation</th> <thscope="col">Mobile</th> </tr> <tr> <td>isaac</td> <td>W13</td> <td>Jun24th</td> <td>Cancer</td> <td>1118159</td> </tr> ……10.4.4位置選擇器比較:odd和:nth-child(odd)的區(qū)別$("tabletr:nth-child(odd)")$("tabletr:odd")從0開始從1開始10.4.5過濾選擇器$("E:has(F)")

選擇所有含有F標簽的E元素（根據(jù)子元素確定父元素）$("E:contains(‘XX’)")選擇所有E中含有XX文本的元素（按內(nèi)容做選擇）:hidden 頁面中被隱藏的元素display="none":disable 頁面中被禁用了的元素:enable 頁面中未被禁用的元素:animated 所有處于動畫中的元素:header 所有標題元素<h1><h2>….10.4.5過濾選擇器:text

所有文本輸入框,input[type=text]:checkbox

所有復選框,input[type=checkbox]:input 表單元素，包括<input><select><textarea><button>:password 密碼文本框,input[type=password]:radio

所有單選按鈕,input[type=radio]:submit 所有提交按鈕,input[type=submit],

button[type=submit]:reset

所有重置按鈕,input[type=reset],button[type=reset]:image 圖片提交按鈕,input[type=image]:file

上傳文件的元素,input[type=file]:button 按鈕，input[type=button]和

<button>標記:selected

下拉菜單中被選中的項:checked

復選框和單選框中被選中的項10.4.5過濾選擇器【例】輸出表單上填寫的各項信息。JavaScript：表單元素的獲取：表單對象.name元素值的獲?。何谋究颍涸?value下拉框：元素.options[元素.selectedIndex].value單選按鈕：元素[i].value（checked為true）復選按鈕：元素[i].value（checked為true）10.4.5過濾選擇器$(":text")$(":password")$(":selected")$(":radio:checked")$(":checkbox:checked")10.4.6反向過濾器:not(標簽/過濾器)$("input:not(:checked)")

過濾掉所有被checked的input元素10.4.6反向過濾器:not(過濾器)$(":input:not(:checked)

")

過濾掉所有被checked的input,select,textarea元素10.4.6反向過濾器連續(xù)使用反向過濾器$(":input:not(:checkbox):not(textarea)")10.5jQuery遍歷函數(shù)

jQuery遍歷：each()jQuery過濾：find(),has(),filter(),add(),not(),is()jQuery祖先：parent(),parents(),offsetParent()jQuery后代：children()jQuery同胞：next(),prev(),siblings()10.5.1jQuery遍歷遍歷元素的方法each(遍歷函數(shù))遍歷函數(shù)有一個參數(shù)：index，標識集合中每個元素的索引值（從0開始）10.5.1jQuery遍歷<imgsrc="01.jpg"id="Tsinghua01"><imgsrc="02.jpg"id="Tsinghua02"><imgsrc="03.jpg"id="Tsinghua03"><imgsrc="04.jpg"id="Tsinghua04"><imgsrc="05.jpg"id="Tsinghua05">【實例】設置每幅圖片的title屬性。10.5.1jQuery遍歷$(function(){ $("img").each(function(index){ this.title="這是第"+index+"幅圖，id是："+this.id; });});遍歷元素的方法each(遍歷函數(shù))遍歷函數(shù)有一個參數(shù)：index配合this對象的使用10.5.2jQuery過濾—查詢函數(shù)find().find(表達式/JQ對象/DOM元素)搜索所有與指定參數(shù)匹配的元素?？梢苑奖愕剡x擇正在處理的元素的子孫元素。<p><span>Hello</span>,howareyou?</p>$("p").find("span")[<span>Hello</span>]10.5.2jQuery過濾—查詢函數(shù)find().has(選擇器/DOM元素)功能同$("E:has(F)")

選擇所有含有F標簽的E元素（根據(jù)子元素確定父元素）將匹配元素集合縮減為擁有匹配指定選擇器或DOM元素的子集。<ul><li>111</li></ul><ul></ul>$(“ul").has(“l(fā)i")<ul><li>111</li></ul>10.5.2jQuery過濾—查詢函數(shù)find()has()和find()的比較has()的功能同:has()過濾器，獲取當前對象的子集find()的功能同EF層疊選擇器，獲取當前元素的子孫元素10.5.2jQuery過濾—查詢函數(shù)find()<body><divid="navigation"> <ulid="listUL"> <li><ahref="#">Home</a></li> <li><ahref="#">News</a> <ul> <li><ahref="#">LastestNews</a></li> <li><ahref="#">AllNews</a></li> </ul> </li> <li><ahref="#">Sports</a> <ul> <li><ahref="#">Basketball</a></li><li><ahref="#">Football</a></li><li><ahref="#">Volleyball</a></li></ul></li> <li><ahref="#">Weather</a> <ul> <li><ahref="#">Today'sWeather</a></li><li><ahref="#">Forecast</a></li></ul></li> <li><ahref="#">ContactMe</a></li> </ul></div></body>10.5.2jQuery過濾—查詢函數(shù)find()$('li').has('ul').css('background-color','#3C6');10.5.2jQuery過濾—查詢函數(shù)find()$("li").find("ul").css('background-color','#3C6');10.5.2jQuery過濾—過濾函數(shù)filter()在集合中繼續(xù)過濾元素.filter(通用表達式).filter(過濾函數(shù))filter()函數(shù)過濾功能更加靈活，強大10.5.2jQuery過濾—過濾函數(shù)filter().filter(通用表達式)選擇器表達式，可以有多個條件，

用逗號分隔(邏輯“或”關系)屬性表達式寫在“[]”中用途：實現(xiàn)鏈式操作（遞進并且）書寫簡便10.5.2jQuery過濾—過濾函數(shù)filter()【實例】實現(xiàn)DIV樣式的修改。<div>.middle背景色#FCF藍色邊框10.5.2jQuery過濾—過濾函數(shù)filter()<body> <div></div> <divclass="middle"></div> <divclass="middle"></div> <divclass="middle"></div> <divclass="middle"></div> <div></div></body>$("div").css("background","#FCF");$("div.middle").css("border","2pxsolid#009");10.5.2jQuery過濾—過濾函數(shù)filter()<body> <div></div> <divclass="middle"></div> <divclass="middle"></div> <divclass="middle"></div> <divclass="middle"></div> <div></div></body>$("div").css("background","#FCF").filter(".middle").css("border","2pxsolid#009");10.5.2jQuery過濾—過濾函數(shù)filter()$("a[href*=isaac]")

注意：在filter()的參數(shù)中，不能使用的"="，而只能使用"!=","^=",“$="和"*="。$("a").filter("[href*=isaac]") .filter(".middle").filter("[class*=middle]")

.filter("[class=middle]")

10.5.2jQuery過濾—過濾函數(shù)filter()【練習】篩選div元素。<div></div><divid="blue"></div><div></div><divid="ok"class="green"></div><divclass="green"></div><divclass="gray"></div><div></div>id是blue以及class是green的所有元素class是green

，并且id是ok的所有元素10.5.2jQuery過濾—過濾函數(shù)filter()【練習】篩選div元素。<div></div><divclass="middle"id="1"></div><divclass="middle"></div><divclass="dd"></div><divclass="middle"></div><div></div>id是1和class是middle的所有元素id是1并且class是middle的所有元素10.5.2jQuery過濾—過濾函數(shù)filter()【練習】使用filter函數(shù)實現(xiàn)表格的隔行變色。$("tabletr").filter(":nth-child(odd)

")$("tabletr:nth-child(odd)")$("tabletr:odd")$("tabletr").filter(":odd")10.5.2jQuery過濾—過濾函數(shù)filter().filter(過濾函數(shù))用戶可以利用函數(shù)進行自定義篩選條件。過濾函數(shù)需要返回布爾值。10.5.2jQuery過濾—過濾函數(shù)filter()【實例】修改所有DIV的背景，并將第2個DIV和id取值為“fourth”的DIV加上藍色邊框。<body> <divid="first"></div> <divid="second"></div> <divid="third"></div> <divid="fourth"></div> <divid="fifth"></div></body>10.5.2jQuery過濾—過濾函數(shù)filter()$(function(){

$("div").css("background","#FCF").filter(function(index){ returnindex==1||this.id=="fourth";}).css("border","2pxsolid#009"); });10.5.2jQuery過濾—添加函數(shù)add()向集合中添加元素.add(選擇器/DOM元素/jQuery對象)相等于[**,**]

$("img[alt]").add("img[title]")$("img[alt],img[title]")10.5.2jQuery過濾—刪除函數(shù)not()從集合中刪除元素.not(表達式).not()的功能同:not()過濾器，但表達式提供了比過濾器更便捷的方式not適用于反向邏輯問題10.5.2jQuery過濾—刪除函數(shù)not()【實例】將綠色和藍色之外的DIV加上邊框。10.5.2jQuery過濾—刪除函數(shù)not()<body> <div></div> <divid="blue"></div> <div></div> <divclass="green"></div> <divclass="green"></div> <divclass="gray"></div> <div></div></body>$("div:not('.green'):not('#blue')")$("div").not(".green,#blue")練習：使用filter()+表達式使用filter()+函數(shù)10.5.2jQuery過濾—刪除函數(shù)not()<ul>

<li>listitem1</li>

<li>listitem2</li>

<liid="notli">listitem3</li>

<li>listitem4</li>

<li>listitem5</li></ul>【練習】將id是notli之外的li加上背景色。$("li:not([id=notli])")$("li").not("[id=notli]")10.5.2jQuery過濾—刪除函數(shù)not()【練習】篩選出除復選框和單選按鈕之外的其他元素。not()函數(shù)not過濾器filter()函數(shù)+表達式filter()函數(shù)+函數(shù)參數(shù)10.5.2jQuery過濾—函數(shù)is()is(表達式)：表達式：字符串值，包含匹配元素的選擇器表達式。根據(jù)選擇器、元素或jQuery對象來檢測匹配元素集合，如果這些元素中至少有一個元素匹配給定的參數(shù)，則返回true。10.5.2jQuery過濾—函數(shù)is()<form><p><inputtype="checkbox"/></p></form>【實例】判斷input的雙親是否是form。$(“input:checkbox").parent().is("form")10.5.2jQuery過濾—函數(shù)is()<divclass="hide">aaa</div>【實例】判斷div是否隱藏。$("div").is(":hidden")10.5.3jQuery函數(shù)—獲取祖先、孩子、兄弟獲取祖先：parent(),parents(),offsetParent()parent()：獲得被選元素集合的所有父元素parents()：獲得被選元素集合的所有祖先元素offsetParent()：獲得用于定位的第一個父元素jQuery后代：children()children():返回被選元素集合的所有直接子元素jQuery同胞：next(),prev(),siblings()prev():返回被選元素集合的上一個同胞元素next():返回被選元素集合的下一個同胞元素siblings():獲得被選元素集合的同輩元素10.5.3jQuery函數(shù)—獲取祖先、孩子、兄弟<div><p>Hello</p></div><divclass="selected"><p>HelloAgain</p></div>$("p").parent(".selected").css("background","pink");10.5.3jQuery函數(shù)—獲取祖先、孩子、兄弟<div><span>Hello</span><pclass="selected">HelloAgain</p><divclass="selected">AndAgain</div>

<p>AndOneLastTime</p></div>$("div").children(".selected").css("color","blue");10.5.3jQuery函數(shù)—獲取祖先、孩子、兄弟<div><span>Hello</span></div><pclass="selected">HelloAgain</p><p>AndAgain</p>$("p").prev().css("background","yellow");$("p").prev(".selected").css("background","yellow");10.5.3jQuery函數(shù)—獲取祖先、孩子、兄弟<ul><li>listitem1</li><li>listitem2</li><liclass="third-item">listitem3</li><li>listitem4</li><li>listitem5</li></ul>$('li.third-item').siblings().css('background-color','pink');實戰(zhàn)--兩級伸縮菜單兩級伸縮菜單--頁面部分<body><divid="navigation"> <ulid="listUL"> <li><ahref="#">Home</a></li> <li><ahref="#">News</a>

<ulclass="myHide">

<