• JS学习笔记(一)


    第一章:

             编写JS流程:

        1、  布局:HTML和CSS

        2、  样式:修改页面元素样式,div的display样式

        3、  事件:确定用户做什么操作,onclick(鼠标点击事件)、onmouseover(鼠标悬停)、onmouseout(鼠标移出)

        4、  编写JS:在事件中,用JS来修改页面元素样式

        5、  原理:响应用户的操作,对页面元素进行样式修改

    第二章:

                Javascript基础:

                        JS代码的引入:

                               外部链入式:

                                       <script type=”text/javascript” src=”js文件路径”></script>

                                内部js:

                                         <script>js代码</script>

                              数据类型:

                                                    var a=12;

                                                   数值类型number

                                                   alert(typeof a);

                                                   字符串string

                                                   a="hello";

                                                   alert(typeof a);

                                                   布尔类型boolean

                                                  a=true;

                                                   alert(typeof a);

                                                   函数类型function

                                                   a=function(){};

                                                   alert(typeof a);

                                                   对象object

                                                   a=document;

                                                   alert(typeof a);

                                                   没有定义的类型undefined

                                                   alert(typeof a);

                       

    •   变量名的命名规则:不以数字开头大小写字母、数字、下划线命名;(区分大小写);常用命名规则:驼峰命名法,首字母小写后面单词首字母大写开头;如:getDingShiQi
    •   变量的转换:

                                   parseInt(值);   将一个值转换为Int数据类型

                                   parseFloat(值); 将一个值转换为float数据类型

                                      隐式转换:

                                                                     Var a=5, b=”5”, c=”2”;

                                                                     先转换类型,再比较:

                                                                             a==b;

                                                                    不转换类型,直接比较

                                                                               a===b;

                                                                     不转换类型,+为连接符

                                                                             a+b;                   

                                                                     先转换类型,再进行运算,+为运算符

                                                                               a+b;

    •     变量的作用域:

          1、  全局变量:位于函数体外部的变量,所有函数均可调用与赋值;

          2、  局部变量:位于函数体中的变量,仅仅为其所在函数体中使用,其他函数定义相同的变量名不会冲突;

    • 闭包:子函数可以使用父函数里定义的函数

            

    •  求余运算符:%                var a=34; var c = a%10;  c为4;

            

    • 判断语句   Switch 语句:

                    语法:

                      switch(值或者变量)

                      {

                       case 值:

                                语句块;

                                break;

                       case 值:

                                语句块;

                                break;

                       default:

                                语句块;

                      }

             判断switch括号里面的值与case的值是否相等、相等则执行case 里的语句块,遇到break;则结束,否则继续执行下面的其他case里面的语句块直至遇到break; 跳出。若判断case里面没有相符合的,则执行default 下的语句块,这里的default相当于else

    • break,continue的区别: 一般在循环体中使用这两;break;跳出全部循环;continue; 跳出本次循环
    • 真假:为boolean数据类型;

        1、  非0的数字为真,0为假;

        2、  非空字符串为真,空字符串为假;

        3、  非空对象为真,空对象为假;

        4、  Undefined为假;

    • 可变参arguments 调用函数时传递多个参数形成一个arguments数组;可以直接用下标调用

             它,如arguments[0];

    • 提取非行间样式[只能用id的方式]:currentStyle为ie里面的

                                                   语法:document.getElementById("div1").currentStyle.width;

                                         getComputedStyle 为firefox里面的

                                                   语法:window.getComputedStyle(oBj,null).width;

    • 数组基础:

                       声明一个数组:var Arr = new Array();

                       声明并初始化:var Arr = [1,2,3,4,5];

                                Arr.push();        在数组尾部添加一个或者多个元素,并返回一个新的长度;

                                Arr.pop();          在数组尾部删除并返回最后一个元素;

                                Arr.unshift();    在数组头部添加一个或者多个元素,并返回一个新的长度;

                                Arr.shift();         在数组头部删除并返回第一个元素;

                               

                                Arr.sort();           对数组进行排序;按照默认顺序排序;

                                Arr.join(“,”);      在数组原有元素间插入元素”,”

                                Arr.concat(Brr);        连接Arr和Brr数组返回新的数组

    第三章:

                  定时器:var 定时器名=setInterval(tick, 1000);      设置定时器,每隔1000毫秒调用tick函数构建图片的src属性值

                                       Var 定时器名=setTimeout(tick, 1000);  设置定时器,隔1000毫秒调用tick函数构建图片的src属性值

                  清除定时器:

                                       clearTimeout(定时器名);

                                       clearInterval(定时器名);

    第四章:

          offsetLeft();   语法:oBj.offsetLeft(); 返回当前元素距离父元素左边缘的距离;

    第五章:

                  InnerHTML       语法:oBj.innerHTML;     innerHTML具有双向功能,通过它可以获取标签元素内容与设置标签元素内容;

    • 子节点和父节点:

          childNodes获取子节点   childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。childNodes.length获取长度

               利用children来获取子元素是最方便的,他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

                   firstChild来获取第一个子元素

                   使用firstElementChild来获取第一个子元素的时候,会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

              parentNode获取父节点

        parentElement和parentNode一样,只是parentElement是ie的标准。

               offsetParent获取所有父节点

        其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。

    欢迎来指正与提问。

     

    只为挨近你一点。
  • 相关阅读:
    关于java中的批注@SuppressWarnings
    Enumeration接口的用法
    java中的Properties类的操作
    编译java时出现(端口冲突)Address already in use: JVM_Bind<null>:1919
    jQuery画廊插件-GalleryView
    jQuery中用attr和prop获取checkbox的属性问题
    (报错记录)Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:
    JDK 和 JRE 的区别(转载)
    css属性之vertical-align详解
    this——笔记
  • 原文地址:https://www.cnblogs.com/aidian/p/8794855.html
Copyright © 2020-2023  润新知