JavaScript基础性知识总结_onclick=compare-CSDN博客

本文链接：https://blog.csdn.net/qq_21184771/article/details/56285337

总结一些js基础问题，可能会比较凌乱。
中文乱码问题：

js文件的编码方式与js文件的显示方式不一致，所以就会乱码，把js文件用notepad打开，转换编码方式，或者在js文件中加charset=""

js位置：
引用外部js文件：<script type="text/javascript" src="dreamdu.js"></script>（html中不可省略，xhtml可以省略）
内嵌js代码：<script type="text/javascript">js代码</script>

javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

放在<head>部分

最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。

放在<body>部分，后端，中间

JavaScript代码在网页读取到该语句的时候就会执行。
很多情况需要在页面加载后才能执行js代码，所以外部js文件建议放在<body>的后端，即所有显示内容后面。

js里字符串可用单引号也可以双引号，JSON字符串必须用双引号

a 标签中调用js的几种方法参照：http://blog.csdn.net/ysy441088327/article/details/6311703

推荐用以下：

<a href="javascript:void(0);" οnclick="js_method()"
a href="javascript:;" οnclick="js_method()"
a href="#" οnclick="js_method();return false;"

==（值相同就行）和===（类型和值都相同，是严格比较），字符串比较用==

事件：

Event 对象（另一篇笔记有详细介绍）

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件 通常与函数结合使用，函数不会在事件发生前被执行！

e.onclick = function(){}；给e加上事件

e.onclick = compare;//compare是一个函数，点击e会激发compare执行

e.onclick = compare();//compare是一个函数，立即compare执行，加了()就是立即执行。

addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

element .addEventListener(event,function,useCapture)

event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。何为捕获？何为冒泡？请看另篇笔记可能值: true - 事件句柄在捕获阶段执行 false- false是默认。事件句柄在冒泡阶段执行

您可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

您可以在同一个元素中添加不同类型的事件。

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

当传递参数值时，使用"匿名函数"调用带参数的函数：

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本,不支持addEventListener,就用attachEvent
    x.attachEvent("onclick", myFunction);
}

内置对象：

.属性没有括号

.方法() 有括号

数组：（ 参照JS高级设计， 看书比较好）

//定义一维数组，数组赋值
var myarr=new Array(); //定义数组
 myarr[0]=80;
 myarr[1]=60;
 myarr[2]=99;

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
var myarray = new Array(6);//定义一有6个数的数组
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
//获得数组myarray的长度
myarray.length; 
//二维数组
var myarr=new Array();  //先声明一维
for(var i=0;i<2;i++){  //一维长度为2
  myarr[i]=new Array();  //再声明二维
  for(var j=0;j<3;j++){  //二维长度为3
  myarr[i][j]=i+j;  // 赋值，每个数组元素的值为i+j
  }
}
 
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]];//不一定就是标准i行j列
Myarr.length=2;
Myarr[0].length=3;

1.创建的新数组是空数组，没有值，如输出，则显示undefined。

2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。myarray[5]=88; //使用一个新索引，为数组增加一个新元素

数组的迭代方法：(JS高级设计有详细介绍)

.evey() 返回ture false，数组每一项满足函数操作->ture；

.some() 返回ture false，数组有一项满足函数操作->ture;

.filter() 返回一个满足条件的新数组

.map() 返回原始数组每一项进行函数操作后得到数据构成的新数组

.forEach() 不返回任何值，对数组每一项进行函数操作

数组连接： arrayObject.concat(array1,array2,...,arrayN)；

该方法不会改变现有的数组arrayObject，而仅仅会返回被连接数组的一个副本。arr.concat()返回一个arr的副本

指定分隔符连接数组元素: arrayObject. join(分隔符)；

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。分隔符可选，忽略就以，分割。

//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
//下面方法可以用来计算给定数组 arr 中所有元素的总和。
function sum(arr) {
return eval(arr.join('+'));
}
//输入例子:sum([ 1, 2, 3, 4 ])  输出例子:10

选定元素构成新数组slice()：arrayObject .slice(start,end)；

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

2. 该方法并不会修改数组，而是返回一个子数组。

可使用负值从数组的尾部选取元素。

如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

String.slice() 与 Array.slice() 相似。

数组排序：arrayObject.sort()； sort(<方法函数名>)

sort()方法使数组中的元素按照一定的顺序排列。

1.如果不指定<方法函数名>， 则按unicode码顺序排列。不能按照数的大小来排序。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));//或sort('sortNum()')
</script>

Date日期对象：

var Udate=new Date();//使 Udate 成为日期对象，没有参数显示是 当前时间(当前电脑系统时间)。
注意:使用关键字new，Date()的首字母必须大写。日期显示因浏览器而异，不能保证一致。
如果想设置特定时间， Date.parse() 和 Date.UTC()
Date.parse(str)；
参数：表示日期的字符串,字符串的格式不定。如果不能表示日期，返回NaN。

//表示2012年10月1日，在火狐浏览器显示的是2012年9月30日，在谷歌浏览器显示的是2012年10月1日
var sd = new Date(Date.parse('2012,10,1');
var sd1 = new Date(Date.parse('October 1,2012');
var sd2 = new Date('October 1,2012');//后台调用Date.parse()

Date.UTC();
参数：年份，月份（0-11），天（1-31），小时（0-23），分钟，秒，毫秒。前两个参数必须，天没有假设为1，其他假设为0.

//表示2012年10月1日，在火狐浏览器显示的是2012年9月30日，在谷歌浏览器显示的是2012年10月1日
var d = new Date(Date.UTC(2012, 9, 1,));  
var d1 = new Date(Date.UTC(2012, 9)); 
var d2 = new Date(2012,9,1,17,55,55);//2012年10月1日下午5点55

Date.now();
表示当前日期时间的毫秒数.IE9+,FF3+,Safar3+，Opera10.5,chrome支持

var start = Date.now();
doSomething();
var end = Date.now();
var stop = start - end;
//不支持的用+new Date()代替Date.now()

Date的valueOf()方法不返回字符串，返回日期的毫秒表示。可以用<和>比较日期值，谁早谁小。

var d1 = new Date(2007,1,1);
var d2 = new Date(2007,2,1);
alert(d1<d2);//true

getDay() 返回0-6的数字，0是星期天；

  var mydate=new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  document.write("今天是：" + weekday[mydate.getDay()]);

js计时器

设置隔段计数器：setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数) : setInterval("clock()",1000)或setInterval(clock,1000)

取消隔段计时器：clearInterval(id_of_setInterval)

参数说明: 和setInterval()一起使用

id_of_setInterval：由 setInterval() 返回的 ID 值。

设置过后计时器：setTimeout(代码,延迟时间);

与setInterval(代码，时间)；类似。

取消过后计时器：clearTimeout(id_of_setTimeout)

setTimeout()和clearTimeout()一起使用，停止计时器。

参数说明:

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

字符串对象

长度属性： str.length

大写小写方法：str. toUpperCase(); str. toLowerCase();

字符串变成数字类型： parseInt(str);//忽略字符串前空格，从第一个非空格字符开始，如第一个不是数字字符或者负号，返回NaN;如第一个是数字字符或者负号，继续解析下一个，直到遇到一个非数字字符。字符串以0开头，是八进制转换十；字符串以0x开头，是十六进制转换十。

parseInt('');//NaN
parseInt('1234bulue');//1234
parseInt('070');//八进制 56

返回指定位置的字符：str. charAt(index);

1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。

2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。

3.空格也是一个字符。

提取字符串：stringObject. substring(startPos,stopPos)；

提取指定数目的字符串：stringObject. substr(startPos,length)；

去掉字符串首尾的空格,返回新串：str.trim()
返回指定的字符串首次出现的位置：stringObject.indexOf(substring, startpos)；
字符串分割：stringObject.split(separator,limit)；

如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

字符串匹配：str.match()

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

返回值：存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g , 没有返回null

var str="Hello world!"
document.write(str.match("world") + "<br />")

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))

js中的正则表达式是放在 /~~~/里面的， g是匹配模式中的一种，表示全局匹配（找到所以匹配的项），如果没有就只匹配一次。
正则表达式匹配，请看另一篇笔记：http://blog.csdn.net/qq_21184771/article/details/56333874

js的正则匹配，详细请看另一篇笔记：http://blog.csdn.net/qq_21184771/article/details/56334450

Math对象：

Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。

BOM浏览器对象模型

History 对象

window.history.[属性|方法] 注意：window可以省略。history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

History 对象属性

History 对象方法

length：浏览器历史列表中URL数量

back()----加载history列表中前一个URL

forward()----加载history列表中下一个URL

go(number)----加载history列表中某个具体页面

用length属性，当前窗口的浏览历史总长度

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

window.history.go(number);

window.history.back() 等同于 window.history.go(-1)

window.history.forward() 等同于 window.history.go(1)

Location对象

location用于 获取或设置窗体的URL，并且可以用于解析URL。

location.[属性|方法]

location 对象属性：

location 对象方法:

Navigator对象

navigator.属性 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

var browser=navigator.appName;

navigator.userAgent来判定浏览器版本信息等几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

screen对象

screen对象用于获取用户的屏幕信息。

window.screen.属性 可以不使用 window 这个前缀

window对象：

window一些常用方法：

alert();
document.write();
var mess = confirm(str); 确认框，确定mess返回TRUE；取消返回flase；
prompt(str1, str2); 提问框。

str1: 要显示在消息对话框中的文本，不可修改

str2：文本框中的内容，可以修改。str2可以不填

1. 点击确定按钮，文本框中的内容将作为函数返回值

2. 点击取消按钮，将返回null

window.open([URL], [窗口名称], [参数字符串])

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。

2."_top"、"_blank"、"_self"具有特殊意义的名称。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

4.name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

<script type="text/javascript">
 window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>