HTML与JS相关知识点简要总结

这部分内容在之前都零零散散学习过,但是始终没有搭建起整套的学习框架,于是趁着小学期实习的这段时间,正好有整段的时间来学习一下,此博客用于记录HTML和JS的相关内容,后期关于JQuery、SSH框架、Oracle数据库等内容,敬请期待(偷笑脸)。

html与js代码融合的方式:
    1.src导入js文件
     2.在HTML中,将js属性放在<script>标签中,一般将其放在head



js两种数据类型:
  1.原始类型:boolean,undefines,string,number,null
  可使用typeof 变量名,显示出变量的类型
  注意:当变量值=null时,使用typeof会显示类型为object
  2.引用类型:通常叫作类
  eg:var c = new Student(); 使用typeof将显示为object属性


js事件驱动:
     函数定义格式:
          1.function 函数名(参数){
              函数体;
          }
          2.var 函数名 = function(参数){
              函数体;
          }
      注意:
          调用函数:参数名(参数值)
          函数不用声明返回值类型
          function中的参数不用声明类型
 

js中的事件:
      onload:页面加载
      onclick:鼠标单击
      onsubmit:表单提交,eg:onsubmit="return 函数名()",返回值为boolean类型
 
  JS中事件与函数的绑定方式:
      1.通过标签的事件属性绑定:<xxx onclick=""></xxx>
  eg:
      <script>
          function Oncli(){
              alert(“鼠标单击成功”);
          }
  </script>
 
  <input type="button" value="点击我试试" onclick="Oncli()" />
      2.通过派发事件进行绑定:
  eg:
  <body>
          <input type="button" value="派发事件绑定1" id="btn1"/>
        <input type="button" value="派发事件绑定2" id="btn2"/>
    </body>
    <!--由于获取在后面,因此有时需要将<script>中的内容放到body后面-->    
    <script>
            document.getElementById("btn1").onclick = function(){
                alert("派发事件绑定1");
            }
            var dispatch = function(){
                alert("派发事件绑定2");
            }
            document.getElementById("btn2").onclick = dispatch;
    </script>
 
 


js获取元素值
      1.获取整个元素的内容:
          var obj = document.getElementById("id值");
      2.获取元素中的具体value值:
          obj.value;
      3.获取元素标签体中的内容:
          obj.innerHTML;
 
 

js表单验证步骤:
      1.创建表单内容
      2.在<form>标签中,加入onsubmit =“return checkform()”,
          为true则提交,否则显示警告信息
 

轮播图步骤分析:
      bom中Windows对象有定时器方法
 定时器:
      var id = setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数,周期性。
      var id = setTimeout(code,毫秒数):延迟指定的毫秒数后执行一次函数,只执行一次
 清除定时器:
      clearInterVal(id);
      clearTimeout(id);
 


编写函数设置css样式
  eg:
      document.getElementById("id值").style.属性 =“”;
  注意:
      此处的属性与css中样式不同的点是,如果属性名称中含有“-”,在此处去掉,将后面一个单词首字母大写。
  eg:
      background-color改为:backgroundColor
 
 


广告展示又隐藏技术分析:
      1.先设置展示的界面,setInterVal(showad,间隔)函数,展示ad
      2.在showad()中,编写setTimeOut(hidead,间隔)函数,隐藏ad
      3.限制次数,设置全局变量count(次数)记录想要展示的次数,
      4.设置全局变量timer,用于清空计时器
  eg:
 
 
 
 


windows对象:
  所有的浏览器有5个对象:
      1.window
      2.history:
          (1)forward():前进
          (2)back():后退页面
          (3)go(int):
                  go(1) : 相当于forward
                  go(-1) : 相当于back
      3.location:地址栏
          (1)location.href :相当于获取URL
          (2)location.href =“....” :设置URL的值
      4.navigater
      5.
  window.属性名 等价于 直接使用属性名
 常用的 方法:
  (一)消息类型:
      1.alert(“”):警告信息
      2.confirm(“你确定要删除吗?”):确认框,返回值为Boolean类型
      3.prompt(“请输入您的姓名”):输入框,返回值为输入的值
  (二)定时器:
         1.设置定时器 setTimeOut(,)、setInterVal(,)
          2.清除定时器clearTimeOut(,)、clearInterVal(,)
  (三)打开和关闭
 



表单校验:
      事件:提交表单:onsubmit,文本失去焦点:onblur;文本获取焦点:onfocus
      function中this是指当前的元素
  <script>
          var arr = new Array(4);
          arr[0] = new Array('吉林市','长春','哈尔冰','鞍山');
          arr[1] = new Array('成都市','德阳','酱油','绵阳');
          arr[2] = new Array('南宁市','南昌','厦门','广州');
          function selCity(index){
              var cities = arr[index];
              document.getElementById("city").innerHTML = "<option>--请选择--</option>";
              for(i=0;i<cities.length;i++){
                  document.getElementById("city").innerHTML += "<option>"+cities[i]+" </option> " ;
              }
          }
      </script>
    <body>
        <form >
            请选择省:
            <select id="province" onchange="selCity(this.value)">
                <option>--请选择--</option>
                <option value="0">黑龙江</option>
                <option value="1">四川</option>
                <option value="2">杂乱</option>
            </select>
            <select id="city" >
                <option>--请选择--</option>
            </select>
            <input type="submit" value="提交" />
        </form>
    </body>


引用类型:
     String
      Boolean
      Number
      Array
      Date
      RegExp : 正则表达式
          语法:
              直接量语法    /正则表达式/参数
              直接量语法    /正则表达式/
              
              new RegExp("正则表达式")
              new RegExp("正则表达式","参数")
          参数:
              i:忽略大小写
              g:全局
          常用方法:
              test():返回值为boolean
      Math
      全局:
          eval()解析字符串的js代码


DOM对象获取属性的方法 (4种):
     1.document.getElementById()
      2.document.getElementsByClassName()
      3.document.getElementsByTagName()
      4.document.getElementsByName()
 

原文地址:https://www.cnblogs.com/somedayLi/p/9615397.html