jQuery就业课程之表单选择器系列
表單選擇器
重要，不難
求同存異，利用之前的知識，遷移過來。判斷的是表單的類型，注意，判斷的是表單元素的類型，類型，類型。
名稱 說明 解釋
$(:input) 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素: $(":input")
$(:text) 匹配所有的文本框 查找所有文本框: $(":text")
$(:password) 匹配所有密碼框 查找所有密碼框: $(":password")
$(:radio） 匹配所有單選按鈕 查找所有單選按鈕
$(:checkbox) 匹配所有復選框 查找所有復選框: $(":checkbox")
$(:submit) 匹配所有提交按鈕 查找所有提交按鈕: $(":submit")
$(:image) 匹配所有圖像域 匹配所有圖像域: $(":image")
$(:reset) 匹配所有重置按鈕 查找所有重置按鈕: $(":reset")
$(:button) 匹配所有按鈕 查找所有按鈕: $(":button")
$(:file) 匹配所有文件域 查找所有文件域: $(":file")
表單屬性過濾器
語法 描述 示例
:enabled 匹配所有可用元素 $(" #userform :enabled" )匹配form內部除編號輸入框外的所有元素
:disabled 匹配所有不可用元素 $(" #userform :disabled" )匹配編號輸入框
:checked 匹配所有被選中元素（復選框、單項按鈕、select 中的option） $(" #userform :checked" )匹配“性別”中的“男”選項和“愛好”中的“編程”選項
:selected 匹配所有選中的option 元素,單一的下拉框 $(" #userform :selected" ) 匹配“家鄉”中的“北京”選項
2.6 屬性操作
jquery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
- html屬性操作：是對html文檔中的屬性進行讀取，設置和移除操作。比如attr()、removeAttr()
- DOM屬性操作：對DOM元素的屬性進行讀取，設置和移除操作。比如prop()、removeProp()
- 類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()
- 值操作：是對DOM屬性value進行讀取和設置操作。比如html()、text()、val()
正則：
- /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/ 賬號最少4位 /^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; 密碼 /^(13|15|18)\d{9}$/; 手機號 /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; 郵箱
總結：
1.選擇器重點講了好幾個，今天是表單選擇器；
2.掌握如何針對某個選擇器進行操作，規律:三個字總結:找 事 匿
3.jQuery鏈式操作
2.6 作業
使用jQuery+正則表達式，對表單注冊進行簡單的驗證。需要大家去復習正則表達式的使用 。
復習代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.8.3.min.js"></script><script>$(function(){//blur:焦點離開事件$("#user").blur(function(){//alert('aaaa');//定義正則表達式reg =new RegExp("正則")let reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;let user=$("#user").val();//正則.test(變量名)//console.log(reg.test(user));if(reg.test(user)){ $(this).next().html("√").css("color","green");}else{//如果是false,不符合規則;$(this).next().html("賬戶不符合規則,最少4位，以a-z|A-z,數字").css("color","red");}});})</script></head><body><form>賬戶：<input type="text" name="user" id="user" /><span></span><br/>密碼：<input type="password" name="pwd" id="pwd" /><br/><button type="button">注冊</button></form></body> </html>總結
以上是生活随笔為你收集整理的jQuery就业课程之表单选择器系列的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux篇：CenterOS6和Cen
- 下一篇： Docker数据卷(Volume)