与jQuery的感情碰撞——由浅入深学jQuery
? ??原來的時候自己看過jQuery，但是對于什么是jQuery，除了知道jQuery是一種javascript類庫外，除了會用幾個網頁特效外，其他的我這真的是不知道啊。眼看自己就要找工作了，所以自己需要好好學習一下，系統的了解一下。學習了一天，下面把我學習到的精華寫給大家，如果有什么錯誤，希望大家給予指正。
? ?我們學習jQuery之前，必須好好的學習javascript，如果不會javascript的話，jQuery還是不會學的很好的。
一、下面先了解什么是javascript。javascript需要學習什么，
? ? JavaScript是一種通用的腳本編程語言，也是一種基于對象(object)和事件驅動(event Driven)并具有安全性能的腳本語言，JavaScript代碼嵌套在HTML頁面中，它把靜態頁面變成支持用于交互并相應事件的活頁面。現在很難找到一個不包含JavaScript代碼的商業站點頁面，在其它類型的站點頁面中，也可能找到JavaScript代碼。
? ?可是我們怎么快速學習的javascript腳本語言啊，真正的IT編程人員不需要了解很深的javascript，這是一個根本所在，我在這里只是點名學習javascript需要學習的內容，不詳細描述。學習javascript就是學習一種語言，但是我們都知道語言現在都是基本相同的，只是看我們對API怎么操作而已。
（1）首先將javascript中的基本概念弄懂弄通。如變量\數組等.
（2）學習一下javascript的對象，擴展，封裝。
（3）瀏覽器DOM編程，只要將基本概念弄懂了，再學這個就不太難了，因為瀏覽器DOM就是各種對象的集合。
剩下的時間就是自己的努力了，只要你好好學習，多加練習，把javascript搞懂的話，你將一定是個高手。
二、認識jQuery
對于新手想知道是jQuery，其實jQuery就是javascript的庫文件的，她幫助我們做了很多麻煩的東西，只要javascript學好了，jQuery一天就能夠學會。
jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
?
三、有步驟的學習jQuery
1、學習jQuery的選擇器，什么是選擇器，我們需要了解，在javascript中，我們如果想要獲取html中標簽的值，我們就會用到DOM中的一些東西，例如
document.getElementById("標簽ID").value;
但是在jQuery中我們只是用到了一個符號就可以完成這么長的單詞拼寫。
$("#標簽ID").val();
好好的比較一下是不是下面的很簡單啊，好了，廢話不說了，切入正題，選擇器我們需要學習的是css選擇器（標簽選擇器，ID選擇器，類選擇器，群組選擇器，后代選擇器，通配選擇器）
由于本文主要講解的是jQuery的選擇器，jQuery的選擇器完全繼承了CSS的風格。所以對于CSS選擇器不重復說明
（1）基本選擇器
標簽選擇器，ID選擇器，類選擇器
$("input").css("backgroundColor","Red");//將標簽為input的背景顏色設為紅色
$("#myDiv").css("backgroundColor","Red");//將ID為myDiv的背景顏色設為紅色
$(".myclass").css("backgroundColor","Red");//將類名為myclass的背景顏色設為紅色 ?
但是這里需要說清楚的是ID選擇器>類選擇器>標簽選擇器
<script type="text/javascript">$("#Text1").css(" backgroundColor","Red");$(" .txt").css(" backgroundColor","Green");$(" input").css ("backgroundColor","Black");</script > <input id="Text1" type="text" class="txt" /> <input type="text" class="txt" />
大家如果懂得上面的規則后，就會一定知道兩個標簽的背景顏色
?（2）層次選擇器
例如：
$("body div") .css("backgroundColor","Red");//改變body中所有div標簽的背景色
$("body>div") .css("backgroundColor","Red");//改變body中字div標簽的背景色
$(".one+div") .css("backgroundColor","Red");//改變class為.one的下一個同輩div標簽的背景色
$("#two~div") .css("backgroundColor","Red");//改變id為two的所有同輩div標簽的背景色 ?
（3）基本選擇器
包括(:first，:last, :not(selector), ?:even, ?:odd, ?:eq(selector), ?:gt(selector), ?:lt(selector), ?:header, ?:animated, ?:focus)
例如：
$("div:first") .css("backgroundColor","Red");//改變第一個div標簽的背景色
$("div:not(.one)") .css("backgroundColor","Red");//改變class不為one的div標簽的背景色
$("div:even") .css("backgroundColor","Red");//改變c索引值為偶數的div標簽的背景色
$("div:header") .css("backgroundColor","Red");//改變所有標題元素的的背景色
$("div:focus") .css("backgroundColor","Red");//改變獲得焦點元素的的背景色 ?
（4）內容選擇器
（:contains(text), ?:empty, ?:has(selector), ?:parent）
例如：
$("div:contains(di)").css("backgroundColor","Red");//改變含有文本“di”的div標簽的背景色
$("div:empty").css("backgroundColor","Red");//改變不包含子元素的div標簽的背景色
$("div:parent").css("backgroundColor","Red");//改變包含子元素的div標簽的背景色 ?
（5）可見性選擇器
$("div:visible").css("backgroundColor","Red");//改變所有可見的div標簽的背景色
（6）屬性選擇器
$("body div") .css("backgroundColor","Red");//改變body中所有div標簽的背景色
$("div[title=test]").css("backgroundColor","Red");//改變屬性title值為test的div標簽的背景色
$("div[title*=s]").css("backgroundColor","Red");//改變屬性title值包含s的div標簽的背景色
$("div[title^=s]").css("backgroundColor","Red");//改變屬性title值以s開頭的div標簽的背景色 ?
（7）子元素過濾器
$("div.one :nth-child(2)").css("backgroundColor","Red");//改變每個class為one的<div>的父元素下的第二個子元素的背景色
$("div.one :first-child").css("backgroundColor","Red");//改變每個class為one的<div>的父元素下的第一個子元素的背景色
$("div.one :only-child").css("backgroundColor","Red");//如果class為one的<div>的父元素下只有一個子元素，改變這個子元素的背景色 ?
（8）表單過濾器
$("#form1 input :enabled") .val("123");//改變表單內可用的<input>元素的值
（9）表單選擇器
$("#form1 :input ") .val("23");//改變表單內單行文本框的值
?
2、jQuery中的DOM操作
jQuery的DOM操作是個很重要的東西，包括很多經常用到的東西，
例如：對于節點操作：創建節點（創建元素節點，創建屬性節點，創建文本節點），插入節點（append，after，before，insertBefore），刪除節點（remove，empty，），復制節點，替換節點，包裹節點。
還有屬性操作，樣式操作（獲取設置樣式，追加樣式，刪除樣式，切換樣式等），遍歷節點（children(),next(),prev(),siblings(),）
例如：var $para=$("p");//獲取屬性
var p_text=$para.attr("title");設置屬性
$("p").removeAttr("title");//刪除<p>元素的屬性title
這個地方必須看開發手冊才行，用到哪里就看哪里，這里不詳細介紹
?
3、jQuery的事件和動畫
（1）加載DOM
$(window).load(function(){ ……}) ? 等價于javascript中的 ? ?window.οnlοad=function(){……}
$(document).ready(function(){……}) 等價于 $(function(){……});
(2)事件綁定(移除事件和綁定事件差不多)
例如：
$(function(){$("#panel1 h5.head").bind("click",function(){ //綁定方式if($(this).next().is(":visible")){$(this).next().hide();}else{$(this).next().show();} });
$("#panel1 h5.head").click(function(){ //簡寫方式if($(this).next().is(":visible")){$(this).next().hide();
}else{
$(this).next().show();
}
});
}); <div id="panel1"><h5 class="head">這是什么</h5><div class="content">……………………………………………………<div> </div>
上面內容實現的功能是：當反復點擊“標題”鏈接時，內容會在顯示和隱藏中切換
（3）合成事件
$(function(){$("#panel1 h5.head").hover(function(){ //hover方法$(this).next().hide();},function(){$(this).next().show();} });
$("#panel1 h5.head").toggle(function(){ //toogle方法$(this).next().hide();},function(){$(this).next().show();} });
}); （4）事件冒泡
這里簡要的講一下事件冒泡，事件冒泡是多個嵌套元素響應一個事件時，產生的效果，如果停止事件冒泡采用event.stopPropagation();??等價于 return false;
還有阻止默認行為:event.preventDefault(); ?等價于 return false;
（5）jQuery中的動畫
主要的方法是 show(),hide(),fadIn(),fadeOut(),animate(),toggle(),slideToggle(),fadeTo(),fadeToggle()
其實jQuery的動畫就是對前面知識點的應用，沒有什么新鮮的，這里不多說，上傳一個整體實例供大家參考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><style type="text/css">p,button,label{font-size:12px}img{position:absolute;left:10px;top:500px;}span{color:Red;font-weight:bold;padding:6px;}</style><script src="js/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">var fn = function () {//定義函數并存儲在變量fn中var q = $("img").queue("fx");//獲取附加在圖片上的動畫隊列 $("span").text(q.length);}$(function () {$.fx.off = $("input#off").is(":checked");//根據復選框狀態設置$.fx.off的屬性 $("button#run").click(function () {//對run按鈕綁定click事件 $("img").animate({ left: "+=456", top: "+=35" }, 4000, fn)//創建自定義動畫 .animate({ left: "-=168", top: "-=50" }, 2000, fn).delay(1000).animate({ left: "+=136", top: "-=30" }, 2000, fn).animate({ left: "-=196", top: "-=10" }, 2000, fn)fn();});$("button#add").click(function () {//對add按鈕綁定click處理事件 $("img").queue("fx", function () {//向圖片的動畫隊列中添加兩個動畫 $(this).animate({ height: "+=30", width: "+=50" }, 1500, fn).animate({ height: "-=30", width: "-=55" }, 1500, fn).dequeue();//執行動畫隊列中的下一個函數 });});$("button#stop").click(function () {//對stop按鈕綁定click處理事件 $("img").stop(true, true);//停止圖片正在執行動畫 });$("input#off").click(function () {//對off復選框綁定click事件處理程序if (this.checked) $("img").clearQueue();//若選中了復選框，則清除動畫隊列 $.fx.off = this.checked//根據復選框狀態設置$.fx.off });});</script> </head> <body><p align="center"><button id="run">運行動畫</button><button id="add">添加動畫</button><button id="stop">停止動畫</button><label><input id="off" type="checkbox" />禁止動畫</label></p><p align="center">動畫隊列的長度為<span>0</span></p><img src="images/3.gif" alt=""/> </body> </html>
（6）鍵盤事件操作
其實這里也是沒有什么重點的東西，就是前面知識點的應用，寫個例子，大家看看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>鍵盤事件應用實例</title><style type="text/css">div.container{font-size:12px;font-family:Verdana;height:100px;width:368px;margin:0 auto;text-align:center;overflow:scroll;border:2px solid #999;}span{color:Red;font-weight:bold;margin:6px;}</style><script src="js/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">$(function () {$(document).keydown(function (e) {//對文檔綁定keydown處理程序var code = "<div align='center'>按鍵代碼=<span>" + e.which + "</span></div>";$("div.container").append(code);});$(document).keyup(function (e) {//對文檔綁定keyup處理程序if (e.which == 113)//若按下了<ESC>鍵 $("div.container").html("");//清除container元素內容 });$(document).keypress(function (e) {//對文檔對象綁定keypress處理程序var char = ",字符=<span>" + String.fromCharCode(e.which)+ "</span>";$("div.container>div:last").append(char);});});</script> </head> <body><p align="center">從鍵盤上按下某個鍵，或輸入某個字符（按<b>F2</b>鍵清除內容（好像在IE中可以，其他的瀏覽器好像不行））</p><div class="container"></div> </body> </html>
（7）鼠標事件操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>鼠標事件應用程序</title><style type="text/css">div.demo{height:103px;width:330px;margin:0 auto;padding:6px;border:2px solid #999;overflow:scroll;}p,div{font-size:12px;}#xy{background-color:Yellow;height:120px;width:358px;border:3px inset red; margin:0 auto;text-align:center;line-height:120px;font-family:Georgia;}</style><script src="js/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">function getTime() {//定義函數計算時間var date = new Date();var time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "." + date.getMilliseconds();return time;}$(function () {var button = ["左鍵", "中鍵", "右鍵"];$("div.demo").click(function (e) {//對div綁定click事件處理程序var msg = getTime(e.timeStamp) + ":<b>單擊鼠標</b>" + "</br>";$(this).append(msg).scroll()}).dblclick(function () {//對div綁定dblclick事件處理程序 $(this).html("");}).mousedown(function (e) {//對div綁定mousedown事件處理程序var msg = getTime(e.timeStamp) + ":<b>按下鼠標" + button[e.which - 1] + "</b><br/>";$(this).append(msg).scroll()}).mouseup(function (e) {//對div綁定mouseup事件處理程序var msg = getTime(e.timeStamp) + ":<b>按下鼠標" + button[e.which - 1] + "</b><br/>";$(this).append(msg).scroll()}).scroll(function () {//對div綁定scroll事件處理程序 $(this).scrollTop($("div.demo").find("b").length * 12);}).mouseenter(function (e) {//對div綁定mouseup事件處理程序var msg = getTime(e.timeStamp) + ":<b>觸發"+e.type+"事件</b><br/>";$(this).append(msg).scroll()}).mouseleave(function (e) {//對div綁定mouseup事件處理程序var msg = getTime(e.timeStamp) + ":<b>觸發" + e.type + "事件</b><br/>";$(this).append(msg).scroll()}).mouseover(function (e) {//對div綁定mouseup事件處理程序var msg = getTime(e.timeStamp) + ":<b>觸發" + e.type + "事件</b><br/>";$(this).append(msg).scroll()}).mouseout(function (e) {//對div綁定mouseup事件處理程序var msg = getTime(e.timeStamp) + ":<b>觸發" + e.type + "事件</b><br/>";$(this).append(msg).scroll()})});$(function () {$("#xy").mousemove(function (e) {var msg = "e.pageX=" + e.pageX + ",e.pageY=" + e.pageY;$(this).html(msg);});});</script> </head> <body><p align="center">請用鼠標左鍵或右鍵單擊下面的方框（雙擊清除內容）</p><div class="demo"></div><p align="center">請在下面方框中移動鼠標</p><div id="xy"></div> </body> </html>
4、jQuery與Ajax
這一小結是最重要的，由于前面專門一節講的是Ajax與ASP.Net，在這里不再重復,請訪問：?學習.net與ajax的詳細案例總結
在這里添加一個很重要的知識點，
jQuery中的AJax全局事件
我們是否平時上網的時候主要到這么個細節，當網站還沒有加載完畢時，會顯示 ?“加載中……”的字樣，這是怎么實現的，就是通過AJax全局事件實現的
<div id="loading">加載中……</div>$("#loading").AjaxStart(function(){$(this).show(); });$("#loading").AjaxStop(function(){$(this).hide(); }); //這里也可以使用連式寫法//如果想使某個頁面其他Ajax不受全局Ajax的影響，使用：$.ajax({url："……";global:false; });//在jQuery1.5版本之后，如果Ajax請求不觸發全局方法，可以設置：$.ajaxPrefilter(function(){options.global=true; })
?5、jQuery的插件的使用和寫法
（1）表單驗證插件（Validation）但是默認語言是英語，如果想要其顯示漢語，只需要引入中文信息驗證庫。
（2）jQuery表單插件（Form）,核心方法是ajaxForm(),ajaxSubmit()，能夠很容易將表單升級為Ajax提交方式，這里不細說
（3）模態窗口插件（SimpleModel）
（4）Cookie插件（很好用）
不細說，添加代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script src="js/jquery-1.9.1.js" type="text/javascript"></script><script src="js/jquery.cookie.js" type="text/javascript"></script><script type="text/javascript">$(function () {$("#btnWrite").click(function () {$.cookie("myText", $("#Text1").val());});$("#btnRead").click(function () {$("#Text1").val($.cookie("myText"));});$("#btnDing").click(function () {if ($.cookie("isding") == "true") {alert("不能重復頂");return;}alert("頂");$.cookie("isding", "true", { expires: 1 })//會話Cookie });setInterval(function () {var myNote = $("#myNote").val();$.cookie("myNote", myNote, {expires:7});}, 5000);});</script> </head> <body><input id="Text1" type="text" /><input id="btnWrite" type="button" value="寫入" /><input id="btnRead" type="button"value="讀取" /><input id="btnDing" type="button" value="頂" /><textarea rows="20" height="20" id="myNote"></textarea> </body> </html>
（5）jQuery UI
（6）自定義jQuery插件
jQuery插件機制是提供了兩個用于jQuery擴展的方法，jQuery.ftn.extend(),jQuery.extend().
這里自己可以上網查看資料，不在這里細說。
?
?
jQuery的基本內容就是這些，就看你掌握了多少，就看你會不會用，如果學的比較好的話，可以自己寫一個自定義jQuery插件，還是自己寫的東西適合自己開發用。
?
轉載于:https://www.cnblogs.com/myhappylife/archive/2013/05/20/3088136.html
總結
以上是生活随笔為你收集整理的与jQuery的感情碰撞——由浅入深学jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 励志个性签名大全女生
- 下一篇： CTime类小结1