day16--HTML、CSS、JavaScript总结

时间:2022-10-25 21:02:50

    HTML

一大堆的标签:块级、行内

 CSS

  position

  background

  text-align

  padding

  font-size

  background-image

  z-index

  opacity

  float(clear:both)

  line-height

  border

  color

  display

  补充:页面布局

JavaScript

  6.for循环

      for (var item in [11,22,33,44]){

    console.log(item)

    }

   for (var i = 0;i<arra.length;i=i+1){

    break;}

  while(条件){}

  7.条件语句

  if(条件){} else if(条件){结果} else{结果}

switch(name){case:"1|:console.log(123)

        break;

        case:"2":console.log(456);

        default:console.log(789);}

  8.函数

      function func(arg){

    }

   普通函数

    function func(){

    }

   匿名函数:

    setInterval(function(){},5000)

   自执行函数:

    function func(){}

    (function(arg){

      console.log(arg);

    })()                #自执行函数,自动执行函数

      自执行函数就是函数创建完毕之后,整体括起来,在外面加上一个(),就能够自动执行(def func():print(66666))()自动触发执行

            序列化和饭序列化

   JSON.stringify(obj)     #把对象转化为字符串  obj = [1,2,3,4,5]   con = JSON.stringify(obj)   >: "[1,2,3,4,5]"

      JSON.parse(obj)         #把字符串对象转换为原有形式,如列表,字典形式

      10、转义

    客户端(cookie)   =》  服务器端

    转义之后保存到硬盘上,保存用户登录状态,保存到本地cookie中,需要转义。

    将数据经过转义后,保存在cookie中

    encodeURI()     #转义字符,将中文转换为,转义后的URL地址

    encodeURIComponent( )   转义URI组件中的字符

    decodeURI()     #进行转义,把转换后的URL进行解码

    decodeURIComponent( )   URI组件中的未转义字符

   11.eval

 JavaScript

      eval()

   12.时间

    Date类

    var d = new Date()

   13.作用域

    JavaScript:以函数作为作用域

    function func(){

      if(1==1){var name="alex";

        }

        console.log(name);

        }

    func()

    =================================1、以函数作为作用域=====================================

    =================================2、函数的作用域在函数未被调用之前,已经创建================ 

    =================================3、函数的作用域存在作用域链,并且也是在被调用之前创建=======

day16--HTML、CSS、JavaScript总结

JavaScript的作用域是函数级别的,以函数块为作用域,从内层开始查找作用域。

function func(){

  var xo = "eric";

  function inner(){

    console.log(xo);

  }

  var xo = "tony"

  return inner;

  }

  var ret = func()

  ret()

  执行结果是“tony",为什么呢?因为内层作用域没有执行,下面"tony"替换了"eric",最后调用的时候,"eric"已经被修改为"tony"。

  14.JavaScript面向对象

      function Foo(n){

    this.name = n;

    this.sayName = function(){

      console.log(this.name);

      }

    }

   var obj = new Foo("we");

  a.this带指对象(python self)

  b.创建对象时,new函数()

    DOM

  间接查找

    文件内容操作:

      innerText                           #仅获取文本

      innerHTML                 #获取全部内容

      value                                  #input标签中的value值,能够设置

      value                                 #select标签中的<option value="n">值也能够修改,变换选择的选项

      selectedIndex                     #select中的索引值

    CSS样式

      className

      classList.add

      classList.remove

      obj.style.fontsize="16px"          #修改标签中的样式,给style添加属性

    属性操作

      setAttribute(属性名,值)                            #给属性设置值

      removeAttribute(属性值)                          #删除属性值

      getAttribute(属性名)                                  #获取属性

    创建标签,并添加到HTML中 

    提交表单

    document.getElementById("f1").submit()

    其他:

        console.log()     alert      confirm(信息)      v:true    false

     location.href    获取当前网页的url      location.href="url|"   跳转到某个网页

        setInterval(函数,时间)    #定时器,一直在执行中。

        clearInterval(obj);     取消定时器

     setTimeout(函数,时间)    定时器只执行一次

     clearInterval(obj)     清除定时器

    事件:

     行为   样式   结构   相分离的页面?

     js          css      html

     绑定事件两种方式:

      a.直接标签绑定,onclick="xxxx();"

      b.先获取Dom对象,然后进行绑定

        document.getElementById("xx").onfoucs

        document.getElementById("xx").onfoucs

    this,当前触发事件的标签

     a.第一种绑定方式

      <input id="i1" type="button" onclick="ClickOn(this)">

      function.ClickOn(self){

        //self  当前点击的标签

        }

     b.第二种绑定方式

      <input id="i1" type=button">

      document.getElementById("i1").onclick = function(){

        //this 带指当前点击的标签

        }