Zi 字媒體
2017-07-25T20:27:27+00:00
1.JQuery簡介。jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上發布第一個版本。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前10000個訪問最高的網站中，有59%使用了jQuery，是目前最受歡迎的JavaScript庫。簡單來說就是一款免費且開放源代碼的JavaScript代碼庫，類似的JavaScript代碼庫還有比如：jQuery、dojo、prototype、ExtJS。2.JQuery特點。動態特效AJAX通過插件來擴展方便的工具 - 例如瀏覽器版本判斷漸進增強鏈式調用多瀏覽器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了對Internet Explorer6,7,8的支持）。3.JQuery中的選擇器在JQuery中，獲得頁面中元素的方式就稱做選擇器。基本層級簡單內容可見性屬性子元素表單表單對象屬性3.1.基本#id ：通過id屬性值獲取元素Element ：通過元素名獲取元素selector1,selector2 ：獲取列表中指定的所有元素.class ：獲取使用class樣式的所有元素3.2簡單first ：匹配第一個元素last ：匹配最後一個元素even ：匹配索引為偶數的元素odd ：匹配索引為奇數的元素eq(index) ：匹配索引為指定值的元素gt(index) ：匹配索引大於指定值的元素lt(index) ：匹配索引小於指定值的元素 not(selector) ：匹配除了指定選擇器之外的所有元素3.3層級ancetor descendant：匹配祖先元素下的後代元素parent > child ：匹配父元素下的子元素prev + next ：匹配上一個元素的後面的元素，必須是挨著的prev~siblings ：匹配前一個元素的所有平輩元素，在prev元素後面才能匹配3.4內容 :contains(text)：匹配內容中包含指定內容的元素:empty ：匹配內容為空的元素:has(selector)：匹配內容中包含指定選擇器的元素:parent：匹配內容不為空的元素3.5可見性 hidden：匹配隱藏的元素visible：匹配顯示的元素3.6屬性 [attribute]：匹配具有指定屬性的元素[attribute=value]：匹配屬性值等於指定值的元素[attribute!=value]：匹配屬性值不等於指定值的元素[attribute^=value]：匹配屬性值以指定值的開始的元素[attribute$=value]：匹配屬性值以指定值的結束的元素[attribute*=value]：匹配屬性值中包含指定值的元素[selector1][selector2][selectorN]：同時滿足所有條件，則匹配3.7子元素 :nth-child(index/even/odd)：匹配指定索引的元素，從1算起:first-child：匹配第一個子元素:last-child：匹配最後一個元素:only-child：如果子元素是父元素的唯一元素，則匹配3.8表單 :input：匹配所有表單元素:text：匹配文本框:password：匹配密碼框:radio：匹配單選按鈕:checkbox：匹配複選框:submit：匹配提交按鈕:reset：匹配重置按鈕:image：匹配圖像按鈕:button：匹配按鈕:file：匹配文件框:hidden：匹配隱藏域對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實能找到工作的朋友，我還是要推薦下我自己建的前端學習群：477149581，首先你要是前端黨，其次不管你是小白還是大牛，我都挺歡迎，小白嘛，主動點多問問題也就學好了，群里每天分享乾貨，包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料，送給大家，歡迎初學和進階中的小夥伴。3.9表單對象屬性 :enabled：匹配狀態可用的表單元素:disabled：匹配狀態不可用的表單元素:checked：匹配被選中的元素 單選或複選:selected：匹配被選中的元素 匹配的是option 4.0 JQuery對象與dom對象 4.1什麼是dom對象以上方式獲取回來的是dom對象，dom對象可以調用dom屬性和相關方法，dom對象不能調用JQuery方法。4.2什麼是JQuery對象以上方式獲取回來的是JQuery對象，其實，jQuery對象本身就是一個數組，選擇器匹配回來幾個數組元素，jQuery對象（數組）長度就是元素個數。每個jQuery對象下的某個元素都是一個dom對象。4.3dom對象與JQuery對象的相互轉換1)JQuery對象轉dom對象語法: JQuery[0]或JQuery.get(0)2)dom對象轉JQuery對象語法: $(dom)5、屬性操作5.1基本屬性attr(name)：獲取指定屬性的值attr(key,value)：獲取指定屬性的值attr(properties)：一次設置多個屬性的值，要求參數必須是json對象attr(key,fn)：通過一個函數的返回值設置指定屬性的值removeAttr(name)：刪除指定的屬性5.2cssaddClass(class)：添加樣式removeClass(class)：移除樣式toggleClass(class)：切換樣式hasClass(class)：判斷是否使用了摸個樣式，返回true:有，false:沒有5.3html/文本/值htmlhtml(val)texttext(val)valval(val)6、css操作 6.1 基本csscss(name)：獲取指定樣式的值css(name,value)：設置指定樣式的值css(properties)：一次設置多個樣式的值，要求參數的json對象6.2 位置offset：獲取元素的位置，返回json對象，包含left和top屬性offset(coordinates) ：設置元素的位置，要求參數json對象，必須包含left和top6.3尺寸 width：獲取寬度width(value)：設置寬度height：獲取高度height(value)：設置高度7、事件編程 7.1頁面載入js中window.onload=function{ //頁面初始化}JQuery中封裝了方法用於頁面載入$(document).ready(function{ //頁面初始化});7.2基本事件change(fn)：內容改變click(fn)：點擊dblclick(fn)：雙擊focus(fn)：獲取焦點keydown(fn)：鍵盤按下keyup(fn)：鍵盤抬起keypress(fn)：鍵盤點擊load(fn)：頁面載入unload(fn)：頁面關閉mousedown(fn)：滑鼠按下mouseup(fn)：滑鼠抬起mousemove(fn)：滑鼠移動mouseover(fn)：滑鼠經過mouseout(fn)：滑鼠離開resize(fn)：改變尺寸scroll(fn)：滾動條滾動select(fn)：選擇內容submit(fn)：提交按鈕6.3事件切換hover(over,out)#over：滑鼠經過時執行的事件處理程序#out：滑鼠離開時執行的事件處理程序toggle(fn,fn)#當滑鼠點擊時的事件綁定#第一次點擊時觸發第一個事件處理程序#第二次點擊時觸發第二個事件處理程序7.4事件處理bind(type,[data],fn)#綁定事件type：事件名[data]：事件發生時傳遞的參數fn：事件處理程序bind({type:fn,type:fn})one(type,[data],fn)綁定事件，只觸發一次type：事件名[data]：事件發生時傳遞的參數fn：事件處理程序unbind([type])7.5事件冒泡什麼是事件冒泡，之所以稱之為冒泡，是因為事件會按照dom層次結構向水泡一樣上升至最頂端<body><div></div></body>取消事件冒泡function display(event){7.6默認行為有些html元素會有自己的行為，如：點擊按鈕時提交表單<form>阻止默認行為function display(event){
寫了
5860316篇文章，獲得
23313次喜歡