JavaScript笔记_txt += person[x] + " ";-CSDN博客

本文链接：https://blog.csdn.net/qq_18072961/article/details/106311406

1.JavaScript 是属于网络的脚本语言！是一种在浏览器端执行的语言！脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

2.写入HTML的实例

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

3.<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

结果：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

4.段落元素由 p 标签定义

5.<button type="button" οnclick="alert('Welcome!')">点击这里</button>

6.DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准

7.将javascript保存到外部文件，文件的扩展名是.js <script src="myScript.js"></script>

8.如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法

9.将id=demo的元素改成Hello World! document.getElementById("demo").innerHTML="Hello World";

10.我们使用 var 关键词来声明变量(和int 声明一样) var可以用作字符型，布尔型，字符串

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

11.如果把数字和字符串加起来是字符串

12.break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代

13.当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

14.修改HTML的内容：一般使用innerHTML属性document.getElementById(id).innerHTML=new value；

15.在<h1>元素上点击时，会改变其内容。

<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

16.onchange 事件常结合对输入字段的验证来使用

17.onmouseover（将鼠标移到上面）和 onmouseout （将鼠标移下来）事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

18.onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

19.如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

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

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

20.删除已有的 HTML 元素

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

21.RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

22.JS 对象

JS 对象

JS 数字

JS 字符串

JS 日期

JS 数组

JS 逻辑

JS 算数

JS 正则表达式

23.JS Window

JS Screen

(screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度)

JS Location

(location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口（80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）)

JS History

(Window.history.back() - 与在浏览器点击后退按钮相同 Window.history.forward() - 与在浏览器中点击按钮向前相同)

JS Navigator

(window.navigator 对象包含有关访问者浏览器的信息

eg:)

JS PopupAlert

JS Timing

JS Cookies(cookie用来识别用户)

24.javaScript库(javascript框架)

jQuery

（jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）

jQuery 同时提供 companion UI（用户界面）和插件）

Prototype

（Prototype 是一种库，提供用于执行常见 web 任务的简单 API

API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。）

MooTools

(MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API

MooTools 也含有一些轻量级的效果和动画函数)

25.通过指定的 id 来访问 HTML 元素，并改变其内容：document.getElementById("demo").innerHTML="我的第一段 JavaScript";

26.内容（innerHTML）

27.直接把 <p> 元素写到 HTML 文档输出中：document.write("<p>我的第一段 JavaScript</p>");

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

28.alert('welcome!') //出现一个提示框

29.document.getElementById("demo").innerHTML="Hello World";//向 id="demo" 的 HTML 元素输出文本 "Hello World"

30.document.write("Hello \

World!"); //可以在文本字符串中使用反斜杠对代码行进行换行

31.isNaN() 函数用于检查其参数是否是非数字值

32.声明变量：var

33.document.write(carname1 + "<br>")

34.var cars=new Array();

cars[0]="Audi";

cars[1]="BMW";

cars[2]="Volvo"; //数组

35.

var i;

var cars = new Array();

cars[0] = "Audi";

cars[1] = "BMW";

cars[2] = "Volvo";

for (i=0;i<cars.length;i++)

{

document.write(cars[i] + "<br>");

}

</script>

36，

var person={

firstname : "Bill",

lastname : "Gates",

id : 5566

};

document.write(person.lastname + "<br />");

document.write(person["lastname"] + "<br />");//两个是一样的

</script>

37. toUpperCase()//把文本转化成大写

38.<button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>

function myFunction(name,job)

{

alert("Welcome " + name + ", the " + job);

}

</script>

39.如果把数字与字符串相加，结果将成为字符串

40.variablename=(condition)?value1:value2

41.var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{

txt=txt + person[x];

} //JavaScript for/in 语句循环遍历对象

42.do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行

function myFunction()

{

var x="",i=0;

{

x=x + "The number is " + i + "<br>";

i++;

}

while (i<5)

document.getElementById("demo").innerHTML=x;

}

</script>

43.break 语句可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）

44.break list; //break 语句可用于跳出任何 JavaScript 代码块

45.var x=document.getElementById("demo").value; //取值

46.

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

47.<script>

document.getElementById("p1").innerHTML="New text!";

</script> //改变HTML元素的内容

48.<img id="image" src="/i/eg_tulip.jpg" />

document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";

</script> //改变HTML的属性

49.<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

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

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script> //改变p元素的样式

50.<h1 id="id1">My Heading 1</h1>

<button type="button"

οnclick="document.getElementById('id1').style.color='red'">

点击这里！</button> //改变h1的样式

52.

<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

53.<head>

function changetext(id)

{

id.innerHTML="谢谢!";

}

</script>

</head>

<body>

<h1 οnclick="changetext(this)">请点击该文本</h1>

</body>

54.<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

document.getElementById("myBtn").οnclick=function(){displayDate()};

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script> //点击按钮时，会执行该函数

55.<body οnlοad="checkCookies()">

function checkCookies()

{

if (navigator.cookieEnabled==true)

{

alert("已启用 cookie")

}

else

{

alert("未启用 cookie")

}

</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>

</body> //用来处理cookie

56.onchange 事件常结合对输入字段的验证来使用

57.<script>

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script> //将文本的内容变成大写

58.<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

function mOver(obj)

{

obj.innerHTML="谢谢"

}

function mOut(obj)

{

obj.innerHTML="把鼠标移到上面"

}

</script>

</body> //onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

59.<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">单击按钮将项目添加到列表中</p>

function myFunction(){

var node=document.createElement("LI");

var textnode=document.createTextNode("Water");

node.appendChild(textnode);

document.getElementById("myList").appendChild(node);

}

</script>

<p><strong>注意:</strong><br>首先创建一个节点，<br> 然后创建一个文本节点，<br>然后将文本节点添加到LI节点上。<br>最后将节点添加到列表中。</p>

//在ul的后面再加一个<li>Water<li>

60.var para=document.createElement("p"); //创建一个新的p元素

var node=document.createTextNode("这是新段落。");//创建文本

para.appendChild(node);//向p元素中追加文本节点

var element=document.getElementById("div1");

element.appendChild(para); //向这个element中追加新的元素

61.<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script> //删除已有的html元素

62.<script>

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");

</script> //使用函数来构造对象

63.var txt="Hello world!"

document.write(txt.toUpperCase()) //将字符串转换成大写

64.var mycars=new Array() //创建数组

65.var myBoolean=new Boolean(); //创建布尔对象

var myBoolean=new Boolean(0);

var myBoolean=new Boolean(null);

var myBoolean=new Boolean("");

var myBoolean=new Boolean(false);

var myBoolean=new Boolean(NaN); //如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）

66.var myBoolean=new Boolean(1);

var myBoolean=new Boolean(true);

var myBoolean=new Boolean("true");

var myBoolean=new Boolean("false");

var myBoolean=new Boolean("Bill Gates"); //值都为1

67.document.write(Math.round(4.7)) 5 //对一个数进行四舍五入

document.write(Math.random()) // random() 方法来返回一个介于 0 和 1 之间的随机数

document.write(Math.floor(Math.random()*11)) // floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数

68.var patt1=new RegExp("e"); //创建一个正则（检索RegExp）对象

document.write(patt1.test("The best things in life are free")); true //test() 方法检索字符串中的指定值。返回值是 true 或 false

69.var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free")); e //exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

70.compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

71.

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

var w=window.innerWidth

// document.documentElement.clientWidth

//document.body.clientWidth;

var h=window.innerHeight

// document.documentElement.clientHeight

// document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"

</script>

72.

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

73.document.write("可用宽度：" + screen.availWidth); //screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

document.write("可用高度：" + screen.availHeight); //screen.availHeight 属性返回访问者屏幕的高度

74.

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口（80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）

window.location.assign("http://www.w3school.com.cn") //location.asssign加载一个新的文档

75. history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

76.<div id="example"></div>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";

txt+= "<p>Browser Name: " + navigator.appName + "</p>";

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";

txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";

txt+= "<p>Platform: " + navigator.platform + "</p>";

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

结果：

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows)

Cookies Enabled: true

Platform: Win64

User-agent header: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

User-agent language: undefined

77.\n添加折行

78.confirm("文本") //确认框

prompt("文本","默认值") //提示框

alert("文本") //警告框

79.

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

80.cookie 用来识别用户

81.js里所有的对象都有proto属性(对象，函数)，指向构造该对象的构造函数的原型。

只有函数function才具有prototype属性。这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

82.window.opener 是父窗体

window是新的窗体

83.<body οnunlοad="goodbye()">

onunload 属性会在页面下载时触发（或者浏览器窗口已关闭）。

onunload 在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等）。

注释：如果您重载页面，也会触发 unload 事件（以及 onload 事件）。

84.ProductAdd.push.apply(ProductAdd,pensionList.Tempension)

a.push.apply(a,b) //在数组后面在添加即拼接数组

85.JS 事件：

onload加载完成事件

onclick单击事件

onblur失去焦点事件

onchange内容发生改变事件经常用于select下拉列表选中后的内容发生改变时候触发

onsubmit表单提交事件经常用来在表单提交的时候验证所有表单项是否合法。

86.onclick 鼠标单击事件像Button等这类控件常用。

onblur 失去焦点事件像Text文本框等控件常用。

onchange 状态改变事件像Select、text 等常用。

87.当用户离开input输入框时执行一段Javascript代码：

88.