网页设计——javascript

12.18 

javascript第一二章

1.所有JavaScript变量都是由var声明

2.数字 + 数字 = 数字

字符串 + 字符串 = 字符串

字符串 + 数字 = 字符串

3.类型转换

• “字符串”转换为“数字”

（1）Number()。Number()方法可以将任何“数字型字符串”转换为数字。

（2）parseInt()和parseFloat()。parseInt()和parseFloat是提取“首字母为数字的任意字符串”中的数字，其中，parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分。

• “数字”转换为“字符串”

（1）与空字符串相加

（2）toString()

4.换行

（1）如果是在document.write()中换行，则应该用：<br/>

（2）如果是在alert()中换行，则应该用：\n

 12.19

javascript第三四五章

1.JavaScript中，常用的内置对象有4种。

（1）字符串对象：String

str.length获取长度。在字符串中，空格也是作为一个字符来处理的。

（2）数组对象：Array

（3）日期对象：Date

（4）数值对象：Math

2.获取某一个字符

字符串名.charAt(n) 

3.截取字符串

字符串名.substring(start, end)。substring(start,end)截取范围为：[start,end)，也就是包含start，不包含end。其中，end可以省略。当end省略时，截取的范围为：start到结尾。

4.替换字符串

字符串名.replace(原字符串, 替换字符串)

字符串名.replace(正则表达式, 替换字符串) 

5.分割字符串

字符串名.split("分割符")，把一个字符串分割成一个数组。split(" ")和split("")是不一样的！前者两个引号之间是有空格的，所以表示用空格作为分割符来分割。后者两个引号之间是没有空格的，所以可以用来分割字符串每一个字符。

6.检索字符串的位置

字符串名.indexOf(指定字符串)

字符串名.lastIndexOf(指定字符串）

如果字符串中包含“指定字符串”，indexOf()就会返回指定字符串首次出现的下标，而lastIndexOf()就会返回指定字符串最后出现的下标；如果字符串中不包含“指定字符串”，indexOf()或lastIndexOf()就会返回-1。

12.20-12.21

javascript第六至九章

1.数组的创建

var 数组名 = new Array(元素1, 元素2, ……, 元素n); //完整形式

var 数组名 = [元素1, 元素2, ……, 元素n]; //简写形式

2.截取数组部分

数组名.slice(start, end)。

一、在数组开头添加元素：数

slice(start,end)截取范围为：[start,end)，也就是“包含start但不包含end”。
3.添加数组元素组名.unshift(新元素1, 新元素2, ……, 新元素n)；

二、在数组结尾添加元素：数组名.push(新元素1, 新元素2, ……, 新元素n)；

4.删除数组元素

一、删除数组中第一个元素：数组名.shift()；

二、删除数组最后一个元素：数组名.pop()；

5.将数组元素连接成字符串

数组名.join("连接符");

6.操作年、月、日

一、获取年、月、日

getFullYear()	获取年份，取值为4位数字
getMonth()	获取月份，取值为0（一月）到11（十二月）之间的整数
getDate()	获取日数，取值为1~31之间的整数

getMonth()方法返回值是0（一月）到11（十二月）之间的整数，所以必须加上1，这样月份才正确。

二、设置年、月、日

1．setFullYear()

时间对象.setFullYear(year,month,day);可以用来设置年、月、日。

说明：year表示年，是必选参数，用一个4位的整数表示，如2017、2020等。

month表示月，是可选参数，用0~11之间的整数表示。其中0表示1月，1表示2月，以此类推。

day表示日，是可选参数，用1~31之间的整数表示。

2．setMonth()

时间对象.setMonth(month, day);

3．setDate()

时间对象.setDate(day);

7. 操作时、分、秒

一、获取时、分、秒

方法	说明
getHours()	获取小时数，取值为0~23之间的整数
getMinutes()	获取分钟数，取值为0~59之间的整数
getSeconds()	获取秒数，取值为0~59之间的整数

8.获取星期几

时间对象.getDay();

getDay()返回一个数字，其中0表示星期天，1表示星期一……6表示星期六。

9.取整

一、向下取整：Math.floor(x)；

二、向上取整：Math.ceil(x);

10.生成随机数：Math.random()；随机数范围是[0, 1)。

随机数生成某个范围内的“整数”：

• 生成0到m之间的随机整数：Math.floor(Math.random()*(m+1))；
• 生成1到m之间的随机整数（包括1和m）：Math.floor(Math.random()*m)+1；
• 生成n到m之间的随机整数（包括n和m）：Math.floor(Math.random()*(m-n+1))+n

11.DOM中常见的节点类型：

元素节点、属性节点、文本节点

（1）一个元素就是一个节点，这个节点称之为“元素节点”。

（2）属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。

（3）只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点（它们求子多年，但仍未如愿）。

12.获取元素

（1）getElementById()：

语法：document.getElementById("id名")；

（2）getElementsByTagName()

语法：document. getElementsByTagName("标签名")；

getElementsByTagName()方法获取的是一个“类数组”（也叫伪数组），类数组只能用到两点：length属性；下标形式。

（3）getElementsByClassName()

语法：document. getElementsByClassName("类名")；

（4）querySelector()和querySelectorAll()

语法：document.querySelector("选择器");

           document.querySelectorAll("选择器");

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。

（5）getElementsByName()

语法：document.getElementsByName("name名")；getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。 

（6）document.title和document.body

13.创建元素

在JavaScript中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。这种方式又被称为“动态DOM操作”。语法：

var e1 = document.createElement("元素名"); //创建元素节点

var txt = document.createTextNode("文本内容"); //创建文本节点

e1.appendChild(txt); //把文本节点插入元素节点中

e2.appendChild(e1); //把组装好的元素插入已存在的元素中

在操作动态DOM时，设置元素class用的是className而不是class

14.插入元素

一、A.appendChild(B);

二、A.insertBefore(B,ref);A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。

15.删除元素：A.removeChild(B);

16.复制元素：obj.cloneNode(bool)；参数obj表示被复制的元素，而参数bool是一个布尔值

17.替换元素：A.replaceChild(new,old);A表示父元素，new表示新子元素，old表示旧子元素。 

12.22 

javascript第十章

1.HTML属性操作（对象属性）

一、获取HTML属性值

语法：obj.attr；obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。如果想要获取一个元素的class，写成oBtn.class是错误的，正确的应该写成oBtn.className。

二、设置HTML属性值

语法：obj.attr = "值";

2.HTML属性操作（对象方法）

一、getAttribute()

语法：obj.getAttribute("attr")；//等价于obj.attr；我们可以使用getAttribute()方法来获取元素的某个属性的值。

二、setAttribute()

语法：obj.setAttribute("attr","值")；

三、removeAttribute()

语法：obj.removeAttribute("attr")；

3.CSS属性操作

一、获取CSS属性值

语法：getComputedStyle(obj).attr；

二、设置CSS属性值

• style对象

语法：obj.style.attr = "值";//等价于obj.style[“attr”]；

使用style对象来设置样式时，我们不能使用background-color这种写法，而必须使用backgroundColor”这种骆驼峰型写法 ，在obj.style.backgroundColor中，backgroundColor其实也是一个变量，变量中是不允许出现中划线的，因为中划线在JavaScript中是减号的意思。

• cssText属性

obj.style.cssText = "值";obj表示DOM对象，cssText的值是一个字符串，采用驼峰形

4.DOM遍历

• 查找父元素。obj.parentNode；
• 查找子元素。

 （1）childNodes、firstChild、lastChild

 （2）children、firstElementChild、lastElementChild

其中，childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。

• 查找兄弟元素

（1）previousSibling、nextSibling

（2）previousElementSibling、nextElementSibling

5.innerHTML和innerText：innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。

12.23

javascript第十一章

1.事件调用方式

（1）在script标签中调用

（2）在元素中调用

2.在JavaScript中，常见的鼠标事件如下表所示。

鼠标事件

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

3. 键盘事件

（1）键盘按下：onkeydown

（2）键盘松开：onkeyup

4.表单事件

（1）onfocus和onblur.onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反操作。具有“获取焦点”和“失去焦点”特点的元素只有2种:（1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）（2）超链接

（2）onselect

（3）onchange:选择下拉列表的某一项时，触发的是onchange事件，而不是onselect事件。onselect事件仅仅在选择文本框中的内容时才会触发。

5.编辑事件

一、oncopy:在JavaScript中，我们可以使用oncopy事件来防止页面内容被复制。

二、onselectstart:在JavaScript中，我们可以使用onselectstart事件来防止页面内容被选取。

三、oncontextmenu:在JavaScript中，我们可以使用oncontextmenu事件来禁止鼠标右键。

6.页面事件

一、onload:表示文档加载完成后再执行的一个事件.如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的。

二、onbeforeunload:onbeforeunload表示离开页面之前触发的一个事件。

12.24

javascript第十二章

1.事件处理器:oBtn.onclick = function(){……};

2.事件监听器:我们可以使用事件监听器这种方式来为同一个元素添加多个相同的事件，而这一点是事件处理器做不到的。

 (1）绑定事件：obj.addEventListener(type , fn , false);type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。fn是一个函数名，或者一个匿名函数。false表示事件冒泡阶段调用。

一般情况下，如果想要为元素仅仅添加一个事件的话，下面两种方式其实是等价的。obj.addEventListener("click", function () {……}, false);

obj.onclick = function () {……};

（2） 解绑事件：obj.removeEventListener(type , fn , false);对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

如果你想要使用removeEventListener()方法来解除一个事件，那么当初使用addEventListener()添加事件的时候，就一定要用定义函数的形式。

3.event对象常用属性如表所示

event对象的属性

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false）

12.25

javascript第十三章

1.

window对象下的子对象

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度

2.

window对象常用方法

方法	说明
alert()	提示对话框
confirm()	判断对话框
prompt()	输入对话框
open()	打开窗口
close()	关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器

3.一、打开窗口

在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口。

语法：window.open(url, target)；url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面。target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为“_blank（默认值）”，表示在新窗口打开；当target为“_self”时，表示在当前窗口打开。

二、关闭窗口

在JavaScript中，我们可以使用window.close()来关闭一个新窗口。

语法：window.close()；window.close()方法是没有参数的。

4.对话框

一、alert()：alert("提示文字")；

在JavaScript中，alert()对话框一般仅仅用于提示文字。在alert()中实现文本换行，用的是\n。

二、confirm()：confirm("提示文字")；

在JavaScript中，confirm()对话框不仅提示文字，还提供确认。

三、prompt()：prompt("提示文字")；

在JavaScript中，prompt()对话框不仅提示文字，还返回一个字符串。

3种对话框

方法	说明
alert()	仅提示文字，没有返回值
confirm()	具有提示文字，返回“布尔值”（true或false）
prompt()	具有提示文字，返回“字符串”

 5.定时器

一、setTimeout()和clearTimeout()

在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

语法：setTimeout(code, time);

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。

参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

二、setInterval()和clearInterval()

在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。

//方式1 setInterval(function(){…}, 2000)

//方式2 setInterval(alertMes, 2000)

//方式3 setInterval("alertMes()", 2000)

6.location对象

一、window.location.href：在JavaScript中，我们可以使用location对象的href属性来获取或设置当前页面的地址。

语法：window.location.href；

二、window.location.search：在JavaScript中，我们可以使用location对象的search属性来获取和设置当前页面地址“?”后面的内容。

语法：window.location.search；

三、window.location.hash：

在JavaScript中，我们可以使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容。井号（#）一般用于锚点链接，这个相信大家见过不少了。

7. navigator对象：在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。

12.26

javascript第十四章

1.window对象是浏览器为每个窗口创建的一个对象。通过window对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为“BOM（浏览器对象模型）”。
document对象是浏览器为每个窗口内的HTML页面创建的一个对象。通过document对象，我们可以操作页面的元素，这些操作又被统称为“DOM（文档对象模型）”。

2.

document对象常用的属性

属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.forms	获取所有form元素
document.images	获取所有img元素
document.links	获取所有a元素
document.cookie	文档的cookie
document.URL	当前文档的URL
document.referrer	返回使浏览者到达当前文档的URL

document.forms、document.images、document.links分别等价于document.getElementsByTagName("form")
document.getElementsByTagName("img")
document.getElementsByTagName("a")

3.一、document.URL

在JavaScript中，我们可以使用document对象的URL属性来获取当前页面的地址。

语法：document.URL；

document.URL和window.location.href都可以获取当前页面的URL，不过它们也有区别：document.URL只能获取不能设置；window.location.href既可以获取也可以设置。

二、document.referrer；在JavaScript中，我们可以使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址。例如我从页面A的某个链接进入页面B，如果在页面B中使用document.referrer，就可以获取到页面A的地址。

4.

document对象常用的方法

方法	说明
document.getElementById()	通过id获取元素
document.getElementsByTagName()	通过标签名获取元素
document.getElementsByClassName()	通过class获取元素
document.getElementsByName()	通过name获取元素
document.querySelector()	通过选择器获取元素，只获取第1个
document.querySelectorAll()	通过选择器获取元素，获取所有
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容
document.writeln()	输出内容并换行