『黑马程序员济南』JavaEE就业笔记串讲---JS-CSDN博客

『黑马程序员济南』JavaEE就业笔记串讲---JS

【JS的概述】

什么是JavaScript：

运行在浏览器端的脚本语言!

JavaScrpt的组成：

ECMAScript：JavaScript的基本的语法

BOM：Browser Object Model ：

DOM：Document Object Model ：

其他的脚本语言：

JavaScript,ActionScript,Flex

JS的用途：

使页面更加丰富,使页面动起来！！！

【JS的基本语法】

区分大小写：

弱变量类型语言：（与Java不同）

* Java

* int i = 3;

* String s = “abc”;

* JavaScript:

* var i = 3;

* var s = “abc”;

分号可有可无：

变量命名：

【JS的数据类型】

JS将数据类型分成两类：

* 原始类型：

* undefined：未定义类型

* boolean:布尔类型

* number:数字类型

* string:字符或字符串.

* null：空

* 引用类型：

* 对象类型.对象类型默认值是null.

【JS的运算符】

JS中的运算符与Java中基本一致！

JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.

【JS的语句】

JS中的语句与Java的语句一致！

【JS的通常开发的步骤】

JS通常都由一个事件触发.

触发一个函数,定义一个函数.

获得操作对象的控制权.

修改要操作的对象的属性或值.

定义函数:

* function 函数名称(){

// 函数体

}

* window.onload = function(){

}

常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...

【JS的引入方式】

通常两种方式：

一种：页面内直接编写JS代码,JS代码需要使用<script></script>.

二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.

将JS的代码定义成一个文件引入:

获得页面中的元素:

* document.getElementById(“”);

正则的匹配:

JS中有两种匹配正则的方式:

* 使用String对象中的match方法.

* 使用正则对象中的test方法.

【HTML的window对象】

* setInterval(); :每隔多少毫秒执行某个表达式.

* setInterval(“change()”,5000);

* setTimeout(); :隔多少毫秒执行一个该表达式.

* setTimeout(“change()”,5000);

【CSS的显示和隐藏的属性】

* display

* block：显示元素：

* none：隐藏元素：

JS中的BOM对象:

Window

* alert(); --弹出对话框

* setInterval();

* setTimeout();

* clearInterval();

* clearTimeout();

* confirm(); --弹出一个确认窗口

* prompt(); --弹出一个可输入的对话框

* open(); --打开一个新窗口

Navigator ：包含的是浏览器的信息.

Screen:用来获得屏幕信息:

History:浏览器的历史对象:

Location:包含URL信息的对象

【JS的输出】

* document.getElementById(“”).innerHTML=”HTML的代码”;

* document.write(“”);

【JS的事件】

* onfocus :获得焦点.

* onblur :失去焦点.

* onsubmit :提交的时候.

JS的事件的总结：

* onload :

* onclick :

* onsubmit:

* onfocus :

* onblur :

* onchange:下拉列表改变事件.

* ondblclick:双击某个元素的事件.

键盘操作事件:

* onkeydown :

* onkeyup :

* onkeypress:

鼠标操作事件：

* onmousemove：

* onmouseout：

* onmouseover：

* onmousedown

* onmouseup

【使用JS获得表格的行数】

* 获得到控制的表格元素:

* var tab1 = document.getElementById(“tab1”);

* var len = tab1.rows.length;

表格中的tbody和thead标签

function changeColor(){

// 获得操作的表格的控制权:

var tab1 = document.getElementById("tab1");

// 获得tbody中的所有的行.

var len = tab1.tBodies[0].rows.length;

for(var i = 0;i< len ;i++){

if(i % 2 == 0){

tab1.tBodies[0].rows[i].style.backgroundColor = "green";

}else{

tab1.tBodies[0].rows[i].style.backgroundColor = "gold";

}

【DOM的概述】

什么是DOM

DOM：Document Object Model：文档对象模型.

将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.

DOM的使用：

知道document，element，attribute中的属性和方法

【DOM的常用的操作】

获得元素：

* document.getElementById(); -- 通过ID获得元素.

* document.getElementsByName(); -- 通过name属性获得元素.

* document.getElementsByTagName(); -- 通过标签名获得元素.

创建元素：

* document.createElement(); -- 创建元素

* document.createTextNode(); -- 创建文本

添加节点：

* element.appendChild(); -- 在最后添加一个节点.

* element.insertBefore(); -- 在某个元素之前插入.

删除节点：

* element.removeChild(); -- 删除元素

【使用DOM完成对ul中添加一个li元素】

function addElement(){

var city = document.getElementById("city");

// 创建一个元素:

var liEl = document.createElement("li");

// 创建一个文本节点:

var text = document.createTextNode("深圳");

// 添加子节点:

liEl.appendChild(text);

city.appendChild(liEl);

}

【JS中创建数组】

【JS的事件】

下拉的列表的改变的事件.onchange.

【JS的DOM的操作】

JS的内置对象:

Array:

Boolean:

Date:

* http://www.baidu.com?time=new Date().getTime();

Math对象:

String对象:

* charAt();

* indexOf();

* lastIndexOf();

* split();

* replace();

* substring();

* substr();

JS的全局函数：

* parseInt();

* parseInt(“11”);

* parseFloat();

* parseFloat(“32.09”);

* 编码和解码的方法：

// 解码

* decodeURI();

* decodeURIComponent();

// 编码

* encodeURI();

* encodeURIComponent();

eval函数：

* 将一段内容当成是JS的代码执行.

//var sss = “alert(‘aaaa’)”;

//eval(sss);

转载于:https://my.oschina.net/u/3828683/blog/1802848