js基础笔录

1.页面中获取对象
document.getElementById("demo")

2.在页面加载时向 HTML 的 <body> 写文本
document.write("<h1>This is a heading</h1>");
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

3.改变 HTML 元素的样式
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式

4.获取HTML 元素的值（一般input使用）
var x=document.getElementById("demo").value;

5.更改图片
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

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

7.变量声明
var name="Gates", age=56, job="CEO";

8.未使用值来声明的变量，其值实际上是 undefined。
重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;

9.变量声明
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123

数组的声明
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者：
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];

对象的创建
var person={firstname:"Bill", lastname:"Gates", id:5566};
或
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性访问的两种方式：
name=person.lastname;
name=person["lastname"];

10.Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;

11.函数（变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。）

function functionname()
{
这里是要执行的代码
}

①有时，我们会希望函数将值返回调用它的地方。
function myFunction()
{
var x=5;
return x;
}

var myVar=myFunction();

②返回值的使用：
document.getElementById("demo").innerHTML=myFunction();

计算两个数字的乘积，并返回结果：
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

③在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

13.JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

carname="Volvo";

14.如果把数字与字符串相加，结果将成为字符串。
x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

15.给定 x=5，下面的表格解释了比较运算符：
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false

16.三元运算符
variablename=(condition)?value1:value2

17.switch 语句用于基于不同的条件来执行不同的动作
var day=new Date().getDay();
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
}

18.For/In 循环
JavaScript for/in 语句循环遍历对象的属性：

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

for (x in person)
{
txt=txt + person[x];
}

19.do/while 循环
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);

20.for 语句实例
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}

21.while 语句实例
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}

22.
Break 语句
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}

Continue 语句
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}

23.JavaScript 标签
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

24.查找 HTML 元素

通过 id 找到 HTML 元素
var x=document.getElementById("intro");
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

25.改变 HTML 属性
语法：document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";

26.改变 HTML 样式
语法：document.getElementById(id).style.property=new style
document.getElementById("p2").style.color="blue";
<button type="button" onclick="document.getElementById('id1').style.color='red'">

27.隐藏文本
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />

29.点击事件
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

30.HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
document.getElementById("myBtn").onclick=function(){displayDate()};

31.onload 和 onunload 事件会在用户进入或离开页面时被触发。

32.onchange 事件常结合对输入字段的验证来使用。
当用户改变输入字段的内容时，会调用 upperCase() 函数。

33.onmouseover 和 onmouseout 事件

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

35.向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
这段代码创建新的 <p> 元素：
var para=document.createElement("p");
向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
向 <p> 元素追加这个文本节点：
para.appendChild(node);
向一个已有的元素追加这个新元素。
var element=document.getElementById("div1");
element.appendChild(para);
</script>

36.删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

37.创建对象的方法：
①
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

②
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

③使用函数来构造对象
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var myFather=new person("Bill","Gates",56,"blue");
④对象属性的赋值
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
changeName() 函数 name 的值赋给 person 的 lastname 属性。
myMother.changeName("Ballmer");

⑤对象属性的遍历

38.字符串(String)对象
计算字符串的长度
txt.length

为字符串添加样式
txt.fontcolor("Red")
txt.fontsize(16)
txt.link("http://www.w3school.com.cn")

indexOf() 方法
if(str.indexOf("World")!=-1){}

match() 方法
if (element.src.match("bulbon")){}

如何替换字符串中的字符 - replace()
document.write(str.replace(/Microsoft/,"W3School"))

39.时间：
返回当日的日期和时间
如何使用 Date() 方法获得当日的日期。

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
var d=new Date();
document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");

setFullYear()
如何使用 setFullYear() 设置具体的日期。
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)

toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
var d = new Date()
document.write (d.toUTCString())

getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
<script type="text/javascript">

var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"

document.write("今天是" + weekday[d.getDay()])

</script>

显示一个钟表
如何在网页上显示一个钟表。

40.
①数组的遍历：
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}

②合并两个数组 - concat()
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))

③用数组的元素组成字符串 - join()
<script type="text/javascript">

var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join());

document.write("<br />");

document.write(arr.join("."));

</script>

④文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

</script>
数字数组 - sort()
如何使用 sort() 方法从数值上对数组进行排序。
<script type="text/javascript">

function sortNumber(a, b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

⑤数组的定义
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

var mycars=new Array("Saab","Volvo","BMW")

41.Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

var b1=new Boolean( 0)
var b2=new Boolean(1)
var b3=new Boolean("")
var b4=new Boolean(null)
var b5=new Boolean(NaN)
var b6=new Boolean("false")

0 是逻辑的 false
1 是逻辑的 true
空字符串是逻辑的 false
null 是逻辑的 false
NaN 是逻辑的 false
字符串 'false' 是逻辑的 true

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

41.Math（算数）对象的作用是：执行常见的算数任务。
round()
如何使用 round()。
random()
如何使用 random() 来返回 0 到 1 之间的随机数。
max()
如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）
min()
如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

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

42.RegExp 对象用于规定在文本中检索的内容。

RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
①
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是： true

②
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：e

在使用 "g" 参数时，exec() 的工作原理如下：
找到第一个 "e"，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
由于这个字符串中 6 个 "e" 字母，代码的输出将是：
eeeeeenull

③compile()
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"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
truefalse

42.Window Screen
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

43.Window Location
window.location 对象在编写时可不使用 window 这个前缀。
一些例子：
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL。
location.assign() 方法加载新的文档。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

window.navigator 对象包含有关访问者浏览器的信息。
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;

44.可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
①警告框
alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")

②确认框
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>

③提示框
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
</head>
<body>

45.JavaScript 计时

①简单的计时
单击本例中的按钮后，会在 5 秒后弹出一个警告框。
var t=setTimeout("alert('5 秒！')",5000)

②另一个简单的计时
本例中的程序会执行 2 秒、4 秒和 6 秒的计时。
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)

③在一个无穷循环中的计时事件
在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>

④带有停止按钮的无穷循环中的计时事件
在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>

⑤使用计时事件制作的钟表
一个 JavaScript 小时钟
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>

46.cookie 用来识别用户。

js基础笔录的更多相关文章

js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现首 ...
js 基础
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
[JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
JS基础（超级简单）
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
JS基础知识总结
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

随机推荐

【C#】清除webBrowser 缓存和Cookie的解决方案
试了很多方法,最后发现万剑大哥的方法管用,转载一下转自:https://www.cnblogs.com/midcn/p/3527123.html 通过测试webBrowser与IE缓存和Cookie ...
redis命令集
查看使用运行服务:ping 关闭服务的连接:quit 切换数据库:select index 连接: redis-cli -h -a myPassword 查看密码: config get requir ...
OpenStack API映射分析
Nova代码阅读确定服务类型 RPC服务 WSGI服务查询cmd目录下的对应的服务启动脚本,根据服务创建方式来判断服务类型,service.WSGIService表示WSGI服务,service. ...
Spark TaskScheduler 概述
TaskScheduler 原理: 1. DAGScheduler 在提交Taskset给底层调度器的时候是面向接口TaskScheduler的, 这符合面向对象中依赖抽象原则,带来底层资源调度器的可 ...
mui 从子页面返回至父页面，同时刷新父页面
今天在写页面的时候,有一个需求,就是新闻列表项的时候,会显示出浏览次数,点击进入页面的时候,也会有浏览次数,且浏览次数比点击之前的已经+1了.那么用户返回到新闻列表页的时候,浏览次数应该更新了. mu ...
Shell操作相关的快捷键 --Linux
一.shell和bash shell --unix --Bourne shell ,bash --linux --Bourne again shell.bash (GNU Bourne-Again S ...
AtCoder Beginner Contest 115 题解
题目链接:https://abc115.contest.atcoder.jp/ A Christmas Eve Eve Eve 题目: Time limit : 2sec / Memory limit ...
Exadata SL6 是个什么鬼？
就在前两天,ORACLE的Exadata家族又发布了一个新成员:SL6. 变化上给人最直观的感觉是:从以前的X86架构变成了SPARC架构. Exadata Database Machine SL6 ...
iOS无线真机调试
打开xcode,选择Window > Devices and Simulators 用数据线连接设备选择 Connect via network
Java对日期Date类进行加减运算一二三
转载大神 https://blog.csdn.net/hacker_lees/article/details/74351838

js基础笔录

js基础笔录的更多相关文章

随机推荐

热门专题