……

jieless_JS

Posted on 2020-03-28 23:20  ITOTone  阅读(43)  评论(0)  编辑  收藏  举报

                    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:匹配一个单词的边界 • \B:匹配非单词边界的位置 • (?=p):零宽正向先行断言，要求接下来的字符都与p匹配，但不能包括 匹配p的字符 • /[Jj]ava([Ss]cript)?(?=\:)/ 匹配[Jj]ava[Ss]cript:     必须有冒号

 

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

 

重复字符

• /\d{4}/ = /\d\d\d\d/ • 重复字符： {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也可以没有 • \n:与()搭配，表示第几个有圆括号的表达式 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