前端技术入门

来源：互联网发布：mba智库百科知乎编辑：程序博客网时间：2024/05/17 21:07

一、Bootstrap摘要

1. Bootstrap概要

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。

中文官网：http://www.bootcss.com/ （Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。）

2. Flat UI概述

Flat UI基于Bootstrap，对部分组件提供了不同风格的设计（额外增加，并保留了原来Bootstrap所有的元素、组件），直接从官网下载编译后的安装包后，即可支持原生的Bootstrap特性和Flat UI的附加特性。

官网：http://www.bootcss.com/p/flat-ui/

官网有详细的说明和样式，下载后打开index.html即可直接看到效果，选中效果后直接翻看源码即可复制粘贴Flat UI的效果。

注意：如果需要使用Boostrap自带的免费的“Glyphicons 字体图标”，需要下载Bootstrap用于生产环境的，编译后的zip包，解压缩后，将zip包fonts目录下的文件全部复制到Flat UI的dist/css/fonts目录下（没有该目录新建即可）。

实际使用中，建议以Flat UI为基础使用Bootstrap的特性。

3. Bootstrap+Flat UI

巨幕

# Flat UI<div class="tile"># Bootstrap<div class="jumbotron"><div class="well">

面板

<div class="panel panel-default">  <div class="panel-heading">Panel heading without title</div>  <div class="panel-body">    Panel content  </div></div>

二、更多扩展和组件

三、javascript、CSS片段

1. JavaScript基础

1. JavaScript执行顺序

1.页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。
2.每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。
3.变量的调用，必须是前面已经声明，否则获取的变量值是undefined。
4.同一段脚本，函数定义可以出现在函数调用的后面，但是如果是分别在两段代码，且函数调用在第一段代码中，则会报函数未定义错误。
5.各个浏览器的解析顺序可能存在不一致情况。例如对document.write中含有JS代码时
6.想在打开页面后会加载JS代码，可以把JS代码放在<body>标签的最后部分，或者放在body的onload属性里，这样均会在加载完整个页面后再加载JS代码

2. 获取控件对象

document.getElementById(id)var v=document.getElementById(id).value;document.getElementById(id).value=xxx;

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。

2. 首页frame分割

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>测试工具平台</title></head> <frameset rows="10%,*" frameborder="0"><frame src="frame_header.html" noresize="noresize" frameborder="0" scrolling="no" /><frameset cols="15%,*" name = "index"  frameborder="0"  >        <frame src="left.html" name="left" />        <frame src="<%=url%>" name="main" /></frameset></frameset></html>

3. 纵向导航栏

1）点击隐藏，点击显示的简易代码

<DIV class=block id='allrst_smallContent1' style="DISPLAY: block">[<A onclick="document.getElementById('fullContent1').style.display=(document.getElementById('fullContent1').style.display=='none')?'':'none';document.getElementById('allrst_smallContent1').style.display=(document.getElementById('allrst_smallContent1').style.display=='none')?'':'none'" href="javascript:">显示所有结果</A>]</DIV><DIV class=block id='fullContent1' style="DISPLAY: none">[<A onclick="document.getElementById('fullContent1').style.display=(document.getElementById('fullContent1').style.display=='none')?'':'none';document.getElementById('allrst_smallContent1').style.display=(document.getElementById('allrst_smallContent1').style.display=='none')?'':'none'" href="javascript:">隐藏所有结果</A>]此处存放全量内容</DIV>

2）纵向导航栏范例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="content-type" content="text/html;charset=utf8"><!-- 左侧导航栏样式 --><style><!--body{background-color:#37B3E3;font-family:Microsoft Yahei;}#navigation {width:350px;font-family:Microsoft Yahei;}#navigation > ul {list-style-type:none;margin:0px;padding:0px;}#navigation > ul > li {border-bottom:1px solid #ED9F9F;}#navigation > ul > li > a{display:block;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #0C4276;border-right:1px solid #0C4276;}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{background-color:#37B3E3;color:#FFFFFF;}#navigation > ul > li > a:hover{        background-color:#0DEA46;        color:#ffff00;}#navigation ul li ul{        list-style-type:none;        margin:0px;        padding:0px 0px 0px 0px;}#navigation ul li ul li{        border-top:1px solid #ED9F9F;}#navigation ul li ul li a{        display:block;        padding:3px 3px 3px 0.5em;        text-decoration:none;        border-left:28px solid #550AC4;        border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{        background-color:#0DBCC4;        color:#FFFFFF;}#navigation ul li ul li a:hover{        background-color:#0FEA1A;        color:#ffff00;}#navigation ul li ul.myHide{        display:none;}#navigation ul li ul.myShow{        display:block;}--></style><!-- 导航栏控制script --><script language="javascript">function change(){        //通过父元素li，找到兄弟元素ul        var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];        //CSS交替更换来实现显、隐        if(oSecondDiv.className == "myHide")                oSecondDiv.className = "myShow";        else                oSecondDiv.className = "myHide";}window.onload = function(){        var oUl = document.getElementById("listUL");        var aLi = oUl.childNodes;       //子元素        var oA;        for(var i=0;i<aLi.length;i++){                //如果子元素为li，且这个li有子菜单ul                if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){                        oA = aLi[i].firstChild; //找到超链接                        oA.onclick = change;    //动态添加点击函数                }        }}</script></head><body><div id="navigation">        <ul id="listUL">                <!-- 一级导航只是目录，链接在二级导航 -->                <li><a href="#">一级导航</a>                    <ul class="myHide">                <li><a href="链接地址（相对或绝对）" target="main">二级导航</a></li>                <li><a href="链接地址（相对或绝对）" target="main">二级导航</a></li>            </ul>                </li>                <!-- 一级导航本身是链接，没有二级导航 -->                <li><a href="链接地址" target="main">一级导航</a></li>        </ul></div></body></html>

4. 操作Cookies

1）读取cookies

function getCookie(c_name){　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　　　　　　　if (c_start!=-1){ 　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节　　　　　　} 　　　　}　　　　return ""　　}

2）写cookies

function setCookie(c_name, value, expiredays){　　　　var exdate=new Date();　　　　exdate.setDate(exdate.getDate() + expiredays);        // exdate.setHours(exdate.getHours() + expiredays*24);        // exdate.setTime(exdate.getTime() + (expiredays*1000*3600*24)); 　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());　　}　　//使用方法：setCookie('username','Darren',30)

3）删除cookies

function DelCookie(name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); if(cval!=null) document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString()+";path=/"; ; }

5. 操作数组和词典

<script type="text/javascript" >    /**    *对象声明和赋值操作    *    **/    var empty={} //空对象声明    var point ={x:0,y:0}; //声明并直接赋值    var circle={x:point,y:point.y+1,randis:2}; //声明赋值       //复杂对象声明并赋值    var home={        "name":"Home simpson",        "age":34,        "married":true,        "occupation":"plant operation",        "email":"linfeng@google.com"                 }    // 获取对象的值    home["name"];    home.name;    // 遍历对象  var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};  var props = "";  for(var p in obj){      if(typeof(obj[p])=="function"){            obj[p]();      }else{            props+= p + "=" + obj[p] + " ";         }  }  alert(props);    // ===================数组操作=========================    //数组对象声明    var array=new Array();    array[0]="hello\t";    array[1]="world\t";    array[2]="javascript\t";    /**    * for in 方法 遍历数组    **/    function foreach(){        var names="";        for( var name in  array)        {            alert(array[name]);             names+=name+"\n";            //alert(names);         }    }    /**    * join("分隔符"):返回用分隔符分隔的新数组    *    **/    function array_join(){           var joinarray=array.join(",");           alert(joinarray);             }    /**    *reverse()：返回翻转后的数组    *    */    function array_reverse(){        var reversearray= array.reverse();        alert(reversearray);    }        /**        * sort():返回排序后的数组        *        */    function array_sort(){           var reversesort= array.sort();       alert(reversesort);    }        var array_add=new Array("add element");    /**    * concat():将一个新数组展开与原数组合并,返回新数组    *    */    function array_concat(){        var new_array=array.concat(array_add);        alert(new_array);    }        /**        *slice(数组下标,影响个数) ：返回数组片段        *        */       function array_slice(){          array.concat(array_add);          var slice_array=array.slice(0,2);          alert(slice_array);//          }    /**         *splice(数组下标,影响元素个数0/1,....,插入数据1,....)：删除指定位置 指定个数的元素         *return 返回影响后的新数组 (如果影响个数为0,则在下标位置插入参数3--N对应的元素）     *备注:和concat不同,插入的数组不会展开，而是作为一个元素插入         **/    function array_splice(){                 var a=[1,2,3,4,5,6,7,8];        //a.splice(4);        //a.splice(2,3); a=[1,2,6,7,8]        //a.splice(2,0,'a','b'); //a=[1,2,a,b,3,4,5,6,7,8]        a.splice(3,0,'abc');//a=[1,2,abc,3,4,5,6,7,8]        alert(a);                 }        /**        * push():从栈底插入一个或多个对象,返回数组的新长度        * pop():从栈底删除一个对象,数组长度-1,返回它删除的值        * 备注:push和pop不是生成新数组,而是在原来数组的基础上加入和删除元素        *        **/        function push_pop(){            var stack=[];            stack.push(1,2);            alert(stack);            stack.pop();            alert(stack);            stack.push(3);            alert(stack);            stack.pop();            stack.push([4,5]);            alert(stack);              }        /**        *unshift():从栈顶插入一个或几个对象,原数组元素向下移动,返回数组新长度        *shift():从栈顶删除一个元素,其他元素向上补充,返回删除的元素值        *备注:unshift和shift不是生成新数组,而是在原来数组的基础上加入和删除元素        *    插入的数组顺序刚好和原数组顺序相反        */        function unshift_shift(){            var stack=[];            stack.unshift(1);            stack.unshift(2);                         alert(stack.shift());            alert(stack);             alert(stack.unshift(3,[ab]));            //stack.shift();            //alert(stack);            //stack.shift();            //alert(stack);        }</script>

6. 获取日期

function getDay(day){   var today = new Date();      var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;           today.setTime(targetday_milliseconds); //注意，这行是关键代码        var tYear = today.getFullYear();   var tMonth = today.getMonth();   var tDate = today.getDate();   tMonth = doHandleMonth(tMonth + 1);   tDate = doHandleMonth(tDate);   return tYear+"-"+tMonth+"-"+tDate;}function doHandleMonth(month){   var m = month;   if(month.toString().length == 1){      m = "0" + month;   }   return m;}/* 用法示例：document.write("前天："+getDate(-2)); document.write("<br />昨天："+getDay(-1)); document.write("<br />今天："+getDay(0)); document.write("<br />明天："+getDay(1)); document.write("<br />后天："+getDay(2)); document.write("<br />大后天："+getDay(3)); */

7. 字符串和数字互转

1）字符串转数字

// parseIntparseInt("1234blue"); //returns 1234parseInt("0xA"); //returns 10parseInt("010"); //returns 8，前导0被当做8进制的基数标识parseInt("22.5"); //returns 22parseInt("blue"); //returns NaN// parseInt带基数参数parseInt("AF", 16); //returns 175parseInt("10", 2); //returns 2parseInt("10", 8); //returns 8parseInt("010", 10); //returns 10 //前导0被忽略// parseFloatparseFloat("1234blue"); //returns 1234.0parseFloat("0xA"); //returns NaNparseFloat("22.5"); //returns 22.5parseFloat("22.34.5"); //returns 22.34parseFloat("0908"); //returns 908parseFloat("blue"); //returns NaN// 强制类型转换Number(false) 0Number(true) 1Number(undefined) NaNNumber(null) 0Number( "5.5 ") 5.5Number( "56 ") 56Number( "5.6.7 ") NaNNumber(new Object()) NaNNumber(100) 100

2）数字转字符串

// toStringvar i = 10;var s = i.toString();// 自动转换var num = 123;var string = num + "";// 更多加号的例子var a = 'abc' + 'xyz'; //a的值为：abcxyz,字符串与字符串是连接var a = 10 + 5; //a的值为：15，数字是加var a = 'abc' + 10; //a的值为：abc10，字符串与数字，自动将10转换成字符串了var a = 'abc' + 10 + 20 + 'cd'; //a的值为:abc1020cdvar a = 10 + 20 + 'abc' + 'cd'; //a的值为:30abccd，可以数字加的先数字加，然后再连接// 强制类型转换var s1 = String(null); //"null"var oNull = null;var s2 = oNull.toString(); //won't work, causes an error

8. 字符串函数

参见：http://blog.csdn.net/cyai/article/details/4213956

0 0