jquery選擇不存在的元素如何做到不報錯的
剛好這個月在看jquery源碼,要回答這個問題,當然要從jquery源碼來看了;
在這兒,使用的是jquery2.0.3的版本源碼進行說明;如,我們使用jquery去查找一個頁面不存在的元素$('#test')元素,看下源碼具體走了哪些;在這兒就不一步一步進行源碼分析,只是進行簡單說明;
通過下圖代碼可以看出,調用$('#test')時,會走jquery.fn.init函數;然后我們去看下此函數;
由于函數代碼量過多,就不截圖;簡單說下,此函數會對傳入的“selector”進行分類及各種情況處理;而這兒我們就看是id為test情況;首先它會通過下圖判斷
然后,會通過一個正則“match=rquickExpr.exec(selector);”進行匹配,匹配"#test"結果match如下:
然后會走原生方法document.getElementById方法:
因為頁面本來沒有此元素,所以會直接返回空(null),最后會走下圖代碼,返回最終結果由上圖代碼可知,即使返回結果為空,它也會返回一個jquery對象,里面包含context、selector屬性,還有繼承的jquery全局方法,結果如下圖:所以,如果你即使查找一個沒有的元素,它也會返回一個jquery對象,你也可以直接使用對象中所有的jquery全局方法;
上面只是用id的簡單的方式,如果是類、標簽、css等其他復雜的進行查找時,jquery會根據類型和瀏覽器的版本不同,使用不同的方式進行查找,但最終返回結果都差不多,而且即使沒有,都會返回一個jquery對象;
jquery的所有插件
jquery的插件有:
1、jQuery表單驗證插件:Validation
(1)Validation簡介
????最常使用JavScript的場合就是表單的驗證,而jQuery作為一個優秀的JavaScript庫,也提供了一個優秀的表單驗證插件——Validation.Validation是歷史最悠久的jQuery插件之一,經過了全球范圍內不同項目的驗證,并得到了許多Web開發者的好評。作為一個標準的驗證方法庫,Validation擁有如下優點:
內置驗證規則:擁有必填、數字、E-Mail、URL和信用卡號碼等19類內置驗證規則
自定義驗證規則:可以很方便地自定義驗證規則
簡單強大的驗證信息提示:默認了驗證信息提示,并提供自定義覆蓋默認提示信息的功能
實時驗證:可以通過keyup或blur事件觸發驗證,而不僅僅在表單提交的時候驗證。
2、jQuery表單插件:Form
(1)Form插件簡介
????jQueryForm插件是一個優秀的Ajax表單插件,可以非常容易地、無侵入地升級HTML表單以支持Ajax。jQuery有兩個核心方法——ajaxForm()和ajaxSubmit(),它們集合了從控制表單元素到決定如何管理提交進程的功能。另外iain,插件還包括其他的一些方法:formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等
3、動態綁定事件插件:livequery
(1)livequery插件簡介
????jQuery的事件綁定功能使得jQuery代碼與HTML代碼能夠完全分離,這樣代碼的層次關系更加清晰,維護起來也更加簡單。然而對于動態加載到頁面的HTML元素,每次都需要重新綁定事件到這些元素上,十分不便。一款新的插件由此產生,即livequery,可以利用它給相應的DOM元素注冊時間或者觸發回調函數函數。不僅當前選擇器匹配的元素會被綁定事件,而且后來通過JavaScript添加的元素都會被綁定事件。當元素不再和選擇器匹配時,livequery會自動取消事件注冊,使得開發者不再需要關注HTML元素的來源,只需要關注如何編寫其綁定的事件即可。
????通過jQuery選擇器選擇一個DOM元素,livequery插件會實時地在整個DOM范圍將其持久化。這意味著無論元素是先前存在的還是后來動態加載的,事件都會被綁定,就像是CSS給元素添加樣式一樣。同時,這款插件幾乎在沒占用什么資源的情況下就做到了這些功能。
4、jQueryUI插件
(1)jQueryUI簡介:
???jQueryUI源自于一個jQuery插件——Interface。Interface插件最早版本我1.2,只支持jQuery1.1.2的版本,后來有人對Interface的大部分代表基于jQuery1.2的API進行重構,并統一了API。由于改進重大,因此版本號不是1.3而是直接跳到1.5,并且改名為jQueryUI。
????jQueryUI主要分為3個部分,交互、微件和效果庫
交互。這里都是一些與鼠標交互相關的內容。包括拖動,置放,縮放,選擇和排序等待。微件(Widget)中有部分是基于這些交互組建來制作的。此庫需要一個jQueryUI核心庫——ui.core.js支持
微件。這里主要是一些界面的擴展。里邊包括了手風琴導航,自動完成,取色器,對話框,滑塊,標簽,日歷,放大鏡,進度條和微調控制器等待。此庫需要一個jQueryUI核心庫——ui.core.js支持
效果庫。此庫用于提供豐富的動畫效果,讓動畫不再局限于animate()方法。效果庫有自己的一套核心即effects.core.js,無需jQuery的核心庫ui.core.js支持
5、管理Cookie的插件:Cookie
(1)Cookie插件簡介
????Cookie是網站設計者放置在客戶端的小文本文件。Cookie能為用戶提供很多的便利,例如購物網站存儲用戶曾經瀏覽過的產品列表,或者門戶網站記住用戶喜歡選擇瀏覽哪類新聞。在用戶運行的情況下,還可以存儲用戶的登陸情況,使得用戶在訪問網站時不必每次都鍵入這些信息。
????jQuery提供了一個十分簡單的插件來管理網站的Cookie,該插件的名稱也是Cookie.
6、模態窗口插件:SimpleModal
(1)SimpleModal插件簡介
????SimpleModal是一個輕量級的jQuery插件,它為模態窗口的開發提供了一個強有力的接口,可以把它當作模態窗口的框架。SimpleModal非常的靈活,可以創建你能夠想象到的任何東西i,并且你還不需要考慮UI開發中的跨瀏覽器相關問題。
如何用jquerymobile開發webapp
jQueryMobile是一個基于jquery的html5移動網站框架,用它做出來的網站界面和App風格類似。jQueryMobile文檔,內容不多,耐心看完只需要1個小時,大體分成8大功能點page:最基準單元,包括header,footer,導航欄dialog:對話框,在手機屏幕彈出dialog來交互,我覺得不是很友好transitions:轉場效果form:表單button:大button,小button(放在各種欄上的都是小button),還提供了若干內置標準iconlistview:列表,這是jquerymobile的核心UI,提供了10幾種類型的List,簡單好用event:各種滾動,滑動,拖拽事件Theming:官方提供了5種皮膚,也有工具可以自定義,切換皮膚只需要改動一個classjQueryMobile全面支持ajax,但也可以當做普通html模板在后端渲染數據,我選擇后面一種
jqueryselect怎么設置,有默認的選中值,但是不能選擇
<body><selectid="select_disable"><optionvalue="1">1</option><optionvalue="2">1</option><optionvalue="3">1</option><select></body>
<script>$("#select_disable").attr("disabled","disabled").css("background-color","#EEEEEE");</script>
用jquery的attr方法給select控件添加disabled屬性
由于即使是被禁止選擇了,下拉框還是會顯示白色,這樣可能會讓用戶產生誤解,可以再加上一個灰色的背景色
從哪里開始學習jQuery
按這個順序學習
jQuery教程http://codingdict.com/article/7359
jQuery簡介
jQuery入門
jQuery語法
jQuery選擇器
jQuery事件
jQuery隱藏和顯示
jQuery漸入漸出
jQuery滑動
jQuery動畫
jQuery停止
jQuery回調
jQuery方法鏈
jQuerydom_get
jQuerydom_set
jQuerydom_add
jQuerydom_remove
jQueryCSS類
jQuerycss()方法
jQuery尺寸
jQuery遍歷
jQuery遍歷父元素
jQuery遍歷子元素
jQuery遍歷兄弟元素
jQuery縮小遍歷范圍
jQueryajax簡介
jQueryajax_load
jQueryajax_get_post
jQuerynoConflict()方法
jquery如何獲取checkbox的選中個數
先選擇所有的input
再遍歷篩選出checkbox或者加個統一的class,再按class進行選擇。另外,用jQuery可能會方便一下。