| 照例先来一个总结，自己动手多做一些网页，关于布局定位就会很好的理解和掌握，这一点我的体会蛮大的。但是目前还没有想到好的方式来记录这个布局定位的问题，等以后心血来潮了说不定就会写一篇了。那我现在记录的就是关于这周遇到的瞄点平缓滑动和表单验证的问题，也是关于js和jq的问题吧，把遇到的js和jq的问题记录下来应该会在这方面有所进步吧。但是呢，表单验证的我也只是学到了一点点皮毛，以后有机会会再次整理一下关于表单验证的问题的。 |
一：锚点滑动
关于锚点问题，利用<a>标签的href属性很好就可以实现，但却是直接的跳转，会有点突兀的感觉，那么，就用jq的animate来实现平缓滑动吧。一个简单的例子用来理解。
<a href="#one" class="point">跳转</a>
<div style="height=300px"></div>
<div id="one">
<h2>平滑到我这里</h2>
</div>$(function(){
$('.point').click(function(){
$('html,body').animate({scrollTop:($($(this).attr('href')).offset().top -20+"px")},500);
});
})jQ的animate()方法：$('selector').animate({styles},speed,easing,callback)
styles可以包括多种，这里用到的是scrollTop()方法，设置或返回被选元素的垂直滚动条位置，其语法为scrollTop(position)。
要跳转的位置是$(this).attr('href')，问题又来了，attr是什么鬼，attr()是css中的函数，它是返回选择元素的属性值，括号里的内容是HTML的属性名。
offset()方法是设置或返回被选元素相对于文档的偏移坐标，可以实现更好的跳转效果。偏移坐标中带有两个属性对象（top和left），也可以使用函数设置偏移坐标：.offset(function(index,currentoffset))，index-返回集合中元素的index位置,currentoffset - 返回被选元素的当前坐标。
speed可以用毫秒、“slow”、“fast”，来定义时间。
easing规定速度，可以用“swing”、“linear”表示，swing是在开头结尾移动慢，中间移动快，linear是匀速移动的。
callback是animate函数执行完之后要执行的函数。
其中spped,easing,callback都是可选的，不是必须的。
二：表单验证
做的是一个验证不能为空值和对长度的控制的表单，也是一个简单的例子说明一下。
<div class="from-group">
<label>联系电话：</label>
<input class="form-control" placeholder="联系电话" onblur="nickNumBlur()" id="phone"></input>
<div id="phoneId"></div>
</div>function $(elementId){
return document.getElementById(elementId);
}
function nickNumBlur(){
var phone = $("phone");
var phoneId = $("phoneId");
if(phone.value == ""){
phoneId.innerHTML = "联系电话不能为空，请输入电话号码";
return false;
}
if(phone.value.length > 11){
phoneId.innerHTML = "请正确输入联系电话";
return false;
}
phoneId.innerHTML = "";
return true;
}千万千万要注意的一点是，在js代码中，一定要加window.onload=function(){}，否则的话是没有效果的，当然，还有一个办法就是利用jQ，添加一句function $(elemenId){return document.getElementById(elementId);}这样也可以运行的。
onblur事件指对象在失去焦点时发生函数。
下面的<div class = "phoneId"></div>就是要提示的内容，可以自己为其设置样式。
js代码其实也比较好理解了，主要是一个控制条件，值得注意的一点是return:false和return:true是万万不能丢的！