jQuery就业课程之表单选择器系列
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()
正则：
- / 账号最少4位 /^([\u4e00-\u9fa5]|\w|[@!#%&*])+
总结：
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>腾讯云开发者
