美文网首页
JS基础/结构语法/类型相关/元素相关/className属性/

JS基础/结构语法/类型相关/元素相关/className属性/

作者: 昵称不能太随便 | 来源:发表于2016-08-10 14:49 被阅读0次

    一.js引入方式

    1.写在head中/body中
      window.onload = function(){}
    
    2.写在body下面,
    3.外部文件引入(外部文件需要加window.onload)
      ```
    <script src= ""></script>
     ```
    

    二.基础知识

    1.调试方式
        1> `alert(文字')`;
        2>`console.log()`;
        3>`document.title = ""`;
    2.变量以及命名规则
       -由数字字母下划线组成
       -不能以数字开头
       -不能使用系统关键字
       -见名知意  建议驼峰命名法
    3.基础数据类型
       -整形
       -浮点类型
       -字符串
       -布尔类型
       -undefind类型
       -null类型
     4.运算符
        用于执行变量与/或值之间的算术运算。
        % 求余数 (保留整数)+ + 累加
        x=++y   x=y+1— — 递减 x= - -y x=y-1
        如果“++”位于运算数之前,先对运算数进行增量,然后计算运算数增长后的值。
        如果“++”位于运算数之后,先计算运算数未增长之前的值,然后对运算数增量
     5.逻辑运算符
          逻辑与  &&
           逻辑或    ||
           逻辑非      !
       **注意短路现象**
    

    三.三大结构

     1:顺与结构
         从上到下 依次执行
      2: 分支结构
          1. if(条件) {
                代码块
             }
          2. if(条件){代码块
               }else {代码块
               }
           3.if(条件){代码块
               }else if(条件) {代码块
               }
            4.switch(n) {
                   case 1:
                        执行代码块 1
                         break;
                   case 2:
                          执行代码块 2
                          break;
                   default:
                   n 与 case 1 和 case 2 不同时执行的代码
                   }
     3.循环语句 
            1:  while(条件){
                     代码块}
            2:do{代码块} while(条件);
            3:for(条件) {
                 代码块}
    

    四.类型相关

     ###变量
          1:全局变量,从定义开始,一直到文档的之后
              无论从任何位置,定义变量不加var关键字都会成为全局变量
          2:局部变量
            从定义开始,直到包含它的大括号结束为止
             当局部变量和全局变量发生重复定义的时候  使用局部变量
     ###数组
        Array.length        获取数组长度
        Array.concat()        连接两个或更多的数组,并返回结果。
        Array.join()        把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
        Array.pop()     删除并返回数组的最后一个元素
        Array.push()        向数组的末尾添加一个或更多元素,并返回新的长度。
        Array.reverse()        颠倒数组中元素的顺序。
        Array.shift()        删除并返回数组的第一个元素
        Array.slice()        从某个已有的数组返回选定的元素
        Array.sort()        对数组的元素进行排序
        Array.splice()        删除元素,并向数组添加新元素。
        Array.toSource()        返回该对象的源代码。
        Array.toString()        把数组转换为字符串,并返回结果。
        Array.toLocaleString()        把数组转换为本地数组,并返回结果。
        Array.unshift()        向数组的开头添加一个或更多元素,并返回新的长度。
        Array.valueOf()        返回数组对象的原始值
    ###类型转换
        parseInt()     值转换成整数
        parseFloat()    值转换成浮点数
        Boolean(value)——把给定的值转换成Boolean型; 
        Number(value)——把给定的值转换成数字(可以是整数或浮点数); 
        String(value)——把给定的值转换成字符串。
    

    五.元素的获取

    1、通过ID选取元素(getElementById)
       1)使用方法:document.getElementById("domId")  其中,domId为要选取元素的id属性值   
       2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,
                    并且会返回匹配name属性的元素。
    2、通过名称name选取元素(getElementsByName)
        1)使用方法:document.getElementsByName("domName")
            其中,domName为要选取元素的name属性值
        2)说明:a. 返回值是一个nodeList集合(区别于Array)
                b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、iframe、img)
    。这是因为name属性是为了方便提交表单数据而打造的。
                c. 为form、img、iframe、applet、embed、object元素设置name属性时,
                    会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象
        3)兼容性:IE中ID属性值匹配的元素也会一起返回
    3、通过标签名选取元素(getElementsByTagName)
        1)使用方法:element.getElementsByTagName("tagName") 
           其中,element是有效的DOM元素(包括document)
                  tagName是DOM元素的标签名
        2)说明:a. 返回值是一个nodeList集合(区别于Array)
                 b. 该方法只能选取调用该方法的元素的后代元素。
                 c. tagName不区分大小写 
                d. 当tagName为*时,表示选取所有元素(需遵从b.规则)
                e. HTMLDocument会定义一些快捷属性来访问标签节点。
                    如:document的images、forms、links属性指向<img>、<form>、<a>标签元素集合,
                    而document.body和document.head总是指向body和head标签
                    (当未显示声明head标签时,浏览器也会创建document.head属性
    )
    4、通过CSS类选取元素(getElementsByClassName)
        1)使用方法:element.getElementsByClassName("classNames")
            其中,element是有效的DOM元素(包括document)
                  classNames是CSS类名称的组合(多个类名之间用空格,可以是多个空格隔开),
                  如element.getElementsByClassName("class2 class1")
                    将选取elements后代元素中同时应用了class1和class2样式的元素样式名称不区分先后顺序)
        2)说明:a. 返回值是一个nodeList集合(区别于Array)
                 b. 该方法只能选取调用该方法的元素的后代元素。
        3)兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法
    5、通过CSS选择器选取元素
        1)使用方法:document.querySelectorAll("selector") 
           其中,selector为合法的CSS选择器 
       2)说明:a. 返回值是一个nodeList集合(区别于Array)
        3)兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法
    

    六.className属性

     设置元素的clas属性值   会覆盖掉之前的
    

    七.input的checked

         判断一个选项卡是否是选中状态;
         元素.checked = true

    相关文章

      网友评论

          本文标题:JS基础/结构语法/类型相关/元素相关/className属性/

          本文链接:https://www.haomeiwen.com/subject/nukjsttx.html