客包jquery課程介紹 紅色標記為

1、jQuery講師：小楊課程介紹:紅色標記為重點內(nèi)容課前說明內(nèi)容：掌握jQuery編程思想，使用jQuery進行常見網(wǎng)頁效果開發(fā)。目標：能夠使用jQuery開發(fā)常見網(wǎng)頁效果。參考書：鋒利的jQueryjQuery官網(wǎng)：API：jQuery(xml文件。)jQuery UI：常見的JavaScript框架庫什么是JavaScript框架庫？普通JavaScript的缺點：每種控件的操作方式不統(tǒng)一，不同瀏覽器下有區(qū)別封裝庫，要編寫跨瀏覽器的程序非常麻煩。因此出現(xiàn)了很多對JavaScript的。常見的JavaScript框架庫Prototype、YUI(網(wǎng)絡反響一般)、Dojo、ExtJS、jQuer

2、y等，這些庫對JavaScript進行了封裝，簡化了開發(fā)。這些庫是對JavaScript的封裝， 內(nèi)部都是用JavaScript實現(xiàn)的。jQuery:jQuery就是JavaScript語法寫的一些函數(shù)類，內(nèi)部仍然是調(diào)用JavaScript 實現(xiàn)的，所以并不是代替JavaScript的。使用jQuery的代碼、編寫jQuery的擴展插件等仍然需要JavaScript的技術(shù)，jQuery本身就是一堆JavaScript函數(shù)。jQuery簡介什么是jQuery？jQuery就是一個JavaScript函數(shù)庫，沒什么特別的。jQuery能做什么？jQuery是做什么的？ jQuery本身就是一堆Ja

3、vaScript函數(shù)， JavaScript是做什么的，jQuery也一樣。畢竟jQuery只是用JavaScript編寫的函數(shù)庫而已，有些功能jQuery沒有封裝，則還需要通過自己寫JavaScript來實現(xiàn)。為什么要學習JQueryJs中一個簡單的功能需要大量的代碼Js中兼容的問題很多JS中代碼的容錯性很差Js中window.onload也只能有一個。問題比較多，總之學習JQ之后你會感到自己從升到了,而且企業(yè)里都用這玩意好處jQuery的特點？WriteLess,Do More很好的解決了不同瀏覽器的兼容問題（IE6.0+,FF2+,Safari3.0+,Opera9.0+,Chrome）

4、css還是有問題的對于不同控件具有統(tǒng)一的操作方式。體積小（幾十KB）、使用簡單方便（WriteLessDoMore）鏈式編程$("#div1").draggble().show().hide().fly() 隱式迭代、插件豐富、開源、。插件多缺什么找什么讓編寫JavaScript程序更簡單、更強大！學習js是打造裝備,每天想著封裝兼容,學習jquery:屬性不夠裝備湊,蛋不疼，腰不酸，上樓都有勁了John Resig著有Pro JavaScript Techniques（即精通JavaScript）Secrets of the JavaScript Ninja即JavaSc

5、ript忍者的John Resig has never made a carousel plugin.when he goes to the carnival, ALL the rides support jQuery.John Resig can kill you with two lines of code. Sure,he couldwith one, but the force of theexplosion would cause the universe to collapseinto a giant black hole.bZ8iXGq5zhqE1mpr3HLLEIuiBiLRs

6、AV4dvHaMWD64LvRuEa$(function () $("#btn").click(function () $("#dv").css("width":"300px","height":"200px","backgroundColor":"red");););Jquery重點內(nèi)容重點:Jquery使用和Jquery的選擇器第一個難點:Jquery對象和DOM對象互轉(zhuǎn)基礎(chǔ)目標:Jquery基本使用Jquery的常用選擇器案例jQ

7、uery中的頂級對象$jQuery中最常用的對象即$對象，要想使用jQuery的方法必 須通過$對象。只有將普通的Dom對象封裝成jQuery對象， 然后才能調(diào)用jQuery中的各種方法。$是jQuery簡寫，在代碼中可以使用jQuery代替$，但一般 為了方便大家都直接使用$。寫注釋，后續(xù)jQuery代碼會越寫越多，所以必要的注釋一 定要寫。編寫簡單的jQuery代碼Window.onload只能寫一次,重復會被后面的干掉頁面所有的載后才觸發(fā),圖片,外部引入加$(document).ready()DOM基本加載后就觸發(fā)可以寫多個$(document).ready()和$(function)一

8、樣jQuery中引入文件注意問題<script src="jquery-1.12.2.js"></script>先引入文件,然后再使用開發(fā)的時候引入正常的jquery文件和壓縮版的文件都沒有問題,建議:開發(fā)用普通版上線用壓縮版為什么Jquery對象和DOM對象要DOM對象轉(zhuǎn)Jquery對象互操作轉(zhuǎn)方便,畢竟Jquery中方法都是封裝好了的,而且兼容問題解決的很好,代碼少,方便.Jquery對象轉(zhuǎn)DOM對象,因為Jquery中文件一直在更新，很多 東西都是隨著使用而進行封裝和升級,不太可能把所有dom中用到的進行封裝,還有很多未知的兼容問題沒有封裝進去

9、,所以, 有的時候jquery中不能解決的問題,還需要原生的js代碼來解決, 所以,jquery對象有的時候需要轉(zhuǎn)成dom對象來進行操作Jquery對象和DOM對象互轉(zhuǎn)如何將dom對象轉(zhuǎn)成jquery對象,加$就可以了如何將jquery對象轉(zhuǎn)dom對象$(“#btn“)0和$(“#btn“).get(0)都可以轉(zhuǎn)dom對象，$(dom對象)即可轉(zhuǎn)jquery對象網(wǎng)頁開關(guān)燈,鄙視DOM的寫法JQuery選擇器(重點)選擇器:就是為了獲取元素的,CSS中設(shè)置元素的樣式可以通過選擇器(c1-c3都用) JQuery中通過選擇器來獲取元素進行操作DOM中獲取元素的方式:document.getElem

10、entById(); document.getElementByTagName(); document.getElementByClassName();代碼多,長,麻煩,JQ中可以更簡單，更方便常用的JQ選擇器,id選擇器,選擇器,類選擇器$(“#btn”),$(“div”),$(“.cls”)$(“*”)所有的案例1.點擊按鈕,設(shè)置層中的顯示內(nèi)容為:這是一個層,同時設(shè)置這個層的背景顏色(id選擇器)2.點擊按鈕,設(shè)置多個p器)中顯示內(nèi)容為:我們都是p(選擇3.點擊按鈕,設(shè)置頁面上應用cls類樣式的元素的背景顏色(類選擇器)+類選擇器加類選擇器$(li.cls)案例:點擊按鈕設(shè)置頁面上應用cl

11、s類樣式li景顏色的背多條件選擇器多條件選擇器$(span,li,div)案例:點擊按鈕,設(shè)置頁面中的span簽的背景顏色,div標,li幾個常見的方法.html()方法,設(shè)置innerHTML.text()方法,設(shè)置innerText.val()方法.設(shè)置input中間顯示其他及內(nèi)容,類似于中間顯示的文本內(nèi)容,類似于中value的值,類似于value.css()方法,.設(shè)置元素的樣式,類似于style注意:()中寫字符串,一個參數(shù),就是要設(shè)置的值,什么也不寫,返 回的是這個屬性的值.css()寫的是鍵值對層級選擇器層次選擇器:后代選擇器(子元素中元素,子,仔仔,孫)$(“#dv li”)或者

12、$(“ul li”)或者$(“.cls li”)子代選擇器(直接的所有子元素,兒子)$(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)案例:球隊高亮顯示案例:點擊按鈕修改層中所有的的背景顏色層級選擇器獲取當前元素的相鄰元素:$(“div + span”)獲取當前元素后面所有元素$(“div span”)/這個元素后緊跟著的第一個元素$('div+span').css('backgroundColor',/這個元素后跟著的所有元素$('divspan').css('backgroundCo

13、lor','red');'red');案例:下拉菜單案例:隔行變色常見的選擇器,(可以理解成是過濾器):even偶數(shù) 選擇器:odd奇數(shù)選擇器索引選擇器eq(3)獲取索引的元素 gt(3)索引大于3的所有元素lt(3)索引小于3的所有的元素案例:淘寶精品展示案例:突出顯示圖片.find()查找元素$(".wrap li").mouseover(function () $(this).css("opacity",1).siblings("li").css("opacity",0

14、.5););$(".wrap").mouseout(function () $(this).find("li").css("opacity",1););案例:手風琴$("#box ul > li").mouseover(function () $(this).css("width","800px").siblings("li").css("width","100px"););$("#box ul&qu

15、ot;).mouseout(function () $("li").css("width","240px"););$('#u1 li ul li').hide();$('#u1 li').click(function () $('ul li', $(this).show(500);$('ul li', $(this).siblings('li').hide(500););$(".groupTitle").click(function (

16、)$(this).next("div").show();$(this).parent("li").siblings("li").children("div");Jquery操作樣式獲取屬性的值,寫一個參數(shù)即可Jquery操作類樣式案例:實現(xiàn)開關(guān)燈addClass();參數(shù):類樣式名字，添加樣式的同時不會干掉原有的樣式removeClass();不寫參數(shù)移除所有的類樣式removeClass(“cls“);移除指定的一個類樣式一行代碼實現(xiàn)開關(guān)燈 $("body").toggleClass(&quo

17、t;cls"); 案例:tab鍵切換內(nèi)容css和類樣式對比設(shè)置的樣式如果很多那么直接使用類樣式的方式進行操作為了方便維護也最好使用類樣式進行操作簡單的操作直接使用css的方式鏈式編程:好處大大地!多行代碼合并成一行代碼,前提要認清此行代碼返回 的是不是對象.是對象才能進行鏈式編程.html(val).text(val).css()鏈式編程，隱式迭代。鏈式編程注意：$(div).html(設(shè)置值).val(設(shè)置值);這樣可以，但是$(div).html().text()這樣是不對的，因為獲取值時返回的是獲取的字符串而不是對象本身所以不能鏈式編程。【通過開發(fā)工具調(diào)試方法。】$('

18、p').text('我們都是p').css('border', '1px solid red').click(function () alert($(this).text(););獲得兄弟元素的幾個方法next(); /當前元nextAll();/當前元prev();/當前元后的緊鄰著的第一個兄弟元素（下一個）后的所有兄弟元素前的緊鄰著的兄弟元素（上一個）prevAll();/當前元前的所有兄弟元素siblings();/當前元素的所有兄弟元素案例：頁面上有一個ul球隊列表當鼠標移動到某個li上的時候改行背景顏色變紅， 當點擊某個li的時

19、候，讓該li之前的所有l(wèi)i背景色變黃，之后的所有l(wèi)i背景色變藍。自己不變色。注意：nextAll()、prevAll()等方法返回值是一個元素集合，這里鏈式編程時要想清楚當前返回的值是什么。jQuery動畫hide()方法:show()方法:參數(shù):可以是一個number類型,也可以是字符串類型隱藏動畫案例$("#btn1").click(function () $("div>img:last-child").hide(1000,function () /使用arguments.callee所以我們不需要指定函數(shù)$(this).prev().hide

20、(1000,arguments.callee);););$("#btn2").click(function () $("div>img:first-child").show(1000,function () /使用arguments.callee所以我們不需要指定函數(shù)$(this).next().show(1000,arguments.callee);););其他動畫方法 $(“div”).fadeTo(1000,0.3);/一個參數(shù),常用 /參數(shù)1:沒有時間,參數(shù)2:到達/和css("opacity",0.1);$("

21、;div").fadeTo(0,0.1);/一個參數(shù)動畫方法:animate方法$("#im").animate("left":"10px","top":"500px","width": "50px", "height": "50px",2000,function () $("#im").animate("left":"+=505px","

22、;top":"-=400px","width":"+=200px","height":"+=200px",1000););第一個參數(shù):鍵值對,(數(shù)值的屬性可以改,顏色不能改) 第二個參數(shù):動畫的時間第三個參數(shù):回調(diào)函數(shù)停止動畫效果:stop()方法,解決下拉框案例中的bugjQuery中創(chuàng)建元素及追加元素DOM中可以動態(tài)創(chuàng)建元素:document.createElement(“的名字”);jQuery中同樣可以創(chuàng)建元素進行使用,并且返回的就是jQuery對象,可以直接調(diào)用方法appen

23、d方法用來在元素的末尾追加元素（最后一個子節(jié)點）。增加元素末尾(兒 子)prepend，在元素的開始添加元素（第一個子節(jié)點）。增加元素開始(兒子)after，在元before：在元后添加元素（添加兄弟）增加元素后面(兄弟)前添加元素（添加兄弟）增加元素前面(兄弟).append方法可以把頁面中的元素添加到其他中,添加的方式屬于移動案例:權(quán)限選擇.html方法.html方法設(shè)置內(nèi)容,返回的是當前的對象,如果不傳入?yún)?shù),獲取的是的內(nèi)容.text方法同上創(chuàng)建元素的方式:.html方法可以創(chuàng)建元素中”)可以創(chuàng)建元素$(“html案例:點擊按鈕動態(tài)創(chuàng)建表格兩種做法都可以案例:清空層中的內(nèi)容和移除層clo

24、ne方法,克隆內(nèi)容$("#btn").click(function () var cloneUl=$("#dv1").children().clone(); cloneUl.css("fontSize","50px");$("#dv2").append(cloneUl););設(shè)置和獲取表單的value:文本框,radio,select,textarea(文本input域),checkbox.常見的表單都可以通過val方法獲取和設(shè)置value值案例:添加課程案例:設(shè)置和獲取系統(tǒng)屬性值或者自定義屬性

25、attr()方法:可以設(shè)置屬性值,兩個參數(shù):1.屬性名字,2,屬性值attr()方法:可以獲取屬性值,一個參數(shù):1.屬性名字案例:全選和反選案例案例:設(shè)置復選框選中:(attr設(shè)置checkbox的選中有問題)propprop用法和attr一樣var checked = $("#cbx").attr("checked")console.log(checked);var checked = $("#cbx").prop("checked"if (!checked) /沒選中if(checked = undefined

26、)console.log("沒選中");$("#cbx").attr("checked", else console.log("已經(jīng)選中");$("#cbx").attr("checked",$("#cbx").prop("checked",true);true);/選中else$("#cbx").prop("checked",false);false);$("#j_cbAll"

27、;).click(function () var checked=$(this).prop("checked");if(checked)$("#j_tb").find(":checkbox").prop("checked",true);else$("#j_tb").find(":checkbox").prop("checked",false););$("#j_tb").find(":checkbox").click(

28、function () /查找這里所有的的checkbox的個數(shù)var checkboxLength=$("#j_tb").find(":checkbox").length;/查找選中的checkbox的個數(shù)var checkboxChecked=$("#j_tb").find(":checked").length;if(checkboxLength=checkboxChecked)$("#j_cbAll").prop("checked",true);else$("

29、#j_cbAll").prop("checked",false););設(shè)置和獲取元素的寬和高通過.css()方法寫一個屬性可以獲取寬或者高,是字符串類型如果獲取后重新設(shè)置需要轉(zhuǎn)換,麻煩獲取的時候直接就是數(shù)字類型位置操作Offset()方法返回的是對象,并且,對象中有一個left和一個top,并且值是數(shù)字類型設(shè)置的時候也可以沒有px設(shè)置的時候元素在設(shè)置前如果沒有脫離文檔流,設(shè)置的時候會自動進行脫離文檔流,默認為relative如果設(shè)置前有脫離文檔流,那么設(shè)置的時候直接改變位置注意:如果層和層中的(p)同時,并且,p距離左上角50px.通過按鈕設(shè)置層距離左上角100p

30、x,那么p此時距離左上角為150pxscrollLeft()和scrollTop用法和之前的offset()方法類似獲取的是數(shù)字設(shè)置可以在括號中添加值即可案例:固定導航欄$(function)文檔加載后執(zhí)行所以有可能獲取不到圖片高度解決:$(window).load();一種在style中設(shè)置樣式綁定/同一個元素綁定多個麻煩$("#btn").click(function () alert("被點了"););$("#btn").mouseover(function () $(this).css("backgroundColo

31、r","red"););$("#btn").bind("click",function () alert("被點了"););綁定:.bind方法$("#btn").bind("click":function () alert("哎呀媽呀");,"mouseover":function () 方便:簡單,多個一次綁定參數(shù):鍵值對(右),空格隔開(下)var i=0;/多個處理的問題相同還可以這么玩$(this).css(&quo

32、t;backgroundColor","red");,"mouseout":function () $(this).css("backgroundColor",""););$("#btn").bind("mouseover() i+;console.log(i););mouseout",functionbind方法可以為動態(tài)創(chuàng)建元素綁定,但是不怎么用delegate()方法為父級元素綁定,子元素來觸發(fā).綁定ondelegate()方法內(nèi)部也是調(diào)用的on方法來綁定的開

33、發(fā)中也是使用on的方式綁定解決動態(tài)創(chuàng)建表格添加元素綁定bug從此以后綁定用這個會更好,更完美,更好玩，很現(xiàn)代的方式節(jié)約內(nèi)存，效率高，時間少解綁.off()方法可以解綁推薦:用什么方式綁定就要用對應的解綁解除綁定多個解綁加空格解綁$("div").on("click",function () alert("層被點了"););$("div").on("click","p",function () alert("p被點了"););$("#btn2").on("click",function () /解綁/自身綁定的的時候div和p同時解綁(所有的)以及動態(tài)綁定的都會解綁$("div").off("click"););解除綁定:自身的綁定和動態(tài)綁定的都會被解綁全部解綁固定的寫法,解除p的綁定,自身div的被解綁觸發(fā)觸發(fā)第:觸發(fā)某個的時候在該內(nèi)部調(diào)用了其他元素的某個方法式:直接調(diào)用元素的方法:第二種方式:使用.trigger()方法,扳機第三種方式:使用.triggerHan