目录
一.基本概念
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)
作用：鼠标距离浏览器可视区域的距离（左、上）
案例：漂浮广告
<style>
#adv {
position: absolute;
}
.dd_close{
width:35px;
height:18px;
text-align:center;
border:solid 1px #999;
background-color:#E0E0E0;
top:0px;
right:0px;
position:absolute;
}
</style>
<script type="text/javascript">
//漂浮广告
var f1 = true;
var f2 = true;
var timer = null;
function move() {
//首先获取广告这个图片标签
var adv = $("adv");
//设置定时器控制left和top的值
timer = window.setInterval(function() {
//获取到广告的left属性并且将其转成整数
var myleft = parseInt(getStyle(adv, 'left'));
//获取到广告的top属性并且将其转成整数
var mytop = parseInt(getStyle(adv, "top"));
// // 得到可视区的宽度，并且要减去广告本身的宽度，也要去除内外间距
mywidth = myclient().width - adv.offsetWidth;
// // 得到可视区的高度，并且要减去广告本身的高度，也要去除内外间距
myheight = myclient().height - adv.offsetHeight;
// 当定义的f1标签为true时就一直加反之则减
if (f1 == true) {
myleft += 10;
}
//当它一直加到超出了可视宽度时候，就把f1取反，停止加
if (myleft > mywidth) {
f1 = false;
}
if (f1 == false) {
myleft -= 10;
}
if (myleft < 0) {
f1 = true;
}
//当定义的f2标签为true时就一直加反之则减
if (f2 === true) {
mytop += 15;
}
//当它一直加到超出了可视宽度时候，就把f2取反，停止加
if (mytop > myheight) {
f2 = false;
}
if (f2 === false) {
mytop -= 15;
}
if (mytop < 0) {
f2 = true;
}
//重新设置宽度与高度
adv.style.left = myleft + "px";
adv.style.top = mytop + "px";
}, 100)
}
function dd_close1() { //关闭漂浮广告的事件
var myclo = $("dd_close1");
myclo.style.display = "none";
var myclo = $("adv");
myclo.style.display = "none";
}
//漂浮广告结束
window.onload = function() {
move(); //调用方法，让广告漂浮
adv.onmouseover = function() { //移入就停止
window.clearInterval(timer);
}
adv.onmouseout = function() {
move(); //移出就继续漂浮
}
}
</script>
<body>
<div id="adv">
<div class="dd_close" id="dd_close1">
<a href="javascript:dd_close1();">关闭</a>
</div>
<img src="images/dd_scroll.jpg" alt="" srcset="">
</div>
</body>
二.表单验证
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:非空格
案例：表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/register.js"></script>
</head>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function checkRegister() { //条件通过同意跳转
var a = emailBlur(); //邮箱
var b = nickNameBlur(); //昵称
var c = pwdBlur(); //密码
var d = repwdBlur(); //再次确认密码
if (a == true && b == true && c == true && d == true) {
return true;
}
return false;
}
// 邮箱的获焦和失焦事件开始
function emailFocus() { //邮箱获取焦点
var email = $("email");
var emails = $("email_prompt");
emails.innerHTML = "请输入正确的邮箱格式，例如123@qq.com";
email.style.backgroundColor = "yellow";
emails.style.color = "gray";
}
function emailBlur() { //邮箱失去焦点
var email = $("email").value;
var emaill = $("email");
var emails = $("email_prompt");
emails.innerHTML = "";
emaill.style.backgroundColor = "white";
var regex = /12345/;
var regex = /^\w+@\w+\.[a-zA-Z]{2,3}$/;
if (!email) {
emails.innerHTML = "邮箱不能为空!!";
// emails.style.border="1";
emails.style.fontWeight = "bold";
return false;
} else if (!(regex.test(email))) {
emails.innerHTML = "邮箱格式不对请重新输入";
emails.className = "error";
emails.style.color = "red";
emails.style.fontWeight = "bold";
return false;
}
emails.style.color = "green";
emails.style.fontWeight = "bolder";
emails.innerHTML = "√";
return true;
}
// 邮箱的获焦和失焦事件结束
// 昵称的获焦和失焦事件开始
function nickNameFocus() { //昵称获取焦点
var nickNamee = $("nickName");
var nickName = $("nickName_prompt");
nickName.innerHTML = "请输入4-8位的昵称";
nickNamee.style.backgroundColor = "yellow";
nickName.style.color = "gray";
}
function nickNameBlur() {
var nickNamee = $("nickName").value;
var nickNames = $("nickName");
var nickName = $("nickName_prompt");
nickName.innerHTML = "";
nickNames.style.backgroundColor = "white";
var regex = /^\w{4,8}$/;
if (!(regex.test(nickNamee))) {
nickName.innerHTML = "昵称必须在4-8位数";
nickName.style.color = "red";
nickName.style.fontWeight = "bold";
return false;
}
nickName.style.color = "green";
nickName.style.fontWeight = "bolder";
nickName.innerHTML = "√";
return true;
}
// 昵称的获焦和失焦事件结束
// 密码的获焦和失焦事件开始
function pwdFocus() { //密码获取焦点
var pwdd = $("pwd");
var pwd = $("pwd_prompt");
pwd.innerHTML = "请输入6-12位的密码";
pwdd.style.backgroundColor = "yellow";
pwd.style.color = "gray";
}
function pwdBlur() {
var pwd = $("pwd").value;
var pwdd = $("pwd");
var pwds = $("pwd_prompt");
pwds.innerHTML = "";
pwdd.style.backgroundColor = "white";
var regex = /^\w{6,12}$/;
if (!(regex.test(pwd))) {
pwds.innerHTML = "密码必须在6-12位数";
pwds.style.color = "red";
pwds.style.fontWeight = "bold";
return false;
}
pwds.style.color = "green";
pwds.style.fontWeight = "bolder";
pwds.innerHTML = "√";
return true;
}
// 密码的获焦和失焦事件结束
// 确认密码的获焦和失焦事件开始
function repwdFocus() { //密码获取焦点
var repwdd = $("repwd");
var repwd = $("repwd_prompt");
repwd.innerHTML = "请再次输入密码";
repwdd.style.backgroundColor = "yellow";
repwd.style.color = "gray";
}
function repwdBlur() {
var mypwd1 = $("pwd").value; //第一次的密码
var mypwd2 = $("repwd").value; //第二次的密码
var repwdd = $("repwd");
var repwds = $("repwd_prompt");
repwds.innerHTML = "";
repwdd.style.backgroundColor = "white";
var regex = /^\w{6,12}$/;
if (!(mypwd1 == mypwd2)) {
repwds.innerHTML = "两次密码不一样";
repwds.style.color = "red";
repwds.style.fontWeight = "bold";
return false;
}
repwds.style.color = "green";
repwds.style.fontWeight = "bolder";
repwds.innerHTML = "√";
return true;
}
// 确认密码的获焦和失焦事件结束
window.onload = function() {
for (var i in citydata) {
var province = $("province")
// console.log(i);
province.add(new Option(i, i)); //往第一个下拉框（省份）添加内容
}
$("province").onchange = function() { //为第一个下拉框添加改变事件，当省份发生变化，城市也随之而变化
$("city").length = 0;
for (var i in citydata) {
if (i == this.value) {
for (var j in citydata[i]) {
$("city").add(new Option(citydata[i][j], citydata[i][j])); //往第二个下拉框（省份）添加内容
}
}
}
}
}
</script>
<body>
<div id="header">
<div id="register_header">
<div class="register_header_left"><img src="images/logo.gif" alt="logo"></div>
<div class="register_header_right"><a href="主页.html" class="blue">首页</a> | <a href="产品列表.html"
class="blue">商品展示页</a> | <a href="购物车.html" class="blue">购物车</a> | <a href="登录.html"
class="blue">登录</a></div>
</div>
</div>
<div id="main">
<div class="register_content">
<div class="register_top_bg"></div>
<div class="register_mid_bg">
<ul>
<li class="register_mid_left">填写注册信息</li>
<li class="register_mid_mid">2. 邮箱验证</li>
<li class="register_mid_right">3. 完成注册</li>
</ul>
</div>
<div class="register_top_bg_mid">
<div class="register_top_bg_two_left"></div>
<div class="register_top_bg_two_right"></div>
<div class="register_title_bg"><img src="images/register_pic_02.gif"
alt="欢迎注册"><br>您所提供的资料不会做其他用途，敬请安心填写。</div>
</div>
<div class="register_dotted_bg"></div>
<div class="register_message">
<form action="登录.html" method="get" id="myform" onSubmit="return checkRegister()">
<dl class="register_row">
<dt>Email地址：</dt>
<dd><input id="email" type="text" class="register_input" onFocus="emailFocus()"
onBlur="emailBlur()"></dd>
<dd>
<div id="email_prompt"></div>
</dd>
</dl>
<dl class="register_row">
<dt>设置昵称：</dt>
<dd><input id="nickName" type="text" class="register_input" onFocus="nickNameFocus()"
onBlur="nickNameBlur()"></dd>
<dd>
<div id="nickName_prompt"></div>
</dd>
</dl>
<dl class="register_row">
<dt>设定密码：</dt>
<dd><input id="pwd" type="password" class="register_input" onFocus="pwdFocus()"
onBlur="pwdBlur()"></dd>
<dd>
<div id="pwd_prompt"></div>
</dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码：</dt>
<dd><input id="repwd" type="password" class="register_input" onFocus="repwdFocus()"
onBlur="repwdBlur()"></dd>
<dd>
<div id="repwd_prompt"></div>
</dd>
</dl>
<dl class="register_row">
<dt>性别：</dt>
<dd><input name="sex" id="man" type="radio" value="男" checked> <label for="man">男</label>
</dd>
<dd> <input name="sex" id="woman" type="radio" value="女"> <label for="woman">女</label></dd>
</dl>
<dl class="register_row">
<dt>所在地区：</dt>
<dd>
<select id="province" style="width:120px;">
<option>请选择省/城市</option>
</select>
</dd>
<dd><select id="city" style="width:130px;">
<option>请选择城市/地区</option>
</select></dd>
</dl>
<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"
onMouseOver="btn_over()" onMouseOut="btn_out()"></div>
</form>
</div>
</div>
</div>
<!--网站版权部分开始-->
<div id="footer">
<iframe src="底部版权信息.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
二级联动的代码
citydata = {
"安徽": [
"合肥",
"芜湖",
"蚌埠",
"淮南",
"马鞍山",
"淮北",
"铜陵",
"安庆",
"黄山",
"阜阳",
"宿州",
"滁州",
"六安",
"宣城",
"池州",
"亳州",
"其他"
],
"北京": [
"北京"
],
"重庆": [
"重庆"
],
"福建": [
"福州",
"厦门",
"莆田",
"三明",
"泉州",
"漳州",
"南平",
"龙岩",
"宁德",
"平潭",
"其他"
],
"甘肃": [
"兰州",
"嘉峪关",
"金昌",
"白银",
"天水",
"酒泉",
"张掖",
"武威",
"定西",
"陇南",
"平凉",
"庆阳",
"临夏回族自治州",
"甘南藏族自治州",
"其他"
],
"广东": [
"广州",
"深圳",
"珠海",
"汕头",
"佛山",
"韶关",
"湛江",
"肇庆",
"江门",
"茂名",
"惠州",
"梅州",
"汕尾",
"河源",
"阳江",
"清远",
"东莞",
"中山",
"潮州",
"揭阳",
"云浮",
"其他"
],
"广西": [
"南宁",
"柳州",
"桂林",
"梧州",
"北海",
"防城港",
"钦州",
"贵港",
"玉林",
"百色",
"贺州",
"河池",
"来宾",
"崇左",
"南宁",
"柳州",
"其他"
],
"贵州": [
"贵阳",
"六盘水",
"遵义",
"安顺",
"毕节",
"铜仁",
"黔西南",
"黔东南",
"黔南",
"其他"
],
"海南": [
"海口",
"三亚",
"三沙",
"儋州",
"其他"
],
"河北": [
"石家庄",
"唐山",
"秦皇岛",
"邯郸",
"邢台",
"保定",
"张家口",
"承德",
"沧州",
"廊坊",
"衡水",
"定州",
"辛集",
"其他"
],
"黑龙江": [
"哈尔滨",
"齐齐哈尔",
"鸡西",
"鹤岗",
"双鸭山",
"大庆",
"伊春",
"佳木斯",
"七台河",
"牡丹江",
"黑河",
"绥化",
"大兴安岭",
"绥芬河",
"抚远",
"其他"
],
"河南": [
"郑州",
"开封",
"洛阳",
"平顶山",
"安阳",
"鹤壁",
"新乡",
"焦作",
"濮阳",
"许昌",
"漯河",
"三门峡",
"南阳",
"商丘",
"周口",
"信阳",
"驻马店",
"济源",
"其他"
],
"湖北": [
"武汉",
"黄石",
"十堰",
"宜昌",
"襄阳",
"鄂州",
"荆门",
"孝感",
"荆州",
"黄冈",
"咸宁",
"随州",
"恩施土家族苗族自治州",
"仙桃",
"潜江",
"天门",
"神农架",
"其他"
],
"湖南": [
"长沙",
"株洲",
"湘潭",
"衡阳",
"邵阳",
"岳阳",
"常德",
"张家界",
"益阳",
"郴州",
"永州",
"怀化",
"娄底",
"湘西土家族苗族自治州",
"其他"
],
"内蒙古": [
"呼和浩特",
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯",
"呼伦贝尔",
"巴彦淖尔",
"乌兰察布盟",
"兴安盟",
"锡林郭勒盟",
"阿拉善盟",
"其他"
],
"江苏": [
"南京",
"无锡",
"徐州",
"常州",
"苏州",
"南通",
"连云港",
"淮安",
"盐城",
"扬州",
"镇江",
"泰州",
"宿迁",
"其他"
],
"江西": [
"南昌",
"九江",
"上饶",
"抚州",
"宜春",
"吉安",
"赣州",
"景德镇",
"萍乡",
"新余",
"鹰潭",
"其他"
],
"吉林": [
"长春",
"吉林",
"四平",
"辽源",
"通化",
"白山",
"白城",
"松原",
"延边朝鲜族自治州",
"吉林省长白山保护开发区",
"梅河口",
"公主岭",
"其他"
],
"辽宁": [
"沈阳",
"大连",
"鞍山",
"抚顺",
"本溪",
"丹东",
"锦州",
"营口",
"阜新",
"辽阳",
"盘锦",
"铁岭",
"朝阳",
"葫芦岛",
"其他"
],
"宁夏": [
"银川",
"石嘴山",
"吴忠",
"固原",
"中卫",
"其他"
],
"青海": [
"西宁",
"海东",
"海北",
"黄南",
"海南",
"果洛",
"玉树",
"海西"
],
"山西": [
"太原",
"大同",
"阳泉",
"长治",
"晋城",
"朔州",
"晋中",
"运城",
"忻州",
"临汾",
"吕梁",
"其他"
],
"山东": [
"济南",
"青岛",
"淄博",
"枣庄",
"东营",
"烟台",
"潍坊",
"济宁",
"泰安",
"威海",
"日照",
"莱芜",
"临沂",
"德州",
"聊城",
"滨州",
"菏泽",
"其他"
],
"上海": [
"上海"
],
"四川": [
"成都",
"绵阳",
"自贡",
"攀枝花",
"泸州",
"德阳",
"广元",
"遂宁",
"内江",
"乐山",
"资阳",
"宜宾",
"南充",
"达州",
"雅安",
"阿坝",
"甘孜",
"凉山",
"眉山",
"广安",
"巴中",
"其他"
],
"天津": [
"天津"
],
"西藏": [
"拉萨",
"昌都",
"山南",
"日喀则",
"那曲",
"阿里",
"林芝",
"其他"
],
"新疆": [
"乌鲁木齐",
"克拉玛依",
"吐鲁番",
"哈密",
"阿克苏",
"喀什",
"和田",
"昌吉",
"博尔塔拉",
"巴音郭楞",
"克孜勒苏",
"伊犁",
"其他"
],
"云南": [
"昆明",
"曲靖",
"玉溪",
"昭通",
"保山",
"丽江",
"普洱",
"临沧",
"德宏",
"怒江",
"迪庆",
"大理",
"楚雄",
"红河",
"文山",
"西双版纳",
"其他"
],
"浙江": [
"杭州",
"宁波",
"温州",
"嘉兴",
"湖州",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
"其他"
],
"陕西": [
"西安",
"宝鸡",
"铜川",
"咸阳",
"渭南",
"延安",
"汉中",
"榆林",
"安康",
"商洛",
"杨凌示范区",
"其他"
]
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
