一、JS中的函数
【关于注释】
/**
【文档注释】:开头两个*。写在函数上方,在调用函数时可以看到文档上方的描述信息。
*/
 
// 单行注释
/* 多行注释 */
1、函数的声明及调用

 (1)函数的声明格式
  function 函数名(参数1,参数2,......){
      //函数体代码
      return 返回值;
  }
  
 (2)函数的调用

  ① 直接调用:函数名(参数1的值,参数2的值,......);
  ② 事件调用:直接在HTML标签中,直接使用事件名="函数名()";
  eg. <button onclick="sayHello('Hello,Genista!','pink')">点击按钮,打印内容</button>
 【 函数的注意事项 】
  ① 函数名必须要符合小驼峰法则,首字母小写,之后每个单词首字母大写;
  ② 函数名后面的括号()中,可以有参数,也可以无参数,分别称为有参函数和无参函数。
  ③ 声明函数时的参数列表,称为形参列表,形式参数,即变量的名字;
    eg. function sayHello( str,color ){}
   调用函数时的参数列表,称为形参列表,实际参数,即变量的赋值;
    eg. sayHello("Hello,Genista!","blue");
    ④ 函数的形参列表个数与实参列表个数没关系;
   函数的参数个数,取决于实参列表;实参多了不出错,只是没有形参接收他的值。
   如果实参列表的个数 < 形参列表,则未赋值的形参,将为undefined;
    ⑤ 函数可以有返回值,使用return返回结果,调用函数时,可以使用一个变量接收函数的返回结果。
    如果函数没有返回值,则接收结果为undefined;
    eg. function func(){
      return "haha";
       }
      var num = func(); // num = "haha"
   ⑥ 函数中变量的作用域:
    在函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
    在函数中,不用var声明的变量,为全部变量,在函数外面也能访问;
    函数的形参列表,默认为函数的局部变量,只能在函数内部使用;
   ⑦ 函数的声明与函数的调用没有先后之分,即可以再声明函数前调用函数;
    eg. func(); //声明func之前调用也是可以的
       function func(){}
2、匿名函数的声明和使用
  (1)声明一个匿名 函数,直接赋值给某一个事件;
    window.onload = function(){} 窗口加载完成函数
  【区别】function 函数名(参数1,参数2,......){
            //函数体代码
            return 返回值;
      }
  (2)匿名函数表达式。(变量函数-即 将匿名函数赋值给一个变量)
      声明: var func = function(){}
      调用: func();
    【注】使用匿名函数表达式时,函数的调用语句,需要放在函数声明语句之后!!!(与普通函数的区别)
  (3)自执行函数。
    ① !function(){}(); //可以使用多种运算符开头,但一般用!
      !function(形参列表){}(实参列表);
      ② ( function(){}(); ) //使用()将函数及函数后的括号包裹
      ③ ( function(){})(); //使用()只包裹函数部分
    三种写法的特点:
      ① 使用!开头,结构清晰,不容易混乱,推荐使用;
      ② 官方推荐写法,能够表明匿名函数与调用的()是一个整体。
      ③ 无法表明匿名函数与调用的()的整体性,不推荐使用。
  (4)JS代码的执行顺序问题
    JS代码在运行时,会分为两大部分:
    检查装载阶段:会先检测代码的语法错误,进行变量、函数的声明;
    执行阶段:变量的赋值和函数的调用等
    以下面代码为例:
console.log(num);       //undefined
var num = 10; func1(); //函数可以正常执行
var function func1(){} func2(); //函数不能正常执行,打印func2时显示undefined。
var func2 = function(){} //函数表达式(匿名函数)
【原因】:上述代码执行顺序为:
    检查装载阶段运行的代码 —— 变量、函数的声明
      var num;
      var function func1 (){}
      var func2;
    执行阶段运行的代码 —— 变量的赋值、函数的调用
      console.log(num);
      num = 10;
 
      func1();
 
      func2();
      var func2 = function(){}
3、函数的内部属性
 (1)arguments 对象数组
   ① 作用:用于储存调用函数时的所有实参。
     当我们调用参数,并使用实参赋值时,实际上参数列表已经保存到arguments数组中,
     可以在函数中,使用arguments[n]的形式调用。n从0开始。
   ② arguments数组的个数,取决于实参列表,与形参无关。
    但是,一旦第n个位置的形参、实参、arguments都存在时,形参将与arguments绑定,同步变化, 即,在函数中修改形参的值,arguments也会改变,反之,也成立。
  ③ arguments.callee 是arguments的重要属性。
    表示当前所在函数的引用地址。 在函数里面可以使用arguments.callee调用函数本身,
    在函数内部调用函数自身的写法,叫做递归。
  递归分为两部分:递和归。以递归调用语句为界限,可以将函数分为上下两部分。
    递:当函数执行上半部分遇到自身的调用语句时,继续进入内层函数,在执行上半部分,直到执行完最内层函数。
    归:当最内层函数执行完以后,再从最内层函数开始,逐渐执行函数的下半部分。
  当最外层函数值形式,遇到自身调用语句,会进入内层函数执行,而外层函数的后半部分暂不执行,直到最内层函数执行完以后,在逐渐向外执行。
 
【补充】confirm 弹出确认、取消对话框
    var is = confirm("在吗???");
      if(is){
        alert("在");
      }else{
        alert("不在");
        }
二、BOM 浏览器对象模型
  1、screen 对象
    console.log(window.width); //屏幕宽度
    console.log(window.height); //屏幕高度
    console.log(window.availWidth); //屏幕可用宽度
    console.log(window.availHeight); //屏幕高度 = 屏幕高度-底部工具栏
  2、location 对象
    console.log(location); 取到浏览器的URL信息
    完整的URL的路径:
      协议名://主机名(IP地址):端口号/文件所在路径?传递参数 (name1=value1&name2=value2)#锚点
      eg. http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top
    【location 常见属性】
      console.log(location);
      console.log(location.href); //返回当前完整路径
      console.log(location.protocol); //返回协议名 http://
      console.log(location.host); //返回主机名+端口号 127.0.0.1:8080
      console.log(location.hostname); //返回主机名 127.0.0.1
      console.log(location.port); //返回端口号 :8080
      console.log(location.pathname); //返回文件路径 wenjianjia/index.html
      console.log(location.search); //返回问好?开头的参数列表 name=jredu
      console.log(location.hash); //返回井号#开头的锚点 #top
   使用JS跳转页面
    <1> window.location= "http://www.baidu.com";
             <2>
  3、history 浏览历史
  4、navigator 包含浏览器的各种系统信息
三、JS中的DOM操作
  1、DOM树 节点
    分为三大类:元素节点、属性节点、文本节点;
    文本节点、属性节点属于元素子节点,操作时均需要先取到元素节点,再操作子节点;
    可以使用getElement系列方法,取到元素节点;
  【查看元素节点】
    1、getElementById() : 通过ID取到唯一节点;如果id重名,只能取到第一个。
       getElementsByName() :通过name属性
       getElementsByTagName() :通过标签名
       getElementsByClassName() :通过class名
    【注】获取元素节点时,一定注意:获取节点的语句,必须在DOM渲染完成之后执行,可以有两种实现方式:① 将JS代码写在body之后;② 将 代码写到window.onload函数之中。
      后面三个得到的是数组格式。不能直接添加各种属性,而应该取出数组的每一个单独操作
      eg. getElementsByName("name1")[0].onclick = function(){}
   【查看/设置属性特点】
    1、查看属性节点:getAttribute("属性名");
    2、设置属性节点:setAttribute("属性名","新属性值");
   【注】查看和设置属性节点 必须先取到元素节点,才能使用!
 
内容到此结束了~
由于本周对于基础知识掌握的并不扎实,这篇博客更多的是在帮助小女回顾一下基础知识。
希望跟我一样在学习JS的同志们,可以稳扎稳打,掌握好基础知识。Fighting!
 

JS中的函数、BOM和DOM操作的更多相关文章

  1. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  2. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  3. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  4. js运算符、 流程控制 、函数、内置对象、BOM与DOM操作

    运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...

  5. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  6. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  7. 前端之js中的函数

    函数 函数就是重复执行的代码片.   函数定义与执行 <script type="text/javascript">     // 函数定义     function ...

  8. JS中encodeURIComponent函数用php解码的代码

    JS中encodeURIComponent函数给中文编码后,如何用php解码?? 前提:编码前的中文可能是gbk,gb2312,utf-8等. 复制代码 代码如下: urldecode() iconv ...

  9. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

随机推荐

  1. [基础架构]PeopleSoft都有哪些进程运行在进程服务器上

    PSPRCSRV:(PSPRCSRV.EXE) 该进程负责启动所有服务进程. 每隔15s,该进程就会去看进程调度器中是否有需要运行的进程请求.如果没有需要运行的则sleep15s,然后再次检查. 如果 ...

  2. 进击的新版NavMesh系统:看我飞檐走壁

    0x00 前言 unity5.6作为Unity5最后的一个版本,的确起到了一个承上启下的作用.除了上一篇文章<进击的AssetBundles和它的工具们>中提到的AssetBundles- ...

  3. 深入理解Java内部类

         内部类就是定义在一个类中的另外一个类,是一种从属关系.在没有实际了解内部类之前,我始终困惑,为什么要在一个类中定义另外一个类,这不是增加代码结构复杂度么?现在才大致能知道这种设计的优势是大于 ...

  4. [补] winpcap编程——EAPSOCKET实现校园网锐捷登录(mentohust)

    EAP SOCKET Implement Mentohust 时间20161115 对于EAP协议不了解,可参考上一篇随笔. 通过抓包分析校园网的锐捷登录流程,我在上一篇随笔中实现了EAPSOCKET ...

  5. spring boot 配置文件application

    场景:在项目部署的过程中,对于spring boot的配置文件一直不很了解,直到项目出现一个莫名其妙的问题——工程classes中的配置文件被覆盖,程序启动总是报错! 1  配置文件的优先级 appl ...

  6. (转)简单介绍java Enumeration

    简单介绍java Enumeration 分类: java技术备份 java数据结构objectstringclass存储 Enumeration接口  Enumeration接口本身不是一个数据结构 ...

  7. (转)CentOS6.5下Redis安装与配置

    场景:项目开发中需要用到redis,之前自己对于缓存这块一直不是很理解,所以一直有从头做起的想法. 本文详细介绍redis单机单实例安装与配置,服务及开机自启动.如有不对的地方,欢迎大家拍砖o(∩_∩ ...

  8. Jsoup教程jsoup开发指南,jsoup中文使用手册,jsoup中文文档

    jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据. jsou ...

  9. python有三种导入模块的方法(转)

    原文:http://www.cnblogs.com/allenblogs/archive/2011/11/15/2055149.html python有三种导入模块的方法 其一, import mod ...

  10. [PS相关]DAS,NAS,SAN三种存储技术比较

    随着数据量一直在快速增长,存储技术也在快速的更新以满足需求和推动创新.当存储被提到的时候,它不仅仅局限于存储容量,还有其他的需求比如数据保护,数据备份,数据访问速度等等. NAS-网络存储设备(Net ...