Bing 搜索框制作 学习笔记

课程地址: 慕课网 Bing 搜索框制作

1: 为什么用 button 标签,而不用 input ?
<input> 的局限性：是自闭合标签，不能定义复杂的样式。所以要定义复杂样式（比如：图文样式）的按钮选择用 <button></button> 标签;
button 提交到服务器功能（type=submit），需配合action使用。如实现带图片或者文字的搜索按钮，可以用button实现。

2: 背景图的居中设置margin: 0 auto; 背景图需要设置宽高才会有效果

3: 在chrome下，输入框聚焦的时候，会有蓝色的边框,去掉的方法css中outline:none

4:<meta http-equiv="X-UA-Compatible" content="IE=edge" />
防止IE浏览器进入怪异模式，强制要求IE按照最新版来渲染。

5:事件绑定和事件代理,用于对于用户交互的响应,比如用户用鼠标或者键盘往网页中输入内容,我们需要对用户的 交互做出响应,就需要事件绑定和事件代理来完成;事件才能响应用户的输入输出操作

6: AJAX 用于与服务器进行数据交换的

7: jQuery 提供了两种方式来阻止事件冒泡

方式一：event.stopPropagation();
        $("#div1").mousedown(function(event){
            event.stopPropagation();
        });
方式二：return false;
        $("#div1").mousedown(function(event){
            return false;
        });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

8: 事件代理用在为多个元素绑定相同事件的时候，而且这些元素是JS动态创建出来的。
jQuery的事件代理用法：$(document).delegate("li","click",fn);

9: 获得元素至浏览器左边的距离 : var left = e.offsetLeft

10: e.onclick与addEventListener区别是: 给一个对象加事件onclick只能加一个，再加就会覆盖，addEvent可以加多个并分别实现

11: 定义JSON格式: var x = {name : xiaoming } // 可以直接 x.name 识别
定义JSON格式 var x = {"name" : "xiaoming"} // 不可使通过x.name识别，因为是字符串
可以通过 var x = JSON.parse{"name" : "xiaoming"} // 将其转换为JS可以识别的格式

12: 使用字符图标代替图片，可以降低对宽带的消耗，提高网页速度。
在哪style标签中自定义字符集：

    @font-face{
        font-family: 取个名字;
        src: url(字符集地址);
    }
    选择器{
        font-family: font-face定义的名字;
        font-XXX: 其他字体属性;
    }
然后要在icon容器中写上对应的符号或字符编码。