- 填写注册信息
- 2. 邮箱验证
- 3. 完成注册
您所提供的资料不会做其他用途，敬请安心填写。
JS与CSS交互&表单验证
目录
一.基本概念
1.基本介绍
2.JavaScript 特效之四大家族
1.基本组成
（1）三大系列：offset、scroll、client
（2）事件对象：event
（3）三大家族区别
二.表单验证
1.表单验证思路
一.基本概念
1.基本介绍
CSS样式设置有三种方式：行内样式、内部样式和外部样式
JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。
行内样式：通过element.style.attr（元素.style.属性）即可获取可设置
非行内样式：
因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏 览器的如谷歌火狐等。
基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']
基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]
2.JavaScript 特效之四大家族
1.基本组成
（1）三大系列：offset、scroll、client
①offset：偏移量,使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
②client ：我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
③scroll ：我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等
- ScrollWidth 和 scrollHeight（不包括border）
- 检测盒子的宽高。（调用者：节点元素。属性。）
- 盒子内容的宽高。（如果有内容超出了，显示内容的高度）
- IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
- scrollTop 和 scrollLeft
- 网页，被浏览器遮挡的头部和左边部分。
- 被卷去的头部和左边部分。
- 有兼容性问题
- 未声明 DTD 时（谷歌只认识他）
- document.body.scrollTop
- 已经声明DTD 时（IE678只认识他）
- document.documentElement.scrollTop
- 火狐/谷歌/ie9+以上支持的
- window.pageYOffset
- var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
- var top = document.documentElement.scrollTop + document.body.scrollTop;
（2）事件对象：event
- 在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
- 所有浏览器都支持event对象，但支持的方式不同。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
- （类似Date）普通浏览器支持 event（带参，任意参数）ie 678 支持 window.event（无参，内置）
- 总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
- 兼容获取方式
- 不写参数直接使用event;
- 写参数，但是参数为event
- var event = event || window.event;(主要用这种)
- screenX、pageX 和 clientX 的区别
- pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
- pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
- clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
- pageY 和 pageX 的兼容写法
- 在页面的位置 = 看得见的 + 看不见的
- pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
- 在页面的位置 = 看得见的 + 看不见的
（3）三大家族区别
①Width 和 height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）
②top 和 left
offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/.....(window)
作用：浏览器无法显示的部分（被卷去的部分）
clientY/clientX:（clientTop/clientLeft 值的是border）
调用者：event.clientX(event)
作用：鼠标距离浏览器可视区域的距离（左、上）
案例：漂浮广告
二.表单验证
1.表单验证思路
- 当输入的表单数据不符合要求时,可以使用以下方法进行提示：
- ①获得表单元素值
- ②使用JavaScript的一些方法对数据进行判断
- ③当表单提交时，触发 onsubmit事件，对获取的数据进行验证
表单验证的处理方式
- string对象提供的方法
- string常见方法
- indexOf(), lastIndexOf() 查找字符位置
- charAt() 按索引返回字符串
- concat() 拼接字符串
- substr() 按长度截取字符串
- slice() 截取字符串
- substring() 截取字符串
- replace() 替换字符串
- toUpperCase(), toLowerCase() 大小写转换
正则表达式【重点掌握】
测试字符串内的模式
替换文本
从字符串中提取字符串定义方式 //字面量方式，其由包含在斜杠之间的模式组成，如下所示： var re = /ab+c/; //构造函数方式，调用RegExp对象的构造函数，如下所示： var re = new RegExp("ab+c"); var regex = /正则规则/; //调用方法判断是否满足要求*部分主要的正则*
- *：任意次（包括0）
- +: 至少出现一次 >=1
- ?: 0或者1次
- -：连字符 [a-z] [0-9]
- .代表任意字符（除了\n）
- \. 表示真正的点
- |:或者
- [abcd] :在abcd里任选一个
- [abcd]{6}：在abcd里任选一个 重复6次
- [abcd]{3,}: 在abcd里任选一个 至少选3次
- [abcd]{3,6}:在abcd里任选一个 选3-6次
- [^abcd]:除了abcd以外的任意字符
- \d:相当于[0-9]阿拉伯数字 \d{6}
- \D:除了0-9以外的字符
- \w:[0-9a-zA-Z _]中间的任意一个
- \W：除了[0-9a-zA-Z _]中间的
- \s:空格
- \S:非空格
案例：表单验证
您所提供的资料不会做其他用途，敬请安心填写。
二级联动的代码
citydata = {
"安徽": [
"合肥",
"芜湖",
"蚌埠",
"淮南",
"马鞍山",
"淮北",
"铜陵",
"安庆",
"黄山",
"阜阳",
"宿州",
"滁州",
"六安",
"宣城",
"池州",
"亳州",
"其他"
],
"北京": [
"北京"
],
"重庆": [
"重庆"
],
"福建": [
"福州",
"厦门",
"莆田",
"三明",
"泉州",
"漳州",
"南平",
"龙岩",
"宁德",
"平潭",
"其他"
],
"甘肃": [
"兰州",
"嘉峪关",
"金昌",
"白银",
"天水",
"酒泉",
"张掖",
"武威",
"定西",
"陇南",
"平凉",
"庆阳",
"临夏回族自治州",
"甘南藏族自治州",
"其他"
],
"广东": [
"广州",
"深圳",
"珠海",
"汕头",
"佛山",
"韶关",
"湛江",
"肇庆",
"江门",
"茂名",
"惠州",
"梅州",
"汕尾",
"河源",
"阳江",
"清远",
"东莞",
"中山",
"潮州",
"揭阳",
"云浮",
"其他"
],
"广西": [
"南宁",
"柳州",
"桂林",
"梧州",
"北海",
"防城港",
"钦州",
"贵港",
"玉林",
"百色",
"贺州",
"河池",
"来宾",
"崇左",
"南宁",
"柳州",
"其他"
],
"贵州": [
"贵阳",
"六盘水",
"遵义",
"安顺",
"毕节",
"铜仁",
"黔西南",
"黔东南",
"黔南",
"其他"
],
"海南": [
"海口",
"三亚",
"三沙",
"儋州",
"其他"
],
"河北": [
"石家庄",
"唐山",
"秦皇岛",
"邯郸",
"邢台",
"保定",
"张家口",
"承德",
"沧州",
"廊坊",
"衡水",
"定州",
"辛集",
"其他"
],
"黑龙江": [
"哈尔滨",
"齐齐哈尔",
"鸡西",
"鹤岗",
"双鸭山",
"大庆",
"伊春",
"佳木斯",
"七台河",
"牡丹江",
"黑河",
"绥化",
"大兴安岭",
"绥芬河",
"抚远",
"其他"
],
"河南": [
"郑州",
"开封",
"洛阳",
"平顶山",
"安阳",
"鹤壁",
"新乡",
"焦作",
"濮阳",
"许昌",
"漯河",
"三门峡",
"南阳",
"商丘",
"周口",
"信阳",
"驻马店",
"济源",
"其他"
],
"湖北": [
"武汉",
"黄石",
"十堰",
"宜昌",
"襄阳",
"鄂州",
"荆门",
"孝感",
"荆州",
"黄冈",
"咸宁",
"随州",
"恩施土家族苗族自治州",
"仙桃",
"潜江",
"天门",
"神农架",
"其他"
],
"湖南": [
"长沙",
"株洲",
"湘潭",
"衡阳",
"邵阳",
"岳阳",
"常德",
"张家界",
"益阳",
"郴州",
"永州",
"怀化",
"娄底",
"湘西土家族苗族自治州",
"其他"
],
"内蒙古": [
"呼和浩特",
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯",
"呼伦贝尔",
"巴彦淖尔",
"乌兰察布盟",
"兴安盟",
"锡林郭勒盟",
"阿拉善盟",
"其他"
],
"江苏": [
"南京",
"无锡",
"徐州",
"常州",
"苏州",
"南通",
"连云港",
"淮安",
"盐城",
"扬州",
"镇江",
"泰州",
"宿迁",
"其他"
],
"江西": [
"南昌",
"九江",
"上饶",
"抚州",
"宜春",
"吉安",
"赣州",
"景德镇",
"萍乡",
"新余",
"鹰潭",
"其他"
],
"吉林": [
"长春",
"吉林",
"四平",
"辽源",
"通化",
"白山",
"白城",
"松原",
"延边朝鲜族自治州",
"吉林省长白山保护开发区",
"梅河口",
"公主岭",
"其他"
],
"辽宁": [
"沈阳",
"大连",
"鞍山",
"抚顺",
"本溪",
"丹东",
"锦州",
"营口",
"阜新",
"辽阳",
"盘锦",
"铁岭",
"朝阳",
"葫芦岛",
"其他"
],
"宁夏": [
"银川",
"石嘴山",
"吴忠",
"固原",
"中卫",
"其他"
],
"青海": [
"西宁",
"海东",
"海北",
"黄南",
"海南",
"果洛",
"玉树",
"海西"
],
"山西": [
"太原",
"大同",
"阳泉",
"长治",
"晋城",
"朔州",
"晋中",
"运城",
"忻州",
"临汾",
"吕梁",
"其他"
],
"山东": [
"济南",
"青岛",
"淄博",
"枣庄",
"东营",
"烟台",
"潍坊",
"济宁",
"泰安",
"威海",
"日照",
"莱芜",
"临沂",
"德州",
"聊城",
"滨州",
"菏泽",
"其他"
],
"上海": [
"上海"
],
"四川": [
"成都",
"绵阳",
"自贡",
"攀枝花",
"泸州",
"德阳",
"广元",
"遂宁",
"内江",
"乐山",
"资阳",
"宜宾",
"南充",
"达州",
"雅安",
"阿坝",
"甘孜",
"凉山",
"眉山",
"广安",
"巴中",
"其他"
],
"天津": [
"天津"
],
"西藏": [
"拉萨",
"昌都",
"山南",
"日喀则",
"那曲",
"阿里",
"林芝",
"其他"
],
"新疆": [
"乌鲁木齐",
"克拉玛依",
"吐鲁番",
"哈密",
"阿克苏",
"喀什",
"和田",
"昌吉",
"博尔塔拉",
"巴音郭楞",
"克孜勒苏",
"伊犁",
"其他"
],
"云南": [
"昆明",
"曲靖",
"玉溪",
"昭通",
"保山",
"丽江",
"普洱",
"临沧",
"德宏",
"怒江",
"迪庆",
"大理",
"楚雄",
"红河",
"文山",
"西双版纳",
"其他"
],
"浙江": [
"杭州",
"宁波",
"温州",
"嘉兴",
"湖州",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
"其他"
],
"陕西": [
"西安",
"宝鸡",
"铜川",
"咸阳",
"渭南",
"延安",
"汉中",
"榆林",
"安康",
"商洛",
"杨凌示范区",
"其他"
]
}