Web 前端 注意知识点

一.  前端使用技巧:

  1. button的用法。在使用按钮时可以自由在内设置style属性,来改变形态。可以给予type=sbumit提交属性。

  2. 各种使用符号:

1 # <!--小于  大于  &  版权所有标志   注册商标   TM-->
2   <div>&lt;</div>
3   <div>&gt;</div>
4   <div>&amp;</div>
5   <div>&copy;</div>
6   <div>&reg;</div>
7   <div>&trade;</div>

  3. <img>标签:

1        # <!--本地引入  相对路径    alt图像的替代文本-->
2         <img src="img/a.jpg" alt="小男孩的图片">

 

  4. <a>标签:

1         # <!--超链接-->
2         <a href="http://www.baidu.com">百度</a>
3         <a href="http://www.baidu.com" target="_blank">新的打开</a>
4         <a href="#">返回顶部</a>
5                  <!--用于刷新或点击-->
6         <a href="javascript:void (0)">死链接</a>

 

  5. input标签的类型与属性:

     1        # <!--submit 把表单数据提交到  web服务器   reset重置-->
     2         <input type="submit" value="提交"> <input type="reset"value="重置">

 

  6. 在select 下拉框中:

    * option: 表示下拉选项的数量。

    * selected: 表示下拉框的选中。

  7. <a>标签的四种状态:

    * link : 未访问过的样式。

    * visited:访问过后的样式。

    * hover:划过的样式。

    * active:激活的样式。

  8. align标签的使用:

    在表格或布局中,可以给予align标签为左或者右的属性,会自由想左或者右浮动。

  9. outline:none; 用来清除背景与边框之间细微的颜色。

  10。 四大定位属性:

    * static:默认属性

    * relative:相对定位

    * absdute:绝对定位

    * fixed:固定定位

  11. javaScript的两种打印:

    * console.log(str):控制台打印

    * alert( ” 陌影 ” ):弹窗打印

  12. js修改文本的两种方式:

 1             # // 获取元素赋值给变量
 2            # // 声明符  变量   访问作用   获取ID名为text的元素
 3             var  Text = document.getElementById('text');
 4             # // 打印纯文本信息,会把标签过滤掉  复给str
 5             var str = Text.innerText;
 6             # // 打印信息
 7             console.log(str)
 8             #// 更改文本信息
 9             Text.innerText='哈哈'
10 
11              #  // innerHTML 打印,包括标签和文本信息a
12             var str1 = Text.innerHTML;
13            #   // 打印信息
14             console.log(str1)
15             #  // 更改信息
16             Text.innerHTML = '轩辕'

  13. js的六大事件:

    * onclick:单击事件

    * ondblclick:双击事件

    * onmouseenter:鼠标划入事件

    * onmouseleave:鼠标划出事件

    * onresize:窗口变化

    * onchange:改变下拉框

 1      <a href="javascript:void(0)" class="btn">按钮</a>
 2      <label for="add">请选择地区</label>
 3      <select name="add" id="add">
 4          <option value="1">轩辕</option>
 5          <option value="1">慕容</option>
 6          <option value="1">欧阳</option>
 7          <option value="1">上官</option>
 8      </select>
 9      <!--获取按钮-->
10      <script>
11          var btn = document.querySelector('.btn')
12          btn.onclick = function () {
13              console.log('单击');
14          };
15          btn.onbdlclick = function () {
16              console.log('双击666');
17          };
18          btn.onmouseenter = function () {
19              console.log('移入');
20          };
21          btn.onmouseleave = function () {
22              console.log('移出');
23          };
24          var add = document.getElementById('add');
25              add.onchange = function () {
26                  console.log('下拉变化');
27              };
28          window.onresize = function () {
29              console.log('窗口变化');
30          };
31      </script>

  14. this 表示当前的元素或标签。

  15. 标签分两种,一种是合法标签,一种是自定义标签。示例:

1 <button class="btn btn-primary" id="submit" data-user-id="{{ user.id }}">修改</button>
2 # jQ 获取标签内的自定义数据
3 var user_id = $(this).attr("data-user-id");

  16. 在js中查看元素的类型:typeof( );

     js中返回元素的长度用:length( );

  17. 利用js进行css的属性样式修改:

1       <div id="box"></div>
2       <script>
3           var box = document.getElementById('box');
4               box.style.width = "200px";
5               box.style.height = "120px";
6               box.style.marginTop = "20px";
7               box.style.marginLeft = "auto";
8       </script>

  18. 利用js进行属性操作:

 1        <div id="box" class="box1" name="轩辕"></div>
 2 
 3        <script>
 4           #  // 操作标签属性
 5            var box = document.getElementById('box');
 6            alert(box.id);
 7            # // 修改ID
 8            box.id = "add";
 9            alert(box.className);
10            # // 修改class
11            box.className = 'a';
12            # // setAttribute在这里是设置的意思
13            box.setAttribute('hello','晚上好');
14            # // 修改标签属性值
15 
16        </script>

  19. js中简单的数据类型:

 1     <script>
 2          # <!--基本的数据类型-->
 3        # // string
 4        var name = 'hallo';
 5        alert (typeof name)
 6 
 7         # // 数字
 8         var age = 18;
 9        alert(typeof age);
10 
11        # // 布尔
12         var a = false;
13         alert(typeof a);
14 
15        #  // undefined 未定义
16         var b;
17         alert(typeof b);
18 
19         # // 空数据
20         var c = null;
21         alert(typeof c);
22 
23         # // 对象数据
24         var arr= [1,2,3,4,5];
25         alert(typeof arr);
26 
27         var arr1 ={gander:"nan","age":18};
28         alert(typeof arr1);
29 
30         # // 在这里加括号的作用是调用,函数不算数据类型
31         var box = function () {
32             alert("gander"+"");
33         }();
34         alert(typeof box);
35     </script>

  20. js配合button修改标签内容:

 1         <h1>我的第一段 JavaScript</h1>
 2         <p id="demo">
 3         JavaScript 能改变 HTML 元素的内容。
 4         </p>
 5         <script>
 6         function myFunction()
 7         {
 8             x=document.getElementById("demo");  // 找到元素
 9             x.innerHTML="Hello JavaScript!";    // 改变内容
10         }
11         </script>
12         <button type="button" onclick="myFunction()">点击这里</button>\

  21. js配合button修改元素:

 1         <p id="demo">
 2         JavaScript 能改变 HTML 元素的样式。
 3         </p>
 4         <script>
 5         function myFunction()
 6         {
 7             x=document.getElementById("demo") // 找到元素
 8             x.style.color="#ff0000";          // 改变样式
 9         }
10         </script>
11         <button type="button" onclick="myFunction()">点击这里</button>

22. js语法:

 1           <p id="demo"></p>
 2           <script>
 3           var x, y, z;
 4           x = 5
 5           y = 6;
 6           z = (x + y) * 10;
 7           document.getElementById("demo").innerHTML = z;
 8       
 9  ---------------------------------------------------------------------------------------------------------------------
10  
11          <h1>我的 Web 页面</h1>
12          <p id="demo">一个段落。</p>
13          <div id="myDIV">一个 DIV。</div>
14          <script>
15          document.getElementById("demo").innerHTML="你好 Dolly";
16          document.getElementById("myDIV").innerHTML="你最近怎么样?";
17          </script>
18 
19         # 函数可传参,调用
20         <p id="demo"></p>
21         <script>
22         var x = function (a, b) {return a * b};
23         document.getElementById("demo").innerHTML = x(4, 3);
24 
25         #函数的调用
26         <p id="demo"></p>
27         <script>
28         function myFunction(a, b) {
29             return a * b;
30         }
31         document.getElementById("demo").innerHTML = myFunction(10, 2);
32         </script>
33 
34         # 函数可作为值调用但需要有retuen键
35         <script>
36         function myFunction(a, b) {
37             return a * b;
38         }
39         var x = myFunction(4, 3);
40         document.getElementById("demo").innerHTML = x;
41         </script>

 

  23. <s> 标签可作为删除键用:

1         <p><s>我的车是蓝色的。</s></p>
2         <p>我的新车是银色的。</p>

【js语法修改内容】:   

1.修改元素内容
        <h1 id=”header”>Old Header</h1>

        <script>
        var element=document.getElementById(“header”);
        element.innerHTML=”New Header”;
        </script>
    2.修改图片内容
        <img id=”image” src=”smiley.gif”>

        <script>
        document.getElementById(“image”).src=”landscape.jpg”;
        </script>

【js语法】:
    1.修改元素的变量
        <button onclick=”getElementById(‘demo’).innerHTML=Date()”>现在的时间是?</button>
        <p id=”demo”></p>

    2.修改自身的变量(this自身元素的作用就是利用)
        <body>
        <button onclick=”this.innerHTML=Date()”>现在的时间是?</button>
        </body>

【javascript:void(0) 含义】:
    1.超链接
        <body>
        <a href=”javascript:void(0)”>单此处什么也不会发生</a>
        </body>

    2.用于警告,弹窗
        <body>
        <a href=”javascript:void(alert(‘Warning!!!’))”>点我!</a>
        </body>

【事件】:
    1.从事件处理器调用一个函数
        <script>
        function changetext(id){
            id.innerHTML=”Ooops!”;
        }
        </script>
        </head>
        <body>

        <h1 onclick=”changetext(this)”>点击文本!</h1>

        </body>

    2.移入移出时触发
        <body>
        <div onmouseover=”mOver(this)” onmouseout=”mOut(this)” style=”width:120px;height:20px;padding:40px;”>Mouse Over Me</div>
        <script>
        function mOver(obj){
            obj.innerHTML=”Thank You”
        }
        function mOut(obj){
            obj.innerHTML=”Mouse Over Me”
        }
        </script>

    3.点击触发事件
        <div onmousedown=”mDown(this)” onmouseup=”mUp(this)” style=”width:90px;height:20px;padding:40px;”>Click Me</div>
        <script>

        function mDown(obj)
        {
        obj.style.backgroundColor=”#1ec5e5″;
        obj.innerHTML=”Release Me”
        }

        function mUp(obj)
        {
        obj.style.backgroundColor=”#D94A38″;
        obj.innerHTML=”Thank You”
        }
        </script>

【计时事件】:
    1.定时器
        <p>单击按钮每3秒出现一个“Hello”警告框。</p>
        <p>再次点击警告框,经过3秒出现新的警告框,这将一直执行 …</p>
        <button onclick=”myFunction()”>点我</button>
        <script>
        function myFunction(){
            setInterval(function(){alert(“Hello”)},3000);
        }
        </script>

    2.显示一个时钟
        <p>在页面显示一个时钟</p>
        <p id=”demo”></p>
        <script>
        setInterval(function(){myTimer()},1000);
        function myTimer(){
            var d=new Date();
            var t=d.toLocaleTimeString();
            document.getElementById(“demo”).innerHTML=d;
        }
        myTimer();
        </script>

【date时间对象】:

    1.时间对象的命令
        toDateString()    把 Date 对象的日期部分转换为字符串。
        toISOString()    使用 ISO 标准返回字符串的日期格式。
        toJSON()    以 JSON 数据格式返回日期字符串。
        toLocaleDateString()    根据本地时间格式,把 Date 对象的日期部分转换为字符串。
        toLocaleTimeString()    根据本地时间格式,把 Date 对象的时间部分转换为字符串。
        toLocaleString()    据本地时间格式,把 Date 对象转换为字符串。
        toString()    把 Date 对象转换为字符串。
        toTimeString()    把 Date 对象的时间部分转换为字符串。
        toUTCString()    根据世界时,把 Date 对象转换为字符串。
        UTC()    根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

【定时器】:
    1.
        setTimeout(function () {
            console.log(1);
        },2000); // 1000毫秒 = 1s

        setInterval(function () {
            console.log(2);
        });
        //  格式: setTimeout(函数,时间);

        简易格式:
        function fn() {
            console.log(3);
        }
        setTimeout(fn,2000);

 

    JavaScript 进阶二.函数

    【时间模型】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
     <div id=”body”></div>
    <script>
        // 获取当前时间
        var data=new Date();
        alert(data);

      //  var strap = data.getTime();  // 获取时间轴时间
        var year = data.getFullYear();
        var month = data.getMonth()+1;   // 获取月份,取值为0-11之间的整数,所以要得正常月份需要在后面 +1
        var date = data.getDate();  // 获取周几  取值为 0-6之间的整数  所以需要在后面 +1
        var hours = data.getHours();
        var minutes = data.getMinutes();
        var seconds = data.getSeconds();

        document.body.innerHTML = year + ‘年’+ month + ‘月’ + date + ‘日’ + hours + ‘时’ + minutes + ‘分’ + seconds + ‘秒’;

    </script>
</body>
</html>

   【定时器】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <script>

        setTimeout(function () {
            // 延迟定时器 2000毫秒后执行一次
            console.log(1);
        },2000); // 1000毫秒 = 1s

        setInterval(function () {
            // 隔1000毫秒后一直不停的在执行
            console.log(2);
        });
        //  格式: setTimeout(函数,时间);

        function fn() {
            console.log(3);
        }
        setTimeout(fn,2000);
    </script>
</body>
</html>

   【清除计时器】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
         span{
             color: red;
             font-size: 20px;
         }
        div{
            width: 500px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id=”box”>
        <p> 还有<span id=”timer”>5s</span>就开始! </p>
    </div>

    <script>
        var oTime = document.getElementById(‘timer’);
        var num = 5;
        var time;
        time = setInterval(function () {
            num –;   //  逐渐往下减
            oTime.innerHTML = num +’s’; //打印
            if(num === 1){
                clearInterval(time);
                // clearTimeout(time), 前面用哪个定时器后面就跟哪个,要一一对应
                window.location.href = ‘http://www.baidu.com’;
                //  去某个地方的固定写法
            }
        },1000);
    </script>
</body>
</html>

    【有名函数 匿名函数】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #5d49ff;
            margin: 5px;
        }
    </style>
</head>
<body>

    <div id=”box1″></div>
    <div id=”box2″></div>
    <script>

        var oBox1 = document.getElementById(‘box1’);
        var oBox2 = document.getElementById(‘box2’);

        // oBox1.onclick = function () {
        //     console.log(1);   // 点击会打印1
        // };
        // oBox2.onclick = function () {
        //     console.log(1);
        // };

        function fn() {
            console.log(1);  //  设置值,可以直接调用
        }
        oBox1.onclick = fn;  // 如果加括号会自动执行, 一般不用
        oBox2.onclick = fn;
    </script>
</body>
</html>

     【函数定义  函数表达式】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <script>

        fn();
        function fn() {
            alert(1);
        };         //函数定义  可以在定义前加括号执行,也可以在定义后加括号执行
        // fn();

        var fn = function () {
            alert(1);   //  通过var 的函数。只能在后面运行
        };     // 效果一样
        fn();

        // 函数表达式
        !function () {
            alert(6)
        }();

        +function () {
            alert(8)
        }();

        (function () {
            alert(9)
        })();

        (function () {
            alert(999)  //国外使用方法,国内一般不用
        }());

    </script>
</body>
</html>

    【实参  形参  不定参】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <script>

        var s=55;
        fn(s);    // 形参  相当于局部变量,命名规则和var相同
        function fn(x){
            alert(x);
        };
        fn(666);   // 实参   执行时,直接加括号插入参数执行

        sum(1,2,3,4,5,6);
        function sum(x,y,z) {   //  一一对应,所以会打印出6
            console.log(x+y+z);
        }

        sum(1,2,3);
        function sum(x,y,z,q,w,e) {
            console.log(q);
            // x = x||6;
            // y = y||0;
            // z = z||0;
            q = q || 666;     // 设置未传入实参的形参变量
            w = w || 0;
            e = e || 0;
            console.log(x+y+z+q+w+e);
        }

        // 不定参
        sum(1,2,3,4,5,6,7,8,9);
        function sum() {
            console.log(arguments.length);
            console.log(arguments[2]);
            var x = 0;
            for(var i = 0; i< arguments.length; i++){
                x += arguments[i];
            }
            console.log(x);
        }

        // 每个函数都默认返回 undefined
        function fn() {
            alert(666);  //  执行完以后返回值
            return(999);
        }
        var m = fn();
        alert(m);

    </script>
</body>
</html>

    【作用域】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<script>

    alert(a);
    function a() {
        alert(2);
    }
    a();
    alert(a);
    /*
    1 找
        a = function a() {
              alert(2);
        }
    2 执行
        alert(a); ===》 转变为函数块
        a(); 函数调用  是新的作用域  只要是作用域   解析时就要分两步
            1 找   (没有var  和  函数 , 继续往下执行)
            2执行
                 alert(2); ===》2
        alert(a);  ===》函数块
     */

    var a = 1;
    function fn() {
        alert(2);
        a = 3;
    // var a =3;     当子域找不到值时  会修改父级的
        }
    fn();
    alert(a);
    /*
    1 找
       a = undefined ===> a =1;
       fn =     function fn() {
        alert(2);
        a = 3;
        }
   2  执行
     a = 1;
     fn();
          1 找
              a = undefined; ===>3
          2 执行
              alert(2); ===>2
              a = 3;  找不到修改父级   如果是  var a=3; 则执行外边的var这属于局部变量与  全局变量的关系
        alert(a); ===>3
     */

</script>
</body>
</html>

     【敌军还有30秒到达战场–作业】:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
         div{
             width: 100%;
             height:100px;
             line-height: 100px;
             text-align: center;
             font-size: 30px;
         }

        span{
            color: red;
            font-size: 35px;
        }
        p{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
      <div id=”box”>敌军还有 <span id=”box2″>5</span>秒到达战场 </div>
      <div id=”box1″></div>

      <script>
          var oBox = document.getElementById(‘box’);
          var aTime = document.getElementById(‘box1’);
          var wart = document.getElementById(‘box2’);
          var num = 5;
          var time;

          time = setInterval(function () {
              num –;
              wart.innerHTML = num;
              if (num === 0){
                  oBox.innerHTML =  “<p>全军出击!!!<p>”;
                  clearInterval(time);
              }
          },1000);
          function btime() {
              var data=new Date();
              var year = data.getFullYear();
              var month = data.getMonth()+1;
              var date = data.getDate();
              var hours = data.getHours();
              var minutes = data.getMinutes();
              var seconds = data.getSeconds();

              hours = toTwo(hours);
              minutes = toTwo(minutes);
              seconds = toTwo(seconds);

              function toTwo(n){
                  if (n<10){
                      n = ‘0’ + n;
                  }
                  return n;
              }

              aTime.innerHTML = year + ‘年’ + month + ‘月’ + date +
                  ‘日’ + hours + ‘时’ + minutes + ‘分’ + seconds + ‘秒’;
              };

          btime();
          setInterval(btime,1000);
      </script>
</body>
</html>