JavaScript知识点归纳之教程（二）

一、JavaScript作用域

在JavaScript中，作用域可作为访问变量、对象、函数的集合。

JavaScript函数作用域：作用域在函数内修改。

全局变量是window变量：

//这样显示
document.getElementById("demo").innerHTML = carName;
//和这样显示
document.getElementById("demo").innerHTML = window.carName;

二、事件

1.修改id元素里面展示的内容

<p id="demo">我这里展示时间</p>
<button onclick="getElementById('demo').innerHTML=Date()">点击展示时间</button>

2.直接在控件上展示内容

<button onclick="this.innerHTML=Date()">在这里展示时间</button>

3.通过事件函数改变id元素里面内容

<p id="demo"></p>
<button onclick="showDate()">事件函数</button>
<script>
function showDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>

4.常见的HTML事件

onchange	HTML元素改变
onclick	用户点击HTML元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

三、字符串

1.可以使用索引位置来访问字符串中每一个字符。索引从0开始。

2.字符串长度可以用内置属性length来计算字符串的长度

<script>
var spa = "helloworld"
document.write(spa.length);
</script>

3.使用使用（\）反斜杠来进行转义

\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

4.===是绝对相等，意思是数据类型与值必须都相等。

<p id="demo"></p>
<script>
var x = "John";              // x 是字符串
var y = new String("John");  // y 是一个对象
document.getElementById("demo").innerHTML = x===y;
</script>

5.字符串属性

constructor	返回创建字符串
length	返回字符串长度
prototype	运行您向对象添加属性和方法

6.字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

四、运算符

1.算术运算符

（1）自增

x++和++x

如果单纯执行++y和y++其结果都是一样的，都等价于 y=y+1;如果联合别的语句就不一样的如x=++y 和 x=y++是不一样的
x=++y等价于先执行 y=y+1 然后执行 x=y
x=y++ 等价于先执行 x=y然后执行 y=y+1

（自创口诀：x=++y是先加后等于，x=y++是先等于后加）

<button onclick="demoFunction1()">x=y++</button>
<p id="demo1"></p>
<script>
function demoFunction1()
{
	var y1=5;
	var x1=y1++;
	var demoP=document.getElementById("demo1")
	demoP.innerHTML="x1=" + x1 + ", y1=" + y1;
}
</script>
	
<button onclick="demoFunction2()">x=++y</button>
<p id="demo2"></p>
<script>
function demoFunction2()
{
	var y2=5;
	var x2=++y2;
	var demoP=document.getElementById("demo2")
	demoP.innerHTML="x2=" + x2 + ", y2=" + y2;
}
</script>

（2）自减

（自创口诀：x=--y是先减后等于，x=y--是先等于后减）

<button onclick="demoFunction1()">x=y--</button>
<p id="demo1"></p>
<script>
function demoFunction1()
{
	var y1=5;
	var x1=y1--;
	var demoP=document.getElementById("demo1")
	demoP.innerHTML="x1=" + x1 + ", y1=" + y1;
}
</script>
	
<button onclick="demoFunction2()">x=--y</button>
<p id="demo2"></p>
<script>
function demoFunction2()
{
	var y2=5;
	var x2=--y2;
	var demoP=document.getElementById("demo2")
	demoP.innerHTML="x2=" + x2 + ", y2=" + y2;
}
</script>

2.赋值运算符

+=	先加后等于
-=	先减后等于
*=	先乘后等于
/=	先除以后等于
%=	这里有点搞不清楚

http://www.runoob.com/try/try.php?filename=tryjs_oper_modequal
3.加法运算

两个数字相加，返回数字相加的和。

一个数字和一个字符串相加，返回字符串。

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=5+5;
	var y="5"+5;
	var z="Hello"+5;
	var demoP=document.getElementById("demo");
	demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>

五、比较或逻辑运算符

!=	不等于
!==	不绝对等于

六、if....else if...else

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

七、循环

for	循环一定次数
for/in	循环遍历对象的属性
while	当指定条件为true时循环指定代码块
do/while	当指定条件为true是循环指定代码块

八、将数字、布尔值、日期转换为字符串

（1）使用String()方法，例如

String(123);

（2）使用toString()方法，例如

(123).toString();

九、将字符串、布尔值转换为数字

Number("99");

Number(false);//返回0

如果变量不能转换，它仍然会是一个数字，但值为NaN（不是一个数字）

十、JavaScript正则表达式

1.字符串方法

（1）使用search()方法：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并且返回子串的起始位置。

<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Hello World!"; 
    var n = str.search(/w/i);
    document.getElementById("demo").innerHTML = n;
}
</script>

（2）replace()方法：用于在字符串中用一些字符串替换另一些字符，或替换一个与正则表达式匹配的子串。

<button onclick="myFunction()">点我</button>
<p id="demo">请访问Hello!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/hello/i,"world");
    document.getElementById("demo").innerHTML = txt;
}
</script>

（3）正则表达式修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

（4）正则表达式模式，方括号用于查找某个范围内字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

（3）使用test()方法，用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true,否则返回false

<script>
var patt1=new RegExp("e");
document.write(patt1.test("Hello World"));
</script>

（4）使用exec()方法，用于检索方法字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配结果，如果未找到匹配，则返回null

<script>
var patt1=new RegExp("e");
document.write(patt1.exec("wolrd"));
</script>

JavaScript知识点归纳之教程（二）

猜你喜欢