Front-end day2

我会带着你远行 2022-02-05 05:27 72阅读 0赞

Front-end day2
    
    一. 通过上节作业总结：
    
       a. 文本内容居中：text-align:center;
    
       b. 内联标签默认有多大占多大，设置长、宽没有用，用display:inline-block; 将内联标签转为块级标签，再设置长款。
    
       c. 每个标签默认都有自己的样式，我们要对标签样式设计，就要先把默认的样式去掉，用：margin:0; padding:0; 分别取消外边距、内边距。
    
       d. 当有display:inline-block;的时候，默认堆叠，边距都有3px；解决办法：float:left
    
       e. 改造标签：用拼接
    
       f. 默认的img标签是由边距的，IE浏览器可以看出来；解决办法：border:0；
    
    二. 上节回顾：
    
       HTML
    
           头部信息：编码、title、style、link
    
           身体包括：内联标签、块级标签、inline-block（前面两者都具有）
    
        1、a标签：属性：target、href（url:#i1）
    
        2、img标签：src、alt（当图片没有刷出来，就显示alt定义的属性文字）
    
        3、iframe标签：嵌套网站，伪造ajax上传文件，src把某网站嵌套过来。
    
        4、form标签：
    
           属性：action 提交到哪里
    
           属性：method 提交方式
    
           属性：enctype 上传文件必须加上此参数
    
        5、input标签：
    
           text：普通文件
    
           password：密码
    
           checkbox：复选框 （name相同，value不同）
    
           radio：单选框 （name相同实现互斥，value不同）
    
           button：按钮，无效果
    
           file ：上传文件
    
           submit：提交当前form表单
    
           reset：重置当前form表单
    
        6、select标签： 连续放3个，三级联动
    
        7、textarea多行标签：多行文本操作
    
        8、默认值（补充）
    
           ①单行文本默认值
    
               
    
               <input type="text" value="123" />           /* 默认显示123，需要手工删除默认
    
               <input placeholder="123">                   /* 默认显示123，不需要手工删除默认
    
           ②多行文本默认值
    
               
    
               <textarea>123</textarea>                    /* 默认显示123，需要手工删除默认
    
               <textarea placeholder="123"></textarea>     /* 默认显示123，不需要手工删除默认
    
           ③标题分类默认值
    
               <select>
    
                   <option>上海</option>
    
                   <option>广州</option>
    
                   <option selected="selected">北京</option>
    
               </select>
    
           ④单选框默认值
    
               
    
               男：<input type="radio" name="a1"  />
    
               女：<input type="radio" name="a1" checked="checked"/>
    
           ⑤复选框默认值
    
               
    
               篮球：<input type="checkbox" name="c1" value="1" checked="checked">
    
               足球：<input type="checkbox" name="c1" value="2">
    
               乒乓：<input type="checkbox" name="c1" value="3">
    
               羽毛：<input type="checkbox" name="c1" value="4" checked="checked">
    
    
       CSS
    
        1、存在形式：
    
           ①标签属性
    
           ②头部style块
    
           ③其他文件导入
    
           ④最牛的：color:red !important;（使所在优先级不管处于哪个位置都最大。）
    
        2、寻找选择器
    
           ①标签选择器
    
           ②class选择器
    
           ③id选择器
    
           ④层级选择器
    
           ⑤组合选择器
    
           ⑥属性选择器（补充）
    
        3、样式
    
           color、width、height
    
           外部样式=w，w等于980px
    
           定义宽度的时候想利用width=100% 必须在最外部定义一个宽度。
    
        4、背景：background
    
           background-color:red;
    
           background-image:url("image.jpg");
    
        5、透明度：两种方式
    
           opacity:0.6;
    
           background:rgba(0,0,0,,6)
    
        6、position:
    
           fixed    固定窗口，相对整个窗口，窗口位置不移动；（应用：对话框固定，返回顶部按钮）
    
           absolute   固定窗口，滚动窗口，窗口位置会移动；
    
           relative   默认单独无效果；
    
           relative+absolute定位    定位，
    
           Z-index：调整优先级
    
        7、边距
    
           内边距    本身增加：padding
    
           外边距    本身不增加：margin
    
        8、浮动：float
    
           有个特点：拽回来clear:both;
    
           over-flow:hidden;
    
        9、实现一个小例子：
    
           例如：淘宝的登录框：
    
               1.登录框用户名输入左边有一个小人的图标，代表输入用户名；
    
               2.登录框密码输入左边有一个小锁的图标，代表输入密码；
    
                 <form action="https://127.0.0.1" method="get">
    
                   <div style="width: 360px; height: 360px;background-color: whitesmoke;">
    
                       <div style="border: 1px solid honeydew">
    
                           <div class="icon-user" style="border: 1px solid honeydew"><input placeholder="请输入用户名"></div>
    
                           <br />
    
                           <div class="icon-lock" style="border: 1px solid honeydew"><input placeholder="请输入密码"></div>
    
    
                       </div>
    
                       <input type="submit" value="提交">
    
                       <br /><br /><br />
    
                       <div>
    
                           <div><i class="fa fa-user" aria-hidden="true"></i><input placeholder="请输入用户名"></div>
    
    
                           <div><i class="fa fa-lock" aria-hidden="true"></i><input placeholder="请输入密码"></div>
    
                       </div>
    
                       <input type="submit" value="提交">
    
                   </div>
    
                 </form>
    
    
    三、引入文件
    
       <head>
    
           <link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.css">
    
           <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css">
    
       </head>
    
    四、利用伪类清除浮动
    
       1、伪类：
    
           <head>
    
               <style>
    
                   /*以下三个伪类*/
    
                   .a1:hover{ background-color:red; }  /* 指针放到标签上，就变成颜色*/
    
                   .a1:before{ content:'666'; }    /* 在a1标签前加上666*/
    
                   .a1:after{ content: '999';}     /*在a1标签后加上999 */
    
               </style>
    
           </head>
    
           <body>
    
               <div class="a1" style="display: inline-block;">aaa</div>
    
               
    
           </body>
    
       2、如何自动添加<div style="clear:both"> </div>
    
           <head>
    
               <meta charset="UTF-8">
    
               <title>Title</title>
    
               <style>
    
                   .item{ background-color: blue; }
    
                   .item:after {
          
    
                       content: '.';
    
                       /*加一个点，撑起item的背景色*/
    
                       clear: both;
    
                       /*把浮动的标签拉回来*/
    
                       display: block;
    
                       /*设置标签为块级标签*/
    
                       visibility: hidden;
    
                       /*标签内容隐藏起来,但是位置仍占*/
    
                       height: 0;
    
                       /*去掉点的高度*/
    
                       }
    
                   .a1{ color: brown; float: left; }
    
                   .b1{ color: sandybrown; float: left;}
    
               </style>
    
           </head>
    
           <body>
    
               <div class="item">
    
                   <div class="a1">1</div>
    
                   <div class="b1">1</div>
    
               </div>
    
           </body>
    
    
           注意：
    
                visibility:hidden; 隐藏起来，位置还有，内容变空；
    
                display:none;   全部隐藏起来，不占位置。
    
    
                上边的item一般啊大家定义为clearfix ；
    
                应用：1.页面的背景色；2.写html一旦遇到float，就要在外部加一个clearfix 。
    
    
    五、自定义小尖角
    
       <head>
    
           <meta charset="UTF-8">
    
           <title>Title</title>
    
           <style>
    
               .icon{
          
    
                   display: inline-block;
    
                   border-top: 15px solid orange;
    
                   border-right:15px solid red;
    
                   border-bottom: 15px solid lime;
    
                   border-left:15px solid blue;
    
               }
    
           </style>
    
       </head>
    
       <body>
    
           <div class="icon"></div>
    
       </body>
    
    六、后台管理页面布局
    
       页面布局：
    
           1、主站布局（居中）
    
           2、后台管理布局
    
               header顶部：指定高度
    
               body：
    
                   body左菜单
    
                   body右菜单
    
                   footer底部
    
               案例一、鼠标滚动，页面的菜单跟着滚动。
    
                   <head>
    
                       <style>
    
                           body{
          
    
                               margin: 0;
    
                               /*默认居中*/
    
                               background-color:wheat;
    
                               /*默认背景颜色*/
    
                           }
    
                           .p-header{
          
    
                               background-color: lime;
    
                               height: 46px;
    
                           }
    
                           .p-body .p-menu{
          
    
                               position: absolute;
    
                               top: 46px;
    
                               left:0;
    
                               bottom: 0;
    
                               width: 200px;
    
                               background-color: blue;
    
                           }
    
                           .p-body .p-content{
          
    
                               position: absolute;
    
                               top:46px;
    
                               left: 205px;
    
                               right: 0;
    
                               background-color: maroon;
    
                           }
    
                       </style>
    
                   </head>
    
                   <body>
    
                       <div class="p-header"></div>
    
                       <div class="p-body">
    
                           <div class="p-menu"></div>
    
                           <div class="p-content">
    
                               111111111111<br>
    
                               111111111111<br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                           </div>
    
                       </div>
    
                   </body>
    
               案例二、鼠标滚动，页面的菜单不滚动。
    
                   <head>
    
                       <meta charset="UTF-8">
    
                       <title>Title</title>
    
                       <style>
    
                           body{
          
    
                               margin: 0;
    
                               background-color:wheat;
    
                           }
    
                           .p-header{
          
    
                               background-color: lime;
    
                               height: 46px;
    
                           }
    
                           .p-body .p-menu{
          
    
                               position: absolute;
    
                               top: 46px;
    
                               left:0;
    
                               bottom: 0;
    
                               width: 200px;
    
                               background-color: blue;
    
                           }
    
                           .p-body .p-content{
          
    
                               position: absolute;
    
                               top:46px;
    
                               left: 205px;
    
                               right: 0;
    
                               background-color: maroon;
    
                               /*重点在下边这两行*/
    
                               bottom: 0;
    
                               overflow: auto;
    
                           }
    
                       </style>
    
                   </head>
    
                   <body>
    
                       <div class="p-header"></div>
    
                       <div class="p-body">
    
                           <div class="p-menu"></div>
    
                           <div class="p-content">
    
                               111111111111<br>
    
                               111111111111<br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                               <br><br><br><br><br><br><br><br><br><br><br><br>
    
                           </div>
    
                       </div>
    
                   </body>
    
    七、JavaScript介绍以及基本使用
    
       1. 介绍
    
           JavaScript是一门语言，由浏览器编译执行。
    
       2. 存在形式
    
           1.当前html块里边
    
               <body>
    
                   <div>111</div>
    
                   <script type="text/javascript">
    
                       var a ="123";
    
                       alert(a);
    
                   </script>
    
               </body>
    
               通过浏览器审查元素在console里边，输入a 打印出123 。
    
               alert运行会弹框，弹出对应a的变量值。
    
           2、文件形式存在
    
               <script type="text/javascript" src=".js文件"></script>
    
       3. 放置位置哪里更合适
    
           1、html的head中
    
           2、html的body代码中最下边  （最合适）
    
               由于html代码是从上到下执行，当head中的js代码执行耗费时间，而导致用户看不到页面。
    
               如果放到body下边，即使js效果出不来，也不影响用户查看页面显示内容。所以body代码中最下边合适。
    
       4. 变量
    
               <script type="text/javascript">
    
                   //全局变量
    
                   name = "abc";
    
                   function func() {
          
    
                       //局部变量，var是必须写的关键字。
    
                       var a = "123";
    
                   }
    
               </script>
    
       5. 注释
    
           当行注释：//
    
           多行注释：/* */
    
       6. 数据类型
    
           JavaScript中的数据类型分为原始类型和对象类型：
    
               原始类型：
    
                   数字、字符串、布尔值
    
               对象类型：
    
                   数组、字典、。。。
    
               特别：数字、布尔值、null、undefined、字符串是不可变的。
    
                     null：JavaScript语言的关键字，表示一个特殊值，常用来描述“空值”。
    
                     undefined：是一个特殊值，表示变量未定义。
    
               1.数字（number）
    
                   javascript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数表示。
    
                   转换：
    
                       parseInt()   将某值转换成数字，不成功则NaN
    
                       parseFloat() 将某值转换成浮点数，不成功则NaN
    
                   特殊值：
    
                       NaN      非数字，可使用isNaN(num) 来判断。
    
                       Infinity 无穷大，可使用isFinite(num) 来判断，
    
                   更多数值计算：
    
               2.字符串（string）
    
                  字符串是由字符组成的数组，在JavaScript中字符串是不可变的；
    
                  可以访问字符串的所有位置内容，但不提供修改已知字符串内容的方法。
    
                  常见功能：
    
                       obj.length                           长度
    
                       obj.trim()                           移除空白
    
                       obj.trimLeft()
    
                       obj.trimRight)
    
                       obj.charAt(n)                        返回字符串中的第n个字符
    
                       obj.concat(value, ...)               拼接
    
                       obj.indexOf(substring,start)         子序列位置
    
                       obj.lastIndexOf(substring,start)     子序列位置
    
                       obj.substring(from, to)              根据索引获取子序列
    
                       obj.slice(start, end)                切片
    
                       obj.toLowerCase()                    大写
    
                       obj.toUpperCase()                    小写
    
                       obj.split(delimiter, limit)          分割
    
                       obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
    
                       obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
    
                       obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
    
                                                            $数字：匹配的第n个组内容；
    
                                                            $&：当前匹配的内容；
    
                                                            $`：位于匹配子串左侧的文本；
    
                                                            $'：位于匹配子串右侧的文本
    
                                                            $$：直接量$符号
    
               3.布尔类型（Boolean）
    
                   布尔类型仅包含真假，与Python不同的是其首字母小写。
    
                   ==       比较值相等
    
                   !=       不等于
    
                   ===      比较值和类型相等
    
                   !===     不等于
    
                   ||       或
    
                   &&       且
    
               4.数组
    
                   JavaScript中的数组类似于python中的列表。
    
                   常见功能：
    
                       obj.length          数组的大小
    
                       obj.push(ele)       尾部追加元素
    
                       obj.pop()           尾部获取一个元素
    
                       obj.unshift(ele)    头部插入元素
    
                       obj.shift()         头部移除元素
    
                       obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
    
                                           obj.splice(n,0,val) 指定位置插入元素
    
                                           obj.splice(n,1,val) 指定位置替换元素
    
                                           obj.splice(n,1)     指定位置删除元素
    
                       obj.slice( )        切片
    
                       obj.reverse( )      反转
    
                       obj.join(sep)       将数组元素连接起来以构建一个字符串
    
                       obj.concat(val,..)  连接数组
    
                       obj.sort( )         对数组元素进行排序
    
    
                   JavaScript和python有一个区别：
    
                       li = ["123","aaa","333"]
    
                       pyton将li的字符拼接在一起：
    
                           "".join(li);
    
                       JavaScript将li的字符拼接在一起：
    
                           li.join();
    
                           li.join("_")    如果要加分割符
    
               5.字典
    
                   JavaScript里边没有字典一说；
    
                   字典在JavaScript里存在的是一个对象。
    
       7. 跑马灯-实例
    
           实例一、
    
               <div id="i1" style="display: inline-block; background-color: red; color: white; ">欢迎光临领导亲临指导</div>
    
               <script>
    
                   //定时器;1000代表一秒钟
    
                   setInterval("f1()",1000);
    
    
                   function f1() {
          
    
                       //通过js获取id为i1的标签
    
                       var tag = document.getElementById('i1');
    
                       //获取标签的内容
    
                       var text = tag.innerText;
    
                       //获取第一个字符
    
                       var a = text.charAt(0);
    
                       //获取剩下的字符串
    
                       var sub = text.substring(1,text.length);
    
    
                       //拼接字符串
    
                       var new_str = sub + a ;
    
                       //重新赋值给标签
    
                       tag.innerText = new_str ;
    
                   }
    
               </script>
    
           实例二、
    
               <head>
    
                   <style>
    
                       marquee {
          
    
                           border:1px solid #5C6576;
    
                           line-height: 35px;
    
                           margin: 5px 0;
    
                       }
    
                   </style>
    
               </head>
    
               <body>
    
                   <marquee>豪哥，这是跑马灯！！</marquee>
    
                   <marquee behavior="alternate">豪哥，这是跑马灯！！(来回)</marquee>
    
                   <marquee width="400px" direction="left" align="middle" >豪哥，这是跑马灯！！</marquee><br/>
    
                   <marquee width="400px" direction="left" align="middle" scrollamount="15" >豪哥，快速跑马灯！！</marquee>
    
                   <img src="pmd.jpg" />
    
               </body>
    
       8.其他
    
           1.序列化
    
               JSON.stringify(obj)    序列化
    
               JSON.parse(str)        反序列化
    
           2.转义
    
               decodeURI( )                   URl中未转义的字符
    
               decodeURIComponent( )   URI组件中的未转义字符
    
               encodeURI( )                   URI中的转义字符
    
               encodeURIComponent( )   转义URI组件中的字符
    
               escape( )                         对字符串转义
    
               unescape( )                     给转义字符串解码
    
               URIError                         由URl的编码和解码方法抛出
    
           3.eval
    
               JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
    
                   eval()
    
                   EvalError   执行字符串中的JavaScript代码
    
           4.正则表达式（后续讲解）
    
           5.时间处理
    
               JavaScript中提供了事件相关的操作，时间操作中分为两种时间：
    
                   世界统一时间
    
                   本地时间（东8区）
    
                   更多操作参见：http://www.shouce.ren/api/javascript/main.html
    
                   例如：
    
                       d = New Date();     获取当前时间
    
                       d.getFullYear();    获取当前年
    
                       d.getUTCHours();    获取UTC时间小时
    
                       d.setMinutes(d.getMinutes+2)    设置当前时间分钟加2分钟
    
       11.    语句和异常
    
           1.条件语句
    
               JavaScript中支持两个条件语句：if和switch
    
                   （没有冒号！！）
    
                   if(条件){
          
    
                       }
    
                   else if(条件){
          
    
                       }
    
                   else{
          
    
                       }
    
    
                   switch(name){
          
    
                       case '1':
    
                           age = 123;
    
                       case '2':
    
                           age = 456;
    
                       default:
    
                           age = 789;
    
                       }
    
           2.循环语句
    
               JavaScript中支持三种循环语句，分别是：
    
                   方式一、
    
                   var names = ["alex", "tony", "rain"];
    
                   for(var i=0;i<names.length;i++){
          
    
                       console.log(i);
    
                       console.log(names[i]);
    
                   }
    
                   方式二、
    
                   var names = ["alex", "tony", "rain"];
    
                   for(var index in names){
          
    
                       console.log(index);
    
                       console.log(names[index]);
    
                   }
    
                   方式三、
    
                   while(条件){
          
    
                       // break;
    
                       // continue;
    
                   }
    
    
           3.异常处理
    
               try {
          
    
                   //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
    
               }
    
               catch (e) {
          
    
                   // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    
                   //e是一个局部变量，用来指向Error对象或者其他抛出的对象
    
               }
    
               finally {
          
    
                    //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
    
               注：主动跑出异常 throw Error('xxxx')
    
       12.    JavaScript函数
    
           1.基本函数
    
               JavaScript中函数基本上可以分为以下三类：
    
                   // 普通函数
    
                       function func(arg){
          
    
                           return true;
    
                       }
    
    
                   // 匿名函数（即没有名字的函数）
    
                       var func = function(arg){
          
    
                           return "tony";
    
                       }
    
    
                   // 自执行函数（可以做封装用）
    
                       (function(arg){
          
    
                           console.log(arg);
    
                       })('123')
    
               注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
    
           2.作用域
    
               JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。
    
               当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。
    
               切记：所有的作用域在创建函数且未执行时候就已经存在。
    
                   案例一、
    
                       function f2(){
          
    
                           var arg= 111;
    
                           function f3(){
          
    
                               console.log(arg);
    
                           }
    
                           return f3;
    
                       }
    
                       ret = f2();
    
                       ret();
    
                   案例二、
    
                        function f2(){
          
    
                           var arg= [11,22];
    
                           function f3(){
          
    
                               console.log(arg);
    
                           }
    
                           arg = [44,55];
    
                           return f3;
    
                        }
    
                        ret = f2();
    
                        ret();
    
                   注：声明提前，在JavaScript引擎“预编译”时进行。
    
    
                   更多：http://www.cnblogs.com/wupeiqi/p/5649402.html
    
           3.闭包
    
               「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
    
    
               闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
    
    
               由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。
    
    
                   function f2(){
          
    
                       var arg= [11,22];
    
                       function f3(){
          
    
                           return arg;
    
                       }
    
                       return f3;
    
                   }
    
    
                   ret = f2();
    
                   ret();
    
       13.    面向对象
    
               function Foo (name,age) {
          
    
                   this.Name = name;
    
                   this.Age = age;
    
                   this.Func = function(arg){
          
    
                       return this.Name + arg;
    
                   }
    
               }
    
    
               var obj = new Foo('alex', 18);
    
               var ret = obj.Func("sb");
    
               console.log(ret);
    
               对于上述代码需要注意：
    
                   Foo充当的构造函数
    
                   this代指对象
    
                   创建对象时需要使用 new
    
                   上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型可以解决该问题：
    
                       function Foo (name,age) {
          
    
                           this.Name = name;
    
                           this.Age = age;
    
                       }
    
                       Foo.prototype = {
          
    
                           GetInfo: function(){
          
    
                               return this.Name + this.Age
    
                           },
    
                           Func : function(arg){
          
    
                               return this.Name + arg;
    
                           }
    
                       }

本文转自506554897 51CTO博客，原文链接：http://blog.51cto.com/506554897/1863170 ，如需转载请自行联系原作者