jieless_JS

                    JS笔记大全

---

• 第一章JS

 1.JavaScript:客户端脚本语言

• 客户端:用户端,是为用户提供本地服务的一个程序
• 服务端:提供资源,提供服务,保护客户端的数据
• 写动态网页

1995年,网景发展而来

ECMA

统一的一个标准,JavaScript(ECMAScript)

2.网页的组成

HTML(超文本标记语言):网页的基本结构,各种页面元素标签

CSS(层叠样式表):美化,修饰页面元素

JavaScript(脚本语言):页面验证,动态特效

3.引入JS

1.内部脚本

     

<script type=”text/javascript”>
JS代码
</script>

2.外部脚本

<script type=”text/javascript” src=”链接到JS代码”></script>

3.行内脚本

3.1事件驱动: 

<input type=”button” onclick=”JS代码”>

3.2伪链接: 

<a href=”javascript:JS代码”></a>

注意:Java里面的

• ””:字符串
• ‘’:单字符
• JS里面的
• “”:字符串
• ‘’:字符串

4.变量和数据类型

var :JS统一使用var来定义变量

五大数据类型

1. undefined:变量被声明之后,但未不赋值
2. boolean:true/false
3. string:””,’’表示
4. number:整数或者浮点数
5. null:javascript当中的对象,数组,null

1. typeof检测数据类型

5.JS的基本语法

• 算术运算符:+  -  *  /  %
• 赋值运算符:=  +=  -=
• 比较运算符:>  <  >=  <=  ==  !=  ===  !==
• 逻辑运算符: &&  ||  !

if/else

switch

while

do/while

for

6.JS的内置函数

alert()                           --->       提示信息(警告框)

document.write()          --->在网页中输出

prompt()                      --->提示输入框

confirm()                       --->对话框(true/false)

 

 

●第二章JS

  String对象:

• 1.求长度: 字符串对象.length
• 2.求字符串指定位置的字符: 字符串对象.charAt(index)
• 3.查找字符串: 字符串对象.indexOf(str)     字符串对象.indexOf(str,index)
• 4.截取: 字符串对象.substring(index1,index2);
• 5.拆分: 字符串对象.split(str);

数组:

1.var 数组名称 = new Array(数组的长度);

int [] arr = new int [5];

var array = new Array(5);

2.var 数组名称 = new Array(数据的元素);

int [] arr = {“文渊”,“文化”,“文章”,“文雯”,“文明”};

var array = new Array(“文渊”,“文化”,“文章”,“文雯”,“文明”);

求数组的长度

array.length

分割数组

join

排序

sort

末尾添加元素

push

JS的系统函数

• parseInt()                                   将字符串转换成整数
• parseFloat()                         将字符串转换成数字
• eavl()                                  将字符串当作一个表达式执行
• isNaN()   is not a number    判断非数字的值
• alert();                                
• confirm()
• prompt()
• ducument.write()

JS自定义函数

function 函数名(){
js代码
}

function 函数名(参数1,参数2 ...){
js代码
}

函数的实例:

1. 获取ID节点:

var a = document.getElementById(“ID选择器”);

值:

value

结合起来:

var a = document.getElementById(“ID选择器”).value;

●第三章JS
     ☆日期函数

1.创建日期函数对象

var d = new Date();

2.获取年

var year = d.getFullYear();

3.获取月 获取到的是(0~11),所以需要+1

var month = d.getMonth()+1;

4.获取日

var dd = d.getDate();

5.获取时

var h = d.getHours();

6.获取分

var mi = d.getMinutes();

7.获取秒

var sec = d.getSeconds();

函数:

匿名函数: 函数没有名字

JS没有重载的概念

java的重载

public void show(String a,int b){
System.out.println(“你好!”);
}
public void show(int b,String b){
System.out.println(“我好!”);
}

JS下面的函数(方法)会覆盖掉上面的函数(方法)

事件:

1. onclick                  鼠标单机某个对象
2. onload                  当页面加载完成的时候,执行JavaScript代码
3. onmouseover       鼠标移动到某个元素
4. onkeydown          某个键盘被按下
5. onchange                    内容发生改变了

 

 

●第四章JS

    innerHTML

定时器

• setTimeout(“函数”,毫秒值)   多少毫秒之后执行
• setInterval(“函数”,毫秒值);   循环,每隔毫秒值之后,执行
• clearInterval()                 ;   关闭定时器

BOM常用方法

prompt()

alert()

comfirm()

open()

close()

setInterval()

setTimeout()

 

location

location.href=”链接”            跳转到指定的链接

location.reload()                  刷新

 

 

●第五章JS

1.    history
2. history.back()               返回
3. history.forward()          前进
4. history.go(n)                n:

正数:下面有多少页

                                                       负数:上面有多少页

document对象

document.getElementById();

document.getElementsByName();           

根据name获取节点    返回的结果是一个数组

document.getElementsByTagName()  根据标签名获取节点

返回的结果是一个数组

document.write();

元素的显示和隐藏

• display
• none:元素隐藏(不占位置)
• block:元素显示为块级元素,此元素前后会有带换行符(不占位置)

visibility

visible:元素显示(占位置)

hidden:元素隐藏(占位置)

 

 

●第六章JS

 

   核心DOM

查看节点:

1. 查看父节点:

parentNode          查看父节点

firstChild               查看第一个孩子

lastChild               查看最后一个孩子

children                查看很多个孩子

注意:返回的是一个数组

需要遍历

追加节点:

appendChild

1.创建一个新的节点            createElement

2.创建节点上的值               createTextNode

3.将新节点追加到需要添加的节点上面去

4.将节点添加到内容

插入节点:

insertBefore

1.创建一个新的节点            createElement

2.创建节点上的值               createTextNode

3.将新节点追加到需要添加的节点上面去

4.插入该节点

克隆节点:

cloneNode(true/false)

true:复制元素和内容

false:复制节点,不复制内容

替换节点:

replaceChild

1.创建一个新的节点    var textnode = document.createTextNode(“water”);

2.获取你需要替换的节点     var item = document.createTextNode(“MyList”).childNodes[0];

3.开始替换    item.replaceChild(textnode,items.childNodes[0]);

删除节点:

removeChild

删除的时候一定要记住:

是通过父类节点来删除

●第八章JS

  JavaScript和CSS的交互

style:

HTML元素.style.样式属性

document.getElementById(“title”).style.color = “red”;

document.getElementById(“title”).style.font-size = “48px”;

注意:第二种写法是错误的,style点样式的时候,如果出现”-”,那么就去除”-”,

将后面的单词首字母大写

比如:

document.getElementById(“title”).style.fontSize = “48px”;

className:

HTML元素.className = “类样式名”;

指定匹配位置

• ^：匹配字符串的开头，在多行检索中，匹配一行的开头 • $:匹配字符串的结尾，在多行检索中，匹配一行的结尾 • :匹配一个单词的边界 • B:匹配非单词边界的位置 • (?=p):零宽正向先行断言，要求接下来的字符都与p匹配，但不能包括 匹配p的字符 • /[Jj]ava([Ss]cript)?(?=:)/ 匹配[Jj]ava[Ss]cript:     必须有冒号

 

• (?!p):零宽负向先行断言，要求接下来的字符不和p匹配

 

重复字符

• /d{4}/ = /dddd/ • 重复字符： {n,m}:匹配一项至少n次，最多m次 {n,}:匹配前一项n次或者更多次 {n}:匹配前一项n次 ?:匹配前一项0次或者1次 +:匹配前一项1次或者多次 *:匹配前一项0次或者多次 Eg：/w{3}d?/：匹配三个单词和一个可选的数字 /[^(+]/:匹配一个或多个除了(的其他字符

修饰符

• /…../? • ?：i , g , m • i:执行不区分大小写的匹配 • g:执行一个全局匹配，找到所有的匹配，而 不是找到第一个之后就停止 • m:多行匹配模式，^匹配一行的开头和字符 串的开头，$匹配行的结束和字符串的结束

 

选择，分组和引用

• |:  x|y 匹配左边或者右边的字符 eg: /d{3}|[a-z]{4}:匹配三位数字或者4个小写字母 • (): (…) 将圆括号里面的当成一个独立单元匹配 eg: /java(script)?/:匹配字符串java，其后可以有script也可以没有 • :与()搭配，表示第几个有圆括号的表达式 eg： /*‘”+*^’”+*‘”+/   =  /(*‘”+)*^’”+1/

 

String方法

• Search:  字符串.search(正则表达式)返回第一个与值匹配字符串的位置  Var  x = “javaScript”.search(/script/i)

  

 

Replace:replace(x,y)   x:正则表达式，y：字符串   ？.replace(x,y)   将？中的 x转换成y.

  

• Match:   字符串.match(正则表达式)  返回为 数组类型 • Eg：“1,w,3,r”.match