jQuery中選擇器小問(wèn)題(新人難免遇到)

更新時(shí)間：2014年03月31日 15:24:05 投稿：whsnow

寫(xiě)用戶注冊(cè)驗(yàn)證時(shí)遇到的jQuery選擇器問(wèn)題，下面做下記錄，有遇到類似情況的朋友可以參考下

今天照著jQuery手冊(cè)學(xué)習(xí)，了解了選擇器的使用，準(zhǔn)備試試寫(xiě)個(gè)用戶注冊(cè)驗(yàn)證，沒(méi)想到還沒(méi)開(kāi)始一個(gè)很小的問(wèn)題把我難住了！

新人難免遇到很小的細(xì)節(jié)問(wèn)題，在此文僅供自勉：

測(cè)試部分代碼如下：

復(fù)制代碼代碼如下:

<script type="text/javascript" src="jquery.1.11.0.min.js"></script>
<script type="text/javascript">

function checkUser(){ //檢查用戶名的函數(shù)
alert("OK"); //測(cè)試。。。
}

$(document).ready(function(){

$(":text :first").blur(function (){ //當(dāng)失去焦點(diǎn)觸發(fā)的事情

/**此處就是我折騰好久的地方。當(dāng)然我想獲得的是用戶注冊(cè)元素，所以我用

* 如上選擇器，結(jié)果根本不行！檢查代碼，發(fā)現(xiàn)根本就沒(méi)有錯(cuò)誤！那問(wèn)題出在哪？

*選擇器的使用有問(wèn)題？我換用 #id 選擇器，果然OK!但是理論上如上這種選擇器肯定是沒(méi)問(wèn)題的！

*我又用 $(":input :text") ,錯(cuò)誤！ $(":input :eq(0)"); 錯(cuò)誤！ 妹的！問(wèn)題到底在哪？

*此刻，把:text與:first中的一個(gè)空格不小心刪掉，一運(yùn)行，跑起來(lái)了！果斷再試用剛那

*幾個(gè)選擇器，全OK！經(jīng)過(guò)多次測(cè)試，得出如下經(jīng)驗(yàn)：

*使用內(nèi)部包含關(guān)系的組合選擇器時(shí)，它們之間不能加空格！$(":text :first)" 錯(cuò)誤！$(":text:first)

**/ 正確！當(dāng)使用層次關(guān)系的組合選擇器時(shí)，他們之間要有空格
checkUser();

});

</script>

</head>
<body>

<form>
<fieldset>
<legend>注冊(cè)頁(yè)面</legend>
用戶名<input type="text"> <br>
密碼<input type="password"><span> <br>
驗(yàn)證密碼<input type="password"> <br>
email<input type="text" ><span> <br>
<input type="submit" value="注冊(cè)">
</fieldset>
</form>

</body>
</html>

相關(guān)文章

jQuery實(shí)現(xiàn)定位滾動(dòng)條位置
基于jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置以此來(lái)定位滾動(dòng)條位置，下面是小編給大家?guī)?lái)的實(shí)現(xiàn)代碼，代碼比較簡(jiǎn)單，需要的朋友可以參考下
2016-08-08
jquery實(shí)現(xiàn)html頁(yè)面 div 假分頁(yè)有原理有代碼
大概原理就是填充后div的總高度（1000px）顯示高度（100px）則頁(yè)面總數(shù)為10頁(yè) 。當(dāng)查看第二頁(yè)時(shí)，顯示的div高度為100 - 200之間，以此類推
2014-09-09
jQuery1.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架
這篇文章主要介紹了jQuery1.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架的相關(guān)資料,需要的朋友可以參考下
2015-12-12
從零開(kāi)始學(xué)習(xí)jQuery (一) 開(kāi)天辟地入門(mén)篇
本篇文章是入門(mén)第一篇, 主要是簡(jiǎn)單介紹jQuery, 通過(guò)簡(jiǎn)單示例指導(dǎo)大家如何編寫(xiě)jQuery代碼以及搭建開(kāi)發(fā)環(huán)境. 詳細(xì)講解了如何在Visual Studio中配合使用jQuery.
2010-10-10
jQuery div拖拽用法實(shí)例
這篇文章主要介紹了jQuery div拖拽用法,以完整實(shí)例形式分析了jQuery結(jié)合UI插件實(shí)現(xiàn)拖拽功能的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
$.format,jquery.format 使用說(shuō)明
$.format,jquery.format 使用說(shuō)明，需要的朋友可以參考下。
2011-07-07
jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
今天這篇文章向大家分享15款精心挑選的優(yōu)秀 jQuery 文本特效插件，都帶有詳細(xì)的使用教程。jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫(huà)以及Ajax交互，幫助 Web 開(kāi)發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果
2012-08-08
淺析jQuery Mobile的初始化事件
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當(dāng)前人氣最高的JavaScript庫(kù),需要的朋友可以參考下
2015-12-12
深入學(xué)習(xí)jQuery中的data()
大家應(yīng)該都會(huì)有這樣一種感覺(jué)，data函數(shù)在jQuery中看起來(lái)很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無(wú)比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來(lái)詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。
2016-12-12