js复习总结

33）json用法

1.把该对象转换为 JSON，然后将其发送到服务器

var myObj = { name:"Bill Gates", age:62, city:"Seattle" };

var myJSON = JSON.stringify(myObj);

window.location = "demo_json.php?x=" + myJSON;

2. JSON 格式接收到数据，您能够将其转换为 JavaScript 对象

var myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';

var myObj = JSON.parse(myJSON);

document.getElementById("demo").innerHTML = myObj.name;

3)复杂一点的处理

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';

var obj = JSON.parse(text, function (key, value) {

if (key == "birth") {

return new Date(value);

} else {

return value;

}});

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

4. 对 JavaScript 对象进行字符串化：var obj = { name:"Bill Gates", age:62, city:"Seattle"};

34）js的ajax

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange= function() {//当服务器响应就绪时执行的函数

if (this.readyState== 4 && this.status== 200) {

document.getElementById("demo").innerHTML = this.responseText; } };

xhttp.open("GET", "ajax_info.txt", true); //true（异步）,第二个参数服务器文件位置

xhttp.send();

}

readyState是指4: 请求已完成且响应已就绪

状态status-->200: "OK"，403: "Forbidden"，404: "Page not found"

responseText

post还是get呢？

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 无大小限制）

发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

35）js的cookie信息

document.cookie = "username=Bill Gates";

36）时间间隔内运行

function myFunction() {

alert('Hello');

}

37）弹出框方法

alert,confirm，prompt()

var r = confirm("请按按钮");

if (r == true) {

x = "您按了确认！";

} else {

x = "您按了取消！";

}

如果用户单击“确定”，该框返回输入值：

var person = prompt("请输入您的姓名", "比尔盖茨");

if (person != null) {

document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";

}

38）返回上一页

window.history.back() 方法加载历史列表中前一个 URL。

history forward() 方法加载历史列表中下一个 URL。

37）页面的 URL和路径

window.location.href 属性返回当前页面的 URL。

window.location.pathname 属性返回当前页面的路径名。

38）js窗口

window.innerHeight - 浏览器窗口的内高度（以像素计）

window.innerWidth - 浏览器窗口的内宽度（以像素计）

document.getElementById("demo").innerHTML = "Screen Width: " +screen.width;

39）节点创建及访问

创建及插入，删除，替换元素

var para = document.createElement("p");

var node = document.createTextNode("这是新文本。");

para.appendChild(node);

parent.removeChild(child);

parent.replaceChild(para, child);

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

parentNode

childNodes[nodenumber]

firstChild

lastChild

nextSibling

previousSibling

访问 innerHTML 属性等同于访问首个子节点的 nodeValue（而nodeName是节点的名称）

var myTitle = document.getElementById("demo").firstChild.nodeValue;

40）js事件

onload,onmousedown 和 onmouseup,onfocus

element.addEventListener(event,function,useCapture

向元素添加事件处理程序:

element.addEventListener("click", function(){ alert("Hello World!"); });

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的

41）动画

var elem = document.getElementById("animate");

var pos = 0;

var id = setInterval(frame, 5);

function frame() {

if (pos == 350) {

clearInterval(id);

} else {

pos++;

elem.style.top = pos + 'px';

elem.style.left = pos + 'px';

}

42）改变元素样式

document.getElementById("p2").style.color = "blue";

43）添加和删除元素

document.createElement(element)

document.removeChild(element)

document.appendChild(element)

document.replaceChild(element)

44）改变 HTML 元素或样式属性值

改变 HTML 元素的属性值：

element.attribute = new value

element.setAttribute(attribute, value)

改变 HTML 元素的样式：element.style.property = new style

45）查找 HTML 元素：id/tagname/classname

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(name)

document.forms["frm1"].elements[i].value

46.访问 JavaScript 属性：objectName.property或者objectName["property"]或者for..in遍历属性

var person = {fname:"Bill", lname:"Gates", age:62};

for (x in person) {

txt += person[x];

}

47.js改变html内容和属性

“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：

document.getElementById("demo").innerHTML = "Hello JavaScript";

document.getElementById("demo").style.fontSize = "25px";

使用外部脚本：

<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>

48.js输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框

使用 document.write() 写入 HTML 输出

使用 innerHTML 写入 HTML 元素

使用 console.log() 写入浏览器控制台

49. JavaScript 对大小写敏感

50.js运算符

%系数，!=，逻辑非!

51.js数据类型

var cars = ["Porsche", "Volvo", "BMW"];// 数组

var x = {firstName:"Bill", lastName:"Gates"};// 对象

52.常见html事件

HTML 元素已被改变：onchange

用户点击了 HTML 元素：onclick

用户把鼠标移动到 HTML 元素上：onmouseover

用户把鼠标移开 HTML 元素：onmouseout

浏览器已经完成页面加载：onload

53.字符串

单引号：\'

双引号：\"

反斜杠：\\

新行：\n

var x = "Bill";

var y = new String("Bill");

// typeof x 将返回 string// typeof y 将返回 object

// (x == y) 为 true，因为 x 和 y 的值相等

// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

54.字符串操作

查找字符串中的字符串：indexOf() 方法返回字符串中指定文本首次出现的索引

var pos = str.indexOf("China", 18);

返回指定文本在字符串中最后一次出现的索引：lastIndexOf()

var pos = str.lastIndexOf("China", 50);

检索字符串中的字符串：var pos = str.search("locate");

search() 方法无法设置第二个开始位置参数。

indexOf() 方法无法设置更强大的搜索值（正则表达式）。

有三种提取部分字符串的方法：

slice(start,end)

substring(start,end)

substr(start,length)

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

裁剪字符串中位置 7 到位置 13前的片段：var res = str.slice(7,13);

裁剪字符串中位置 -12 到位置 -6 的片段：var res = str.slice(-13,-7);

substring() 类似于 slice()，不同之处在于 substring() 无法接受负的索引。

substr() 类似于 slice()，不同之处在于第二个参数规定被提取部分的长度。

replace() 方法用另一个值替换在字符串中指定的值：var n = str.replace("Microsoft", "W3School");

replace()只替换首个匹配，replace() 对大小写敏感

执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

var n = str.replace(/MICROSOFT/i, "W3School");

替换所有匹配，请使用正则表达式的 g 标志：var n = str.replace(/Microsoft/g, "W3School");

通过 toUpperCase() 把字符串转换为大写：var text2 = text1.toLowerCase();

concat() 连接两个或多个字符串：text3 = text1.concat(" ",text2);

trim() 方法删除字符串两端的空白符：alert(str.trim());

返回字符串中指定下标（位置）的字符串：str.charAt(0);

var str = "HELLO WORLD";

str[0]; // 返回 H

把字符串转换为数组

var txt = "a,b,c,d,e";// 字符串txt.split(",");// 用逗号分隔txt.split(" ");// 用空格分隔txt.split("|");// 用竖线分隔

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。

如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：var txt = "Hello";// 字符串txt.split("");

55.js数字操作

以字符串返回数值：(123).toString();

返回数字：x = true;Number(x)//返回1

返回整数：parseInt()

57.js数组

访问数组第一个和最后一个元素：

var cars = ["Saab", "Volvo", "BMW"];

cars[0] = "Opel";

var last = fruits[fruits.length - 1];

返回元素的数量：var x = cars.length;// length 属性

对数组进行排序：var y = cars.sort();// sort() 方法

遍历数组for循环或者也可以使用 Array.foreach() 函数：

fruits = ["Banana", "Orange", "Apple", "Mango"];

fLen = fruits.length;

text = "<ul>";

for (i = 0; i < fLen; i++) {

text += "<li>" + fruits[i] + "</li>";

}

------------

var fruits, text;

fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";

fruits.forEach(myFunction);

text += "</ul>";

function myFunction(value) {

text += "<li>" + value + "</li>";

}

添加数组元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Lemon");// 向 fruits 添加一个新元素 (Lemon)

也可以使用 length 属性向数组添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits[fruits.length] = "Lemon";// 向 fruits 添加一个新元素 (Lemon)

58.js数组

toString() 把数组转换为数组值（逗号分隔）的字符串。

把数组转换为字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.toString();

结果Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串：

var fruits = ["Banana", "Orange","Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.join(" * ");

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();// 从 fruits 删除最后一个元素（"Mango"）

删除首个数组元素

fruits.shift();// 从 fruits 删除第一个元素 "Banana"，并返回被删除的值

添加对象到首个数组元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon");// 向 fruits 添加新元素 "Lemon"，并返回新数组的长度。

向数组添加新项

splice() 方法返回一个包含已删除项的数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

合并数组：

concat() 方法通过合并（连接）现有数组来创建一个新数组：

var myGirls = ["Cecilie", "Lone"];

var myBoys = ["Emil", "Tobias", "Linus"];

var myChildren = myGirls.concat(myBoys); // 连接 myGirls 和 myBoys

var myChildren = myGirls.concat(["Emil", "Tobias", "Linus"]);

裁剪数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var citrus = fruits.slice(1);

slice() 方法创建新数组。它不会从源数组中删除任何元素。slice() 可接受两个参数，比如 (1, 3)。

数组转为字符串：

document.getElementById("demo").innerHTML = fruits.toString();

59.数组排序

字母顺序对数组进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();// 对 fruits 中的元素按字母进行排序

fruits.reverse();// 对 fruits 中的元素按字母进行倒序排序

比值函数排序points.sort(function(a, b){return a - b});

随机函数排序points.sort(function(a, b){return 0.5 - Math.random()});

查找数组中的最高值：Math.max.apply([1, 2, 3])

60.数组遍历

1）while方法遍历

function myArrayMax(arr) {

var len = arr.length

var max = -Infinity;

while (len--) {

if (arr[len] > max) {

max = arr[len];

}

return max;

}

2）foreach()方法为每个数组元素调用一次函数

numbers.forEach(myFunction);

function myFunction(value, index, array) {

txt = txt + value + "<br>";

}

3）map()方法对每个数组元素执行函数来创建新数组

var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {

return value * 2;

}

4）filter() 方法创建一个包含通过测试的数组元素的新数组

var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

5）检查所有数组值是否通过测试

var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

6）some() 方法检查某些数组值是否通过了测试

var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

7）indexOf() 方法在数组中搜索元素值并返回其位置

var fruits = ["Apple", "Orange", "Apple", "Mango"];

var a = fruits.indexOf("Apple");

8）lastIndexOf从数组结尾开始搜索

Array.lastIndexOf()

var fruits = ["Apple", "Orange", "Apple", "Mango"];

var a = fruits.lastIndexOf("Apple");

9）find() 方法返回通过测试函数的第一个数组元素的值

var first = numbers.find(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

10）findIndex() 方法返回通过测试函数的第一个数组元素的索引

var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

61.日期

1）创建日期

var d = new Date(2018, 11, 24, 10, 33, 30);

var d = new Date("2018-02-19");

var d = new Date("2015-03");

2）获取日期

getDate()

getFullYear()

getTime() 方法

var d = new Date();

document.getElementById("demo").innerHTML = d.getTime();

3）设置日期

var d = new Date();

d.setDate(d.getDate() + 50);

d.setFullYear(2020, 11, 3);

62）js数学

Math.round(x) 的返回值是 x 四舍五入为最接近的整数：

Math.pow(8, 2); // 返回 64

Math.abs(x) 返回 x 的绝对（正）值

Math.floor(2.7);// 返回 2

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：Math.min(0, 450, 35, 10, -8, -300, -78);// 返回 -300

Math.random() 返回介于 0（包括）与 1（不包括）之间的随机数：Math.random();// 返回随机数

63）条件运算符

var voteable = (age < 18) ? "太年轻":"足够成熟";

64） switch语句

switch (new Date().getDay()) {

case 0:

day = "星期天";

break;

case 1:

day = "星期一";

break;

}

65）js的continue语句

for (i = 0; i < 10; i++) {

if (i === 3) { continue; }

text += "数字是 " + i + "<br>";

}

66）js的表单操作

1）获取表单元素的值：var x = document.forms["myForm"]["fname"].value;

选择设置了 "disabled" 属性的 input 元素:disabled

2）规定 input 元素应该被禁用：disabled

3）规定 input 元素的最小值：min

4）是否是数字

// 如果 x 不是数字或小于 1 或大于 10

if (isNaN(x) || x < 1 || x > 10) {

text = "输入无效";

} else {

text = "输入有效";

}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,185评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,652评论 3赞 393
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,524评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,339评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,387评论 6赞 391
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,287评论 1赞 301
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,130评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,985评论 0赞 275
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,420评论 1赞 313
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,617评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,779评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,477评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,088评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,716评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,857评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,876评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,700评论 2赞 354

js复习总结

推荐阅读更多精彩内容