Web 前端 注意知识点

一.  前端使用技巧：

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

　　2. 各种使用符号：

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

　　3. <img>标签：

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

　　4. <a>标签：

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

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

 　　     # <!--submit 把表单数据提交到  web服务器   reset重置-->
              <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修改文本的两种方式：

             # // 获取元素赋值给变量
            # // 声明符  变量   访问作用   获取ID名为text的元素
             var  Text = document.getElementById('text');
             # // 打印纯文本信息，会把标签过滤掉  复给str
             var str = Text.innerText;
             # // 打印信息
             console.log(str)
             #// 更改文本信息
             Text.innerText='哈哈'

              #  // innerHTML 打印，包括标签和文本信息a
             var str1 = Text.innerHTML;
            #   // 打印信息
             console.log(str1)
             #  // 更改信息
             Text.innerHTML = '轩辕'

　　13. js的六大事件：

　　　　* onclick：单击事件

　　　　* ondblclick：双击事件

　　　　* onmouseenter：鼠标划入事件

　　　　* onmouseleave：鼠标划出事件

　　　　* onresize：窗口变化

　　　　* onchange：改变下拉框

      <a href="javascript:void(0)" class="btn">按钮</a>
      <label for="add">请选择地区</label>
      <select name="add" id="add">
          <option value="">轩辕</option>
          <option value="">慕容</option>
          <option value="">欧阳</option>
          <option value="">上官</option>
      </select>
      <!--获取按钮-->
      <script>
          var btn = document.querySelector('.btn')
          btn.onclick = function () {
              console.log('单击');
          };
          btn.onbdlclick = function () {
              console.log('双击666');
          };
          btn.onmouseenter = function () {
              console.log('移入');
          };
          btn.onmouseleave = function () {
              console.log('移出');
          };
          var add = document.getElementById('add');
              add.onchange = function () {
                  console.log('下拉变化');
              };
          window.onresize = function () {
              console.log('窗口变化');
          };
      </script>

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

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

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

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

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

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

       <div id="box"></div>
       <script>
           var box = document.getElementById('box');
               box.style.width = "200px";
               box.style.height = "120px";
               box.style.marginTop = "20px";
               box.style.marginLeft = "auto";
       </script>

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

        <div id="box" class="box1" name="轩辕"></div>

        <script>
           #  // 操作标签属性
            var box = document.getElementById('box');
            alert(box.id);
            # // 修改ID
            box.id = "add";
            alert(box.className);
            # // 修改class
            box.className = 'a';
            # // setAttribute在这里是设置的意思
            box.setAttribute('hello','晚上好');
            # // 修改标签属性值

        </script>

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

     <script>
          # <!--基本的数据类型-->
        # // string
        var name = 'hallo';
        alert (typeof name)

         # // 数字
         var age = 18;
        alert(typeof age);

        # // 布尔
         var a = false;
         alert(typeof a);

        #  // undefined 未定义
         var b;
         alert(typeof b);

         # // 空数据
         var c = null;
         alert(typeof c);

         # // 对象数据
         var arr= [1,2,3,4,5];
         alert(typeof arr);

         var arr1 ={gander:"nan","age":18};
         alert(typeof arr1);

         # // 在这里加括号的作用是调用，函数不算数据类型
         var box = function () {
             alert("gander"+"的");
         }();
         alert(typeof box);
     </script>

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

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

　　21. js配合button修改元素：

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

22. js语法：

           <p id="demo"></p>
           <script>
           var x, y, z;
           x = 5
           y = 6;
           z = (x + y) * 10;
           document.getElementById("demo").innerHTML = z;

  ---------------------------------------------------------------------------------------------------------------------

          <h1>我的 Web 页面</h1>
          <p id="demo">一个段落。</p>
          <div id="myDIV">一个 DIV。</div>
          <script>
          document.getElementById("demo").innerHTML="你好 Dolly";
          document.getElementById("myDIV").innerHTML="你最近怎么样?";
          </script>

         # 函数可传参，调用
         <p id="demo"></p>
         <script>
         var x = function (a, b) {return a * b};
         document.getElementById("demo").innerHTML = x(4, 3);

         #函数的调用
         <p id="demo"></p>
         <script>
         function myFunction(a, b) {
             return a * b;
         }
         document.getElementById("demo").innerHTML = myFunction(10, 2);
         </script>

         # 函数可作为值调用但需要有retuen键
         <script>
         function myFunction(a, b) {
             return a * b;
         }
         var x = myFunction(4, 3);
         document.getElementById("demo").innerHTML = x;
         </script>

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

         <p><s>我的车是蓝色的。</s></p>
         <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 日 到指定日期的毫秒数。

36. 在checkbox复选框中checked用来表示选中与不选中。