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