JS中的函数、BOM和DOM操作

 一、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 &lt;input&gt; 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. Spark metrics on wordcount example

   I read the section Metrics on spark website. I wish to try it on the wordcount example, I can't make ...

2. java--多线程之Runnable

   引读: 上一篇博文中讲了Thread的继承,存在一个问题就是,如果类本身已经继承了某个父类,又要继承Thread,导致多重继承. [但是我们知道接口是实现多重继承的重要方式].java提供了Runna ...

3. MySQL for Mac 安装和基本操作

   一.安装mysql 1.mysql下载地址http://dev.mysql.com/downloads/mysql/我的机器是mac 10.8的;所以使用mysql-5.6.10-osx10.7-x8 ...

4. MVP之高级MVP架构封装

   MVP之高级MVP架构封装 No MVP: 我们一般会这样写: public class MainActivity extends AppCompatActivity { private EditTe ...

5. UVAL 3942 Remember the Word(递推+Trie)

   Remember the Word [题目链接]Remember the Word [题目类型]递推+Trie &题解: 蓝书P209,参考的别人公开代码 &代码: #include ...

6. DataTable 行删除

   今天在阅读一个项目中的代码时,发现删除DataTable的数据时用的dataTable.Clear(); 由于以前自己习惯都是用dataTable.Rows.Clear();因此突然感觉到很茫然,难道 ...

7. EditPlus轻量级编辑器配置常用的语法规则！

   打开EditPlus编辑器:工具 ---- 参数设置 ---- 文件 ---- 设置&语法: 先配置简单的CSS语法: 勾选下面的 “自动完成” ,加载对应的ACP文件,配置一些常用的语法: ...

8. 「bzoj 3944: Sum」

   题目 杜教筛板子了 #include<iostream> #include<cstring> #include<cstdio> #include<cmath& ...

9. 2015.1.8 Left join 左连接

   格式 select f1.a, f2.b form f1 left jion f2 on .... 注意:左边的查询部分只能有select和from,不能出现where order by等.若有必须在 ...

10. spring特点与好处

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development a ...