【百度俱乐部】第一二期作业总结

YaHei 10月 30, 2014

呃，要用markdown写文章呢差点忘了……
这期作业写了我八九个小时啊，翻阅了好多资料，干脆写份总结算了。下面就按照我做作业的思路、途中遇到的问题及解决方法展开来写吧——

大致设想

首先，模仿百度主页嘛，找张图片，做个输入框，搞个submit的按钮，简单安上导航栏，右上角意思意思搞个“登陆”、“注册”的鬼玩意。

input text的尺寸调整

text是没有width、height属性的
宽度其实可以通过字段size调整
高度可以通过style属性中的字体高度font-size来调整
另外还有style中的padding，可以调整输入框的内边距，不然输入的时候字压着边框太丑
text和submit之间总存在缝隙
取消缝隙，首先要设置两个元素的margin为0，另外submit默认是有边框的，所以还要设置submit的border为0。但如果将两元素的代码分成两行，则间隙仍不能取消

<input type="text" style="margin:0px">
<input type="submit" style="margin:0px;border:0;background-color:blue">

其实回车也会留下空格的，所以只要把回车去掉，将两个元素挤在一行即可

<input type="text" style="margin:0px"><input type="submit" style="margin:0px;border:0;background-color:blue">

text和submit高低错位

首先考虑用top，bottom属性设置上下留空白解决，但是无论怎么改变值都没有变化
查过资料后知道，设置left,right,top,bottom前需要设置position

position有五种值：
static（默认）：不定位
relative：相对于块
absolute：相对于页面
fixed：相对于视窗
inherit：继承父元素的值

栅格系统

我直接在<body></body>中加入

<div class="container">
    <div class="row">
        <div class="col-md-1">...</div>
        <div class="col-md-offset-1">...</div>
    </div>    
</div>

结果什么都没发生！！！
后来才知道，是忘了<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">……呵……呵……简直逗比~

说道栅格系统，顺便截一段资料过来吧：
【栅格系统 bootstrap】

行列必须包含在.container里

列（.col-xx-xx）必须包含在行（.row）里

	超小屏幕手机（<768px)	小屏幕平板（>=768px)	中等屏幕桌面显示器 (>=992px)	大屏幕大桌面显示器 (>=1200px)
栅格系统行为	总是水平	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container最大宽度	None（自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px（每列左右均有15px）
可嵌套	是
偏移（offsets）	是
列排序	是

做作业的时候忘记练习表格了……所以手码下来……
哇靠！手码表格真是累死了……

列合并：colspan属性

逗比功能：鼠标悬浮事件

效果：鼠标移到submit上，submit会自动跳到输入框的另外一侧，就是不给你点，还要在输入框上出现（don’t touch me！），但是不要影响搜索！要搜索的话只能点击图片，为了别太坑还得做一个小小的提示框，但不能太大——简直逗比的我……

submit跳动

鼠标悬浮事件Mouseover
在两个分别设置两个submit，让他们不能同时出现，display属性，toggle方法
起始状态下，左边的dispaly为none
触发事件后，对两个submit都采用toggle方法
在输入框中出现don’t touch me
text输入框value属性的获取和修改
- 获取：$(“…”).val()方法即可返回表单的字段
- 修改：$(“…”).attr(“…”,”…”)方法即可将第一个参数匹配的属性修改为第二个参数的内容
但是这个用起来似乎有点麻烦……在百度上看到另外一种解决办法
- document.#form.#text.value = document.#text.#text.value + “(Don’t touch me!)”;
- 要注意的是：这里的#form和#text是form标签和input标签的name属性而不是 id 属性！而且这里不需要打井号，如：document.form.text.value
  点击图片自动跳转到百度搜索
跳转
- 在百度搜索试着搜索aaa，搜索页得到的网址是http://www.baidu.com/baidu?wd=aaa
- 那么猜测，直接修改网址末尾的aaa为搜索的内容是否可行？结果是可以的……
- 那么，我们只需要把搜索内容连接到http://www.baidu.com/baidu?wd=末尾作为图片的超链接即可实现
搜索内容的获取
- 键盘keyup事件
  与其相对的还有一个keydown事件，down是指按下键盘（包括输入法还未把输出到对话框）触发的时间，up是指松开键盘（包括输入法把内容输出到对话框上）触发的时间，
  显然这里要用的是应该是keyup事件
  另外，使用keyup事件不会在不通过键盘输入来修改内容的情况下触发，也就是说，前边用JQ修改输入框内容并不会触发事件，不影响内容的获取
- 将搜索内容与http://www.baidu.com/baidu?wd=组成的连接作为图片连接的href属性，使用attr("href","...")方法即可
  警告框
使用bootstrap，自己再对字体、尺寸稍作修改即可
但是千万别忘了
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
display:none

show()方法

注意

使用JQ的格式——
注意：fuction紧跟后面只有一个右括号
ready的右括号在最后边，中间的代码即花括号的内容是fuction的内容

$(document).ready**<font color="red">(</font>**function**<font color="green">()</font>**{       
</br>
}**<font color="red">)</font>**;
</br>    
$(document).ready(function(){
  $("...").click(function(){
      $("...").attr("","");
  });
});

选择器在圆括号内，除了document和this之外都要加双引号，类要加’.’，id要加’#’
JQ的内容一定要嵌套在$(document).ready(function(){.....});内
语句后边别忘了分号

登陆、注册弹框

在百度搜到一种遮罩式弹框的模板

jQuery+css+html实现页面遮罩弹出框
具体代码如下：

CSS部分:

body { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    margin:0; 
} 
#main { 
    height:1800px; 
    padding-top:90px;     //打开弹窗的按钮
    text-align:center; 
} 
#fullbg { 
    background-color:gray; 
    left:0; 
    opacity:0.5;        //背景设置为灰色
    position:absolute; 
    top:0; 
    z-index:3; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity:0.5; 
} 
#dialog { 
    background-color:#fff; 
    border:5px solid rgba(0,0,0, 0.4); 
    height:400px; 
    left:50%; 
    margin:-200px 0 0 -200px; 
    padding:1px; 
    position:fixed !important; //弹出的浮动对话框 
    position:absolute; 
    top:50%; 
    width:400px; 
    z-index:5; 
    border-radius:5px; 
    display:none; 
} 
dialog p { 
    margin:0 0 12px; 
    height:24px; 
    line-height:24px; 
    background:#CCCCCC; 
} 
#dialog p.close { 
    text-align:right; 
    padding-right:10px; 
} 
#dialog p.close a { 
    color:#fff; 
    text-decoration:none; 
}

HTML部分:

<div id="main"><a href="javascript:showBg();">点击这里查看效果</a> 
    <div id="fullbg"></div> 
    <div id="dialog"> 
        <p class="close"><a href="#" onclick="closeBg();">关闭</a>  
        <div>正在加载，请稍后....</div> 
    </div> 
</div>

####JQ部分:

<script type="text/javascript">
    //显示灰色 jQuery 遮罩层
    function showBg() {
        var bh = $("body").height();
        var bw = $("body").width();
        $("#fullbg").css({
            height:bh,
            width:bw,
            display:"block"
        });
        $("#dialog").show();
    }
    //关闭灰色 jQuery 遮罩
    function closeBg() {
        $("#fullbg,#dialog").hide();
    }
</script>

只要稍微修改一些数值就可以直接拿来用啦!!

第二个弹框

但是……直接套用模板，把html再复制一份企图创建第二个弹框就出现问题了，两个按钮弹出的是同一个框，咋办咧？
观察一下代码，发现JQ部分的$("#dialog").show();语句是对id为dialog的操作，如果在html里直接复制了第一个弹框，id都为dialog，show只为作用于第一个匹配项………
如果想要第二个弹框，就得让两个弹框的id不同，改为dialog1和dialog2单击后调用两个不一样的函数，也就是简单的复制一下showBg()函数，并且改为showBg1()和showBg2，并在css部分做出相应的修改就可以啦~

模态框

上面这个弹框太low了，其实bootstrap已经给我们提供了一个模态框的组件，方便又好看
但是偶尔会出现一些奇怪的bug…………

给鼠标悬浮在submit上的时候加个音频

嘿嘿，逗比功能就是拿来搞怪的，既然如此干嘛不个它加个笑声的音频呢？

找到一个简短的小黄人笑声的音频

添加一个`<audio>`标签

controls属性：如果不设置的话，默认不显示播放器；如果设置为controls=”controls”则显示播放器
play()方法：让指定的播放器播放音频
具体代码如下：

html部分：

<audio id="laugh">
    <source src="..." type="audio/mpeg">
</audio>

JQ部分：（插入在submit的mouseover事件下）

laugh.play();

奇怪的是！这里要直接对这个对象使用方法，id不加井号；
而$("#laugh").play();却行不通？！

咳咳，总结——

感觉像是玩上瘾了，居然两天花了八九个小时做这个网页，而且这两天还是很多课不是没课的……
又在第三天花了四五个小时写下这个玩意儿……我也是够拼哒= =
虽然很好玩，做出来也很有成就感……但是………我的眼睛啊！！！！！不知道近视又是加深的几度？！