HTML5+CSS3+JavaScript Web前端开发案例教程课件：信息登记卡.pptxVIP

信息登记卡

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：信息登记卡核心功能：form表单验证表单信息重置

案例介绍信息登记卡页面效果

案例介绍信息登记卡表单验证效果

02技术准备

技术准备jQuery属性选择器：jQuery选择器继承了CSS和Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性。通过jQuery选择器对网页元素的精准定位，才能完成元素属性和行为的处理。

技术准备jQuery属性选择器就是通过元素的属性作为过滤条件进行筛选对象，属性选择器如下：选择器说明[attribute]匹配包含给定属性的元素[attribute=value]匹配属性值为value的元素[attribute!=value]匹配属性值不等于value的元素[attribute*=value]匹配属性值含有value的元素[attribute^=value]匹配属性值以value开始的元素[attribute$=value]匹配属性值以value结束的元素[selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用

技术准备jQuery属性选择器的示例代码如下：$(div[name])//匹配包含有name属性的div元素$(div[name=test])//匹配name属性是test的div元素$(div[name!=test])//匹配name属性不是test的div元素$(div[name*=test])//匹配name属性值中含有test值的div元素$(div[name^=test])//匹配name属性以test开头的div元素$(div[name$=test])//匹配name属性以test结尾的div元素$(div[id][name^=test])//匹配具有id属性并且name属性以test开头的div元素

技术准备jQuery表单选择器是匹配经常在表单内出现的元素，表单选择器如下：选择器说明:input匹配所有的input元素:button匹配所有的普通按钮，即type=button的input元素:checkbox匹配所有的复选框:file匹配所有的文件域:hidden匹配所有的不可见元素，或者type为hidden的元素:image匹配所有的图像域:password匹配所有的密码域:radio匹配所有的单选按钮:reset匹配所有的重置按钮，即type=reset的input元素:submit匹配所有的提交按钮，即type=submit的input元素:text匹配所有的单行文本框

技术准备jQuery表单选择器的示例代码如下：$(:input)//匹配所有的input元素$(form:input)//匹配form标记中的所有input元素，在form和冒号之间有一个空格$(.button)//匹配所有普通按钮$(:checkbox)//匹配所有的复选框$(:file)//匹配所有的文件域$(:hidden)//匹配所有的隐藏域$(:image)//匹配所有的图像域$(:password)//匹配所有的密码域$(:radio)//匹配所有的单选按钮$(:reset)//匹配所有的重置按钮$(:submit)//匹配所有的提交按钮$(.text)//匹配所有的单行文本框

03案例实现

案例实现文件结构：