jQuery事件详解之$(document).ready()
在页面加载结束后，浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload 方法;在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。
那么它和window.onload有何不同呢？
window.onload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。
而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用，此时对于jQuery来说都是可以被访问的（关联的资源可能并没有被加载完毕）。
举个例子来说，在$(document).ready()中定义了图片的宽高，但由于此时图片还没有被加载完毕，此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。
load()方法会在元素的onload事件中绑定一个处理函数，如果该处理函数绑定给window对象，则会在所有资源加载完毕后触发，如果load绑定在元素上则会在该元素加载完毕后触发。
既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢？
window.onload事件 每次只能保存对一个函数的引用 ，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要window.onload方法就导致编码复杂。
使用$(document).ready()方法能够很好地解决这种问题，每次调用$document.ready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。
绛旓細jquery 涓 $('div','li')琛ㄧず鐨勬槸$(瀛愶紝鐖)锛屽嵆浠庣埗鑺傜偣閲屽鎵惧瓙鑺傜偣锛屾槸閫夋嫨li鏍囩閲岄潰鎵鏈塪iv鏍囩锛岃屼笉鏄壘li鏍囩澶栭潰鐨刣iv鏍囩銆('div','li') 鍜 $('div , li') 鍜 $('div li') 鍖哄埆 1銆$('div','li')鏄$(瀛愶紝鐖)锛屾槸浠庣埗鑺傜偣閲屾壘瀛愶紝鑰屼笉鏄壘li澶栭潰鐨刣iv銆2銆$('...
绛旓細鍦jquery涓,鎴戜滑鍙互寰堟柟渚跨殑閫氳繃$(鈥.red鈥)杩欑鏂瑰紡鎸夌収绫昏幏鍙栬妭鐐广備絾鏄湪鍘熺敓鐨刯avascript涓,鏈塯etElementById(鎸夌収id灞炴ц幏鍙栧厓绱)銆乬etElementsByTagName(鎸夌収鏍囩鍚嶈幏鍙栧厓绱)绛夋柟娉,浣嗘槸骞舵病鏈夌被閫夋嫨鍣ㄧ浉鍏虫柟娉曘傚洜姝,缂栧啓鍘熺敓js瀹炵幇绫婚夋嫨鍣ㄧ殑鏂规硶闈炲父鍏抽敭銆 浜屻佺被閫夋嫨鍣ㄧ殑瀹炵幇閫氳繃鍒╃敤鍘熺敓js缂栧啓绫婚夋嫨鍣,...
绛旓細鍙傛暟 typeString浜嬩欢绫诲瀷 data (鍙)Object浣滀负event.data灞炴у间紶閫掔粰浜嬩欢瀵硅薄鐨勯澶栨暟鎹璞 fnFunction缁戝畾鍒版瘡涓尮閰嶅厓绱犵殑浜嬩欢涓婇潰鐨勫鐞嗗嚱鏁 绀轰緥 鎻忚堪:褰撴墍鏈夋钀借绗竴娆＄偣鍑荤殑鏃跺欙紝鏄剧ず鎵鏈夊叾鏂囨湰銆jQuery 浠ｇ爜:("p").one("click", function(){ alert( $(this).text() );});...
绛旓細[,data])//data鏄绉婚櫎鐨勫嚱鏁 ('#btn').unbind("click");//绉婚櫎click ('#btn').unbind();//绉婚櫎鎵鏈 瀵逛簬鍙渶瑕佽Е鍙戜竴娆＄殑锛岄殢鍚庡氨瑕佺珛鍗宠В闄ょ粦瀹氱殑鎯呭喌锛岀敤one()澶嶅埗浠ｇ爜 浠ｇ爜濡備笅:('#btn').one("click",function(){...});瑙﹀彂鎿嶄綔 trigger()鏂规硶瑙﹀彂琚夊厓绱犵殑鎸囧畾浜嬩欢绫诲瀷銆傚鍒朵唬...
绛旓細杩欎袱绉嶆柟寮忚繕鍙互鑱斿悎璧锋潵娣峰悎浣跨敤銆傛垜浠潵璇曠潃鍦ㄦ垜浠殑test.html浠ｇ爜涓夋嫨骞朵慨鏀圭涓涓猳rdered list.涓寮濮嬶紝鎴戜滑闇瑕侀夋嫨杩欎釜list鏈韩锛岃繖涓猯ist鏈変竴涓狪D鍙渙rderedlist鈥濓紝閫氬父鐨刯avascript鍐欐硶鏄痙ocument.getElementById("orderedlist").鍦jQuery涓紝浠ｇ爜濡備笅锛$(document).ready(function() { $("#...
绛旓細jQuery鏄竴涓揩閫熴佺畝娲佺殑JavaScript妗嗘灦锛屾槸缁rototype涔嬪悗鍙堜竴涓紭绉鐨凧avaScript浠ｇ爜搴擄紙鎴朖avaScript妗嗘灦锛夈俲Query璁捐鐨勫畻鏃ㄦ槸鈥渨rite Less锛Do More鈥濓紝鍗冲″鍐欐洿灏戠殑浠ｇ爜锛屽仛鏇村鐨勪簨鎯呫傚畠灏佽JavaScript甯哥敤鐨勫姛鑳戒唬鐮侊紝鎻愪緵涓绉嶇畝渚跨殑JavaScript璁捐妯″紡锛屼紭鍖朒TML鏂囨。鎿嶄綔銆浜嬩欢澶勭悊銆佸姩鐢昏璁″拰Ajax...
绛旓細;} 涓夈佷綔鐢ㄤ笉鍚 ("#")鏄寚閫夋嫨鍣ㄩ夋嫨甯︽湁id鐨勫厓绱狅紝渚嬪灏卞彲浠ョ敤$("#test")鏉ユ偓鐫杩欎釜div鍏冪礌锛岄噷闈㈡湁鍔犲彿鐨勬儏鍐典竴鑸槸鏈夊彉閲忥紝鍦ㄥ嚱鏁板皝瑁呮椂甯哥敤锛屼緥濡傦細function test(slid){ ("#"+slid).show();} 杩欓噷锛嬪彧鏄竴涓繛鎺ョ殑浣滅敤锛屾诲緱鏉ヨ灏辨槸jquery鐨閫夋嫨鍣ㄣ
绛旓細'灏煎悍'),:contains('濂ユ灄宸存柉')").addClass("promoted");杩欐牱鍐欐槸瀵圭殑锛屾墍浠ュ彲浠ユ纭樉绀恒("ul li:contains(鈥樹匠鑳解),:contains('灏煎悍'),:contains('濂ユ灄宸存柉')").addClass("promoted");杩欐牱鍐欒偗瀹氭槸涓嶆垚鐨勶紝鎵句笉鍒扮瓫閫夌殑鍏冪礌锛屼篃璁稿惂锛屽弽姝ｆ垜鏄繖涔堢悊瑙ｇ殑銆傚弬鑰冭祫鏂欙細閿嬪埄鐨jquery ...
绛旓細杩欓噷鈥滐紜鈥濆彧鏄竴涓繛鎺ョ殑浣滅敤锛屾诲緱鏉ヨ灏辨槸jquery鐨閫夋嫨鍣紝娌℃湁鍖哄埆鐨勮娉 jQuery璁捐鐨勫畻鏃ㄦ槸鈥渨rite Less锛Do More鈥濓紝鍗冲″鍐欐洿灏戠殑浠ｇ爜锛屽仛鏇村鐨勪簨鎯呫傚畠鏄竴涓揩閫熴佺畝娲佺殑JavaScript妗嗘灦锛屾槸Prototype涔嬪悗鍙堜竴涓紭绉鐨凧avaScript浠ｇ爜搴擄紙鎴朖avaScript妗嗘灦锛夈侸S鎿嶄綔鏍峰紡鐨勬柟娉曞彧鑳借幏鍙栧唴鑱旀牱寮忥紝...
绛旓細鏈功浠ラ氫織鏄撴噦鐨勬柟寮忎粙缁嶄簡jquery鐨鍩烘湰姒傚康锛屼富瑕佸寘鎷琷query鐨勯夋嫨绗︺浜嬩欢銆佺壒鏁堛乨om鎿嶄綔銆乤jax銆佽〃鏍兼搷浣溿佽〃鍗曞嚱鏁般佹嫋鏇充笌鏃嬭浆鍜屾彃浠剁瓑鍐呭锛屾渶鍚庡嚑绔犱互瀹炰緥鎿嶄綔涓轰富锛屽湪鍓嶉潰鍐呭鐨勫熀纭涓婏紝鎻愬嚭浜嗗父瑙佺殑瀹㈡埛绔疄闄呴棶棰樺苟缁欏嚭浜嗗叾瑙ｅ喅鏂规銆傛湰涔︽槸涓鏈敞閲嶇悊璁轰笌瀹炶返缁撳悎鐨勫熀纭鏁欑▼锛岄傚悎web寮鍙戜汉鍛...
