邂逅jQuery
jQuery是一個流行的JavaScript庫,提供了HTML操作,CSS操作,事件,動畫,Ajax和常用插件,極大地簡化了JavaScript的開發.
可以從jquery.com下載jQuery庫, 包含壓縮版本和開發者版本.
在HTML文件中添加script標簽來使用jQuery:<script src="jquery-1.10.2.min.js"></script>
如果不想下載并保存jQuery可以使用內容分發網絡(CDN)來獲得jQuery:
baidu:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
sina: <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
google:<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
ms: <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
使用CDN獲得jQuery可以利用其緩存加快速度.
HTML
選擇器
jQuery選擇器用于選擇HTML元素,所有選擇器均以$開頭.
元素選擇器用于根據元素名(TagName)來選擇元素:
$('p'); //選擇所有<p>元素id選擇器用于根據id選擇元素:
$('#p1'); //選擇id='p1'的元素class選擇器根據class選擇元素:
$('.p'); //選擇class='p'的元素特殊選擇器:
$(document) 選擇文檔節點
$('*') 選擇所有節點
上述基本選擇器與DOM接口的三個常用的getElement方法類似.
選擇器還有更強大的表達能力:
選擇class='intro'的<p>元素:
$("p.intro");選擇帶有href屬性的元素:
$('[href]')選擇href='url'的<a>元素:
$('a[href='url']')選擇href!='url'的<a>元素:
$('a[href!='url']')選擇第一個<p>元素:
$('p:first')選擇<ul>元素中第一個<li>元素:
$('ul li:first')元素訪問與操作
html()
html用于訪問和修改節點的HTML內容,擁有3種調用方式:
html()以String返回節點的HTML內容
html(htmlString)設置節點的HTML內容
html(function(index,html){})使用回調函數替換HTML內容
當選擇器選擇了多個元素時,html()只會處理其中第一個元素.
<!DOCTYPE html> <html><body><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><p id="p1">Hello World!</p><script type="text/javascript">p = $('#p1');alert(p.html());p.html('Hello World from jQuery!');</script></body></html>alert:
Hello World!HTML:
<p id="p1">Hello World from jQuery!</p>回調函數接受兩個參數index和html,index代表當前節點在父節點子樹中的索引從0開始, html代表當前節點的html內容, 參數返回值作為當前節點新的HTML內容進行更新.
<!DOCTYPE html> <html><body><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><div><p id="p1">Hello World!</p></div><script type="text/javascript">p = $('#p1');f = function(index, html) {return 'paragraph ' + (index+1) + ': '+ html + '<br>By jQuery';};p.html(f);</script></body></html>HTML:
<p id="p1">paragraph 1: Hello World!<br>by jQuery</p>text()
text()的三種調用與html()相同, 不同之處在于text()去除了子樹中的HTML元素只返回文本內容.
當選擇了多個元素時text()會將它們的文本內容合并為一個字符串.
使用text()更新文本內容時,此方法會將HTML標簽進行轉義, <被替換為<,>被替換為>.
我們將上述示例改用text()實現:
<!DOCTYPE html> <html><body><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><div><p id="p1">Hello World!</p><p id="p2">Hello jQuery</p></div><script type="text/javascript">p = $('p');alert(p.text())f = function(index, html) {return 'paragraph ' + (index+1) + ': '+ html + '<br>by jQuery';};p.text(f);</script></body></html>alert:
Hello World!Hello jQuery!HTML:
<p id="p1">paragraph 1: Hello World!<br>by jQuery</p> <p id="p2">paragraph 2: Hello jQuery<br>by jQuery</p>val()
val()用于訪問或操作表單的輸入,擁有與html()類似的三種調用.
對于text,password, hidden, select型的輸入框, val()可以訪問或操作其輸入的值:
<!DOCTYPE html> <html><body><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><form><label>username: <input id="username" type="text"/></label><br><br><label>password:<input id="password" type="password"/></label><button id="btn">Click Me!</button></form><script type="text/javascript">input = $('#username').val('finley')$('#btn').click(function() {alert($('#username').val())});</script></body></html>attr()
attr()同樣擁有3種調用調用,與html()不同的是它的第一個參數為指定屬性名的字符串:
<!DOCTYPE html> <html><body><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><a id="a1" href="http://www.baidu.com">www.baidu.com</a><br><a id="a2" href="http://www.cnblogs.com">www.cnblogs.com</a><script type="text/javascript">alert($('#a1').attr("href"));$('#a1').attr("href", "https://www.google.com.hk")$('#a2').attr("href", function(index, html) {return html + "/Finley/";});</script></body></html>jQuery學習筆記
添加/刪除元素
jQuery提供了4個常用的添加HTML節點的方法:
append(): 在被選元素的結尾插入內容
prepend() 在被選元素的開頭插入內容
after() 在被選元素之后插入內容
before() 在被選元素之前插入內容
插入的內容可以是HTML源碼,jQuery或DOM創建的元素:
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body><div><p>Hello World!</p><button id="append">Append</button></div><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#append").click(function(){// using HTMLvar txt1="<p>something</p>";// using jQueryvar txt2=$("<p></p>").text("very");// using DOM var txt3=document.createElement("p");txt3.innerHTML="exciting";$("body").append(txt1,txt2,txt3);}); // using jQueryvar txt2=$("<p></p>").text("very");// using DOM var txt3=document.createElement("p");txt3.innerHTML="exciting";$("body").append(txt1,txt2,txt3);});});</script> </body> </html>});</script> </body> </html>remove和empty方法是jQuery提供的刪除元素的方法.
刪除節點及其子樹:
$(selector).remove()清空節點的子樹:
$(selector).empty();事件
jQuery提供了基于回調機制的事件,上文的這個示例展示了如何為按鈕點擊事件編寫響應:
<!DOCTYPE html>
jQuery提供了常用的DOM事件:
鼠標事件
單擊click()
雙擊dbclick()
移入mouseenter
移出mouseleave
鍵盤事件: 按鍵過程中依次觸發
按下keydown()
已按下keypress()
松開keyup()
表單事件
提交submit()
改變change()
獲得焦點focus()
文檔窗口事件
文檔就緒$(document).ready()
大小改變resize()
文本被選中select()
為了避免在文檔加載完成前調用jQuery造成錯誤(比如試圖獲得未加載圖片的大小), 通常將所有腳本寫入$(document).ready()的回調函數.
Animation
封裝效果
jQuery封裝了常用動畫效果:
隱藏hide()
顯示show()
隱藏/顯示切換toggle()
淡入fadeIn()
淡出fadeOut()
淡入/淡出切換fadeToggle()
漸變fadeTo(percent)
上滑slideUp()
下滑slideDown()
上滑/下滑切換slideToggle()
示例:
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body><div><p>Hello World!</p><button id="hide">Hide</button><button id="show">Show</button><button id="toggle">Toggle</button><br><hr><button id="fadein">Fade In</button><button id="fadeout">Fade Out</button><button id="fadetoggle">Fade Toggle</button><br><hr><button id="slideup">Slide Up</button><button id="slidedown">Slide Down</button><button id="slidetoggle">Slide Toggle</button></div><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});$("#toggle").click(function(){$("p").toggle();});$("#fadein").click(function(){$("p").fadeIn();});$("#fadeout").click(function(){$("p").fadeOut();});$("#fadetoggle").click(function(){$("p").fadeToggle();});$("#slideup").click(function(){$("p").slideUp();});$("#slidedown").click(function(){$("p").slideDown();});$("#slidetoggle").click(function(){$("p").slideToggle();});});</script> </body> </html>animate
jquery提供的animate方法可以定義更復雜的動畫效果:
$(selector).animate({params},speed,callback);speed參數指定動畫速度,取值包括預定義值"slow","fast"或以毫秒為單位的持續時間, 為可選參數.
callback是動畫結束時回調的函數,為可選參數.
params參數是包含動畫參數的Object:
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body><div><p id="p1">Hello World!</p><button id="animate">animate</button></div><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#animate").click(function(){$("#p1").animate({left:'250px',opacity:'0.5',height:'+=10px',fontSize: '+=1em'});});});</script> </body> </html>params參數可以對除了顏色參數之外幾乎所有CSS參數進行操作.
left:'250px'設定left屬性動畫結束時最終值為250px
height:'+=10px'設定height屬性動畫結束時比當前增加10px
Js的命名規則不支持CSS中font-size這樣的標識符,需要將其改為駝峰命名fontSize.
若連續調用多次animate()方法,上一個動畫完成后才會開始下一個動畫,形成動畫隊列.
stop()方法可以停止動畫的執行,包括animate和封裝動畫.
$(selector).stop(stopAll,goToEnd);stopAll參數為true時停止動畫隊列中所有動畫執行,為false時僅停止當前動畫, 默認為false.
goToEnd參數為true時立即完成當前動畫,為false時維持動畫中斷時的狀態, 默認為false.
Utilities
JSON是js定義的一種輕量數據交換格式, jQuery.parseJSON(jsonStr);可以將json字符串轉換為js對象.
jQuery沒有集成json編碼工具,可以使用jQuery json插件完成編碼功能$.toJSON(obj).
使用該插件請在html中導入<script src="dist/jquery.json.min.js"></script>
jQuery插件包括校驗器,自動補全,控件和動畫效果等, 更多插件請參見plugins.jquery.com
轉載于:https://www.cnblogs.com/Finley/p/5709042.html
總結
- 上一篇： mysql创建新用户并分配数据库权限
- 下一篇： Codeforces#363 Div2