JavaScript基础知识小结

1.JavaScript的简介

  是基于对象和事件驱动的语言，应用于客户端

2.js的特点

  * 交互性：信息的动态交互   * 安全性：js不能访问本地磁盘的文件   * 跨平台性：只要能支持js的浏览器，都可以运行

3.JavaScript与Java的区别

      * 开发公司不同    * js是基于对象的，java是面向对象的    * java是强类型的语言，js是弱类型的语言    * js只需要解析就可以执行，而java需要先编译再执行

4.js的组成

    * ECMAScript：有ECMA组织制定的js的语法，语句等   * BOM:浏览器对象模型   * DOM：文档对象模型

5.js与html的结合方式

    * 使用一个标签      <script type="text/javascript">js代码</script>   * 使用script标签，引入一个外部的js文件      <script type="text/javascript" src="js代码路径"></script>     使用此种方式时，就不要再script标签里面再写js代码了,不会执行

6.js的原始类型和声明变量

   * string:字符串    * number:数字类型    * boolean:布尔类型    * null:表示对象引用为空    * undifined:定义一个变量，没有赋值     ** 注意：定义变量，都使用关键字var     ** typeof(变量名称);查看当前变量的数据类型     ** 直接向页面输出语句         document.write();         可以向页面输出固定值，变量和HTML代码    **  js语句和java语句类似    **  字符串的相加和相减操作          var str="123";  alert(str+1);       * 相加的时候，和java一样，做的是字符串连接       * 相减的时候，做的是相减的运算，如果不是数字，会提示NaN    ** == 和 ===的区别        ==：比较的只是值        ===：比较的是值和类型

7.js数组的定义

   * var arr=[1,"2",true];  定义一个数组，包含三个元素    * var arr=new Array(5);  定义一个数组，数组的长度是5    * var arr=new Array(1,2,4);  定义一个数组，包含三个元素     ** 数组有属性length     ** 数组的长度是可变的     ** 数组可以存放不同数据类型的数据

8.js的函数

  * 1.使用关键字function    ** function 方法名(参数列表){   方法体;   返回值可有可无(根据实际需要);       }   * 2.匿名函数    ** function(参数列表){     方法体;   返回值可有可无(根据实际需要);       }       **<script type="text/javascript"> function add(a,b){ var sum=a+b; return sum; } alert(add(2,6)); </script>    **<script type="text/javascript"> var add=function(a,b){ var sum=a+b; alert(sum); } add(2,6);       </script>   * 3.动态函数(用得少，了解一下):使用到js里的一个内置对象Function     new Function("参数列表","方法体和返回值");    <script type="text/javascript"> var add=new Function("a,b","var sum=a+b;return sum;"); alert(add(2,6));   </script>

9.* js的全局变量和局部变量

   -- 全局变量：在script标签里面定义的变量，这个变量在页面中的js部分都可以使用，即：                 在方法外部使用，在方法内部使用，在另一个script标签中使用    -- 局部变量：在方法发内部定义一个变量，只能在方法内部使用   * script标签放在的位置     建议把script标签放到</body>后面    IE浏览器自带调试工具，F12调试

10.js的string对象

   * 方法和属性     ** 属性 length:字符串的长度     ** 方法       ***与html相关的方法          -bold():加粗         -fontcolor():设置字符串的颜色 -fontsize():设置字体的大小 -link():将字符串显示成超链接 -sub():下标 -sup():上标       ***与java相似的方法          -concat():连接字符串 -charAt():返回指定位置的字符 -indexOf():返回字符串位置 -split():切分字符串成数组 -replace():替换字符串   *传递两个参数：第一个参数是原始字符，第二个参数是替换成的字符 -substr()与substring()：截取字符串   *substr():两个参数，从第几位开始，向后截取几位              *substring():两个参数，从第几位开始，到第几位结束， 但不包括结束位

11.js的Array对象

   * var arr=[];  创建一个空数组    * 属性：length    * 方法：     ** concat();  数组的连接     ** join();   根据指定的字符分割数组     ** push();   向数组末尾添加元素，并返回数组新的长度                 注意：如果添加的是一个数组，这时候把数组当做一个整体字符串添加进去     ** pop();  表示删除最后一个元素，并返回删除的那个元素     ** reverse(); 颠倒数组中的元素的顺序

12.js的Date对象

   * js获取当前时间         var date=new Date(); document.write(date);//Mon Aug 08 2016 09:58:22 GMT+0800 (中国标准时间) //转换成习惯的格式 document.write("<br/>"); document.write(date.toLocaleString());     * 获取当前年的方法       getFullYear(); 得到当前的年      ** var date=new Date();   document.write(date.getFullYear());    * 获取当前月的方法      getMonth(); 获取当前的月份       返回的值是0-11，如果要得到准确的月份，加1     ** var date=new Date();        var mon=date.getMonth()+1;        document.write("month:"+mon);    * 获取当前星期的方法       getDay(); 获取当前的星期         返回的值是0-6，星期日返回的是0      **var date=new Date();        document.write("星期:"+date.getDay());    * 获取当前天的方法      getDate(); 0-31      **var date=new Date(); document.write("day:"+date.getDate());    * 获取当前小时的方法      getHours(); 0-23      **var date=new Date(); document.write("hour:"+date.getHours());    * 获取当前分钟的方法      getMinutes(); 0-59      **var date=new Date(); document.write("minute:"+date.getMinutes());     * 获取当前秒的方法         getSeconds(); 0-59      ** var date=new Date();   document.write("second:"+date.getSeconds());     * 获取当前毫秒数的方法          getTime(); 返回的是1970.1.1至今的毫秒数      ** var date=new Date(); document.write("毫秒数:"+date.getTime());

13.js的Math对象

   *属性：PI               document.write(Math.PI);    *里面的都是静态方法，使用时可以直接Math.方法名()     **cell(x); 向上舍入 10.4 → 11     **floor(x); 向下舍入 10.7 → 10     **round(x); 四舍五入     **random(); 返回0-1之间的随机数(伪随机数)       得到0-9的随机数       Math.floor(Math.random()*10)     **pow(x,y);  x的y次幂

14.js的全局函数

   *不属于任何一个对象，直接写名称使用     **eval(); 执行js代码(如果字符串是一个js代码，使用此方法直接执行)       ***var str="alert('0123456789')";           eval(str);     **encodeURI():对字符进行编码       decodeURI():对字符进行解码     **encodeURIComponent()和decodeURIComponent()     **isNaN():判断当前字符串是否为数字       特别注意：如果是数字，返回false             如果不是数字，返回true     **parseInt():类型转换       parseFloat():类型转换

15.js函数的重载

   ** 定义：方法名形同，参数不同    ** js是否存在重载      —— js里面不存在重载      —— 但可以通过其他方式模拟重载的效果，通过arguments数组来实现

16.js的bom对象

   *bom：broswer object model 浏览器对象模型    *有哪些对象     **navigator: 获取客户机(浏览器)的信息       -- navigator.appName     **screen:获取屏幕的信息        --screen.width         --screen.height     **location:请求url地址       --href属性         ***获取请求的url地址     document.write(location.href); ***设置url地址   页面上设置“百度”按钮，鼠标点击就会跳转百度页面   <body>     <input type="button" value="百度" οnclick="hrefClick();"/>     <script type="text/javascript"> function hrefClick(){ location.href="http://www.baidu.com"; }     </script>   </body>     **history：请求的url的历史记录       -- history.back();  history.go(-1);到访问的上一个页面         -- history.forward(); history.go(1);到访问的下一个页面     **window：窗口对象       --顶层对象：所有的bom对象都是在window里面操作的       --跨页面操作：opener属性：得到创建此窗口的窗口       --方法         ***window.alert(); 页面显示一个框，显示内容   简写为alert(); ***confirm(); 确认框 ***prompt(); 输入的对话框   用法：prompt(text,defaultText);   prompt("请输入一个数：","0"); ***open(); 打开一个新的浏览器窗口或查找一个已命名的窗口   用法：open(URL,name,features,replace); 一般只用前三个参数   即：open("打开的新窗口的url地址","","窗口的特征，比如说窗口的宽度高度");   -- 创建一个按钮，点击后打开一个新的窗口

     <body> 

 <input type="button" value="窗口" οnclick="openNew()"/>    <script type="text/javascript">  function openNew(){ open("biaodan.html","","width=600,height=500"); //open("http://www.baidu.com","","width=600,height=500"); }   </script>      </body> ***close(); 关闭窗口(浏览器兼容性不好) ---定时器 ***setInterval(); 指定的周期(以毫秒计)来调用函数或计算表达式   -- 用法：setInterval("js代码",毫秒数);  1秒=1000毫秒   setInterval("alert('定时操作设置成功！');",3000);  ***setTimeout();  在指定是毫秒后调用函数或计算表达式,只执行一次       setTimeout("js代码",毫秒数);  ***clearInterval(); 取消由setInterval()设置的timeout   -- 用法：clearInterval(id); id必须是由setInterval()返回的ID值 ***clearTimeout();  取消由setTimeout()设置的timeout   -- 用法：clearTimeout(id); id必须是由setTimeout()返回的ID值

17.js的dom对象

   * dom: document object model: 文档对象模型    * 解析过程      根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成      对象      --document对象：整个文档      --element对象：标签对象      --属性对象      --文本对象      --Node节点对象：这个对象是这些对象的父对象        **如果对象里面找不到想要的方法，这时候到Node对象里面去找

18.DHTML

   动态的HTML，它不是一门语言，是多项技术综合体的简称。    包括html,csss,dom,javascript

19.document对象

   *常用方法：      -- getElementById()返回对拥有指定id的第一个对象的引用         **通过id得到元素(标签)      -- getElementsByName() 返回带有指定名称的对象集合         **通过标签的name的属性值得到标签 **返回的是一个对象集合(数组)      -- getElementsByTagName()  返回带有指定标签名的对象集合         **getElementsByTagName("标签名称")      -- write() 向页面输出变量(值),向页面输出html代码      -- createElement("标签名称")方法：创建标签      -- createTextNode("文本内容")方法：创建文本      appendChild()方法

20.Elememt对象

   *操纵Elememt对象的属性(首先要获取到element，使用document里面相应的方法获取)     -- 获取属性里面的值：getAttribute(name)方法     -- 设置属性的值：setAttribute(name,value)方法                  注意：value的值无法删除     -- 删除属性：removeAttribute(name)方法    *在Elememt对象中查找Elememt对象(获取标签下的子标签)      --使用Node对象中的属性childNodes,但是此属性的兼容性很差      --在Elememt对象的范围内，可以用来查找其他节点的唯一有效方法就是        getElementsByTagName()方法，而该方法返回的是一个集合        ctrl+F5 无缓存刷新(IE浏览器)

21.Node对象属性

   -- nodeName       *获取属性：getAttributeNode()方法    -- nodeType    -- nodeValue    --使用dom解析html时，会将html里面的标签，属性和文本都封装成对象    --                nodeType     nodeName      nodeValue       标签节点       1         大写的标签名称     null       属性节点       2             属性名称           属性的值       文本节点       3                #text               文本内容     - 父节点，子节点和同辈节点     -- 父节点：parentNode              * parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点          * document节点没有父节点                 -- 子节点：             * childNodes:获取指定节点的所有子节点的集合       * firstChild:获取指定节点的第一个子节点         * lastChild: 获取指定节点的最后一个子节点     -- 同辈节点：             * nextSibling:返回个给定节点的下一个兄弟节点         * previousSibling:返回一个给定节点的上一个兄弟节点    

22.操作DOM节点树

   *插入节点          -- appendChild()方法:                    **添加子节点到末尾      **有剪切粘贴的效果(特点之一) -- insertBefore(newNode,oldNode)方法       **插入一个新节点，节点不存在，创建         1.创建标签 2.创建文本 3.把文本添加到标签中 注意：没有insertAfter()方法     *删除节点          -- removeChild()方法：通过父节点删除，不能自己删除自己     *替换节点          -- replaceChild(newNode,oldNode)方法：              通过父节点替换，不能自己替换自己     *复制节点：cloneNode(boolean)方法，其中，参数boolean是判断是否复制子节点    移动节点：由以下三种方法组合完成         -- 查找节点：           * getElementById()：通过节点的id属性，查找对应节点   * getElementsByName()：通过节点的name属性，查找对应节点   * getElementsByTagName()：通过节点名称，查找对应节点 -- 插入节点：           * appendChild()方法                              * insertBefore(newNode,oldNode)方法 -- 替换节点：replaceChild(newNode,oldNode)方法

23.innerHTML属性

   *浏览器几乎都支持该属性，但不是DOM标准的组成部分    *innerHTML属性可以用来读，写某给定元素里的HTML内容    *innerHTML属性多与div或span标签配合使用    作用：1.获取文本内容          2.向标签里面设置内容(可以是html代码)

24.表单提交方式

   *使用submit提交    <form>    <input type="submit" value="提交"/>    </form>         *使用button提交表单    <form id="fm">       <input type="button" οnclick="tijiao();"/>     </form>     <script type="text/javascript"> function tijiao(){ var fm=document.getElementById("fm"); fm.action="xxx.html"; fm.submit(); }     </script>    *使用超链接提交     <a href="xxx.html?username=abc">提交</a>    *鼠标事件     onclick:鼠标点击     onchange:改变内容(一般和select一起使用)     onfocus:得到焦点     onblur:失去焦点