day 15 html(2) css,javascript,dom

一、CSS补充

  position:fixed =>固定在页面的某个位置;

      absolute=>绝对定位,不能固定某个位置,通常与relative搭配使用

      <div style="position:relative;">

        <div style="position:absolute;top:0;right;0;"></div>

      <div>

      放在父类标签的某个位置

      用fposition:fixed属性可以放置多层,叠加顺序由z-index决定,数值越大越靠上

      opcity:0.5设置透明度

  当放置的图片过大时,可以通过div 中的overflow:hidden或auto来设置隐藏多余部分或出现滚动条

  <div style="height: 200px; 200px;overflow: auto;">
   <img src = 'img/111.jpg'/>
  </div>
 
  hover当鼠标移到相应标签时,以下属性才生效
  .pg-header .logo:hover {
   background-color: blue;
  }
  background-image:url('111.jpg') 设置背景色,如果图片过小,则会重复叠放
      background-repeat:no-repeat epeat-x epeat-y设置叠放的方向或不叠放
      background-position-x:
      background-position-y:指定显示图片的起始位置,实现大图片的显示定位
      background:可以把上述属性加入其中

二、JavaScript
  独立的语言,浏览器具有js解释器
  编写js程序,需要语句末尾添加";",切记
  一般存在于html中,可以在head头中添加,可以创建js文件然后在<script src="js文件路径"></script>中引用,js路径可以是网络路径
  <script type='asdf/javascript'>
    js代码
  </script>

  html从上到下解释,如果放在head中,下边body中的东西得不到执行
  所以《script》的调用最好放在body的最下边

  js的注释//和/*注释内容*/
  写js代码:
    ——html文件中编写
    ——临时文件可以在浏览器终端console中编写查看结果

  变量:
  JS:
    name = 'alex'; #全局变量

    var name = 'eric' #局部变量

  基本数据类型
  数字(number)
    parseInt() 转换为整型
    parseFloat() 转换为浮点型
  字符串(string)
    a.charAt(n):获取第n个位置的字符
    a.substring(m,n)获取m到n的字符串
    a.length获取字符串长度
    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个组内容;
          $&:当前匹配的内容;
          $`:位于匹配子串左侧的文本;
          $':位于匹配子串右侧的文本
         $$:直接量$符号    
  列表(数组)
     a = [11,22,33]
      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( )         对数组元素进行排序
  字典
    a={'k1':2,'k2':3,2:5}
  布尔类型 :小写
    true
    false

  条件语句
    if(条件){
    }else if(条件){
    }else if(条件){
    }else{}
    ==值相等
    ===值相等、类型相同
    !=值不等
    !=值不等,类型不同
    &&与 ||或
  for循环
    a=[11,22,33]
  1、  for (var item in a){//可以循环数组,字典
      console.log(item,a[item]);
    }
  2、  for (var i=0;i<a.length;i=i+1){//只能循环数组
      console.log(a[item]);
    }
  函数
    js中编写函数需要使用function 函数名(形参1,形参2,...){函数体}

  alert(弹出框内容) 弹出一个窗口

  setInterval(‘执行的代码’,间隔(ms))每间隔多少毫秒执行一次函数,定时器

  console.log()在console中打印一条信息


三、dom
 直接查找
  1、找到标签
    documnent.getElementById('i1')//根据id获取单个元素
    document.getElementById(‘name1’)
    document.getElementById             根据ID获取一个标签
    document.getElementsByName          根据name属性获取标签集合
    document.getElementsByClassName     根据class属性获取标签集合
    document.getElementsByTagName       根据标签名获取标签集合

  2、操作标签
    标签.innerText //获取标签中的文本内容
    className//设置class
    classList.add('样式名')//添加指定样式
    classList.remove('样式名') //删除指定样式

    ps:
      <div onclick='func();'>点我</div>
      <script>
        function fun(){
        }
      </script>

    checkbox
      获取值
      checkbox对象.checked=true或false设置checkbox选与不选

 间接查找
    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素











原文地址:https://www.cnblogs.com/laodong1983/p/9501585.html