Jquery是一種快速,小巧,功能豐富的JavaScript庫,可以讓html文檔遍歷和操作,事件處理,動畫和ajax更加容易使用的一種api,可以在多種瀏覽器中工作。 封裝了JavaScript常用的功能代碼,提供了一種簡便的JavaScript設計模式,優(yōu)化了HTML文檔操作,事件處理,動畫設計和ajax交互。 簡單來說Jquery是一個JavaScript庫,簡化了JavaScript的編程,很容易學習。 事件,ready(fn) 當dom載入就緒就可以查詢及操縱時綁定的一個要執(zhí)行的函數(shù),這是事件模塊中最重要的一個函數(shù),因為它可以提高web應用程序的響應速度。1復制代碼類型:[javascript] Jquery代碼: $().ready(function(){ });123復制代碼類型:[javascript] // 導包,引入JQ的文件<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>/*文檔加載完成的事件*/jQuery(document).ready(function(){ alert("jQuery(document).ready(function()"); });// 最簡單的寫法$(function(){ alert("$(function(){"); });12345678910復制代碼類型:[javascript] js和jq對象之間的轉(zhuǎn)換 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script> <script> function changeJS(){ var div = document.getElementById("div1");// div.innerHTML = "JS" $(div).html("轉(zhuǎn)成JQ對象") } $(function(){ $("#btn2").click(function(){ //div1// $("#div1").html("JQ"); //將JQ對象轉(zhuǎn)成JS對象來調(diào)用 var $div = $("#div1");// var jsDiv = $div.get(0); var jsDiv = $div[0]; jsDiv.innerHTML="jq轉(zhuǎn)成JS對象成功"; }); }); </script> </head> <body> <input type="button" value="JS" onclick="changeJS()" /> <input type="button" value="JQ" id="btn2" /> <div id="div1"> 這里的內(nèi)容 </div> <div id="div1"> 這里的內(nèi)容 </div> </body></html>123456789101112131415161718192021222324252627282930313233343536373839復制代碼類型:[javascript] 事件 click([[data],fn])1復制代碼類型:[javascript] 觸發(fā)每一個匹配的click事件,這個函數(shù)會調(diào)用執(zhí)行綁定到click事件的所有函數(shù)。 fn,在每個匹配元素的click世界中綁定的處理函數(shù) [data],fn12復制代碼類型:[javascript] $("p").click();// 所有段落點擊隱藏$("p").click( function(){ $(this).hide(); });12345復制代碼類型:[javascript] 效果: show([speed,[easing],[fn]]) [speed,[easing],[fn]] speed,[easing],[fn] speed,[easing],[fn]: speed三種預定速度之一的字符串("slow","normal",or"fase")或表示動畫時長的毫秒數(shù)值,fn: 在動畫完成執(zhí)行的函數(shù),每個元素執(zhí)行一次// 顯示段落html代碼: <p style="display: none">hello</p> jquery代碼 $("p").show()1234567891011復制代碼類型:[javascript] Jquery庫可以通過一行簡單的代碼添加到網(wǎng)頁中,庫包含html元素選取和操作,css操作,html事件函數(shù),JavaScript特效和動畫,htmldom遍歷和修改,ajax,utilities。 網(wǎng)頁中添加Jquery庫 <head><script type="text/javascript" src="jquery.js"></script></head>1234復制代碼類型:[javascript] 簡單案例: <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });</script></head><body><p>dashucoding.</p><button type="button">Click me</button></body></html>123456789101112131415161718復制代碼類型:[javascript] // Google<head><script type="text/javascript" src="http://ajax./ajax/libs /jquery/1.4.0/jquery.min.js"></script></head>// Microsoft<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script></head>12345678910復制代碼類型:[javascript] Jquery語法: jQuery hide() 函數(shù) $(this).hide()隱藏當前的 HTML 元素 $(selector).action() $(this).hide() - 隱藏當前元素12345復制代碼類型:[javascript] Jquery函數(shù) // 為了防止文檔完全加載就緒之前運行的代碼$(document).ready(function(){ }); |
|
來自: 碼農(nóng)9527 > 《WEB》