前端学习第四周

QM36'S BLOG

2018-09-30

学习笔记

JavaScript对事件做出反应

1 2	<button type="button" onclick="alert('Welcome!')">点击这里</button>

改变html里面的内容


<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

通过指定id访问html里面的元素，将“JavaScript 能改变 HTML 元素的内容”变成“Hello JavaScript!”

JS的输出


<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

简单输出如下

<script>
var x=2;
var y=3;
var z=2+3;

document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>

JS创建数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

1	var cars=new Array("Audi","BMW","Volvo");

1	var cars=["Audi","BMW","Volvo"];

条件运算符

1	greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 “PRES”，则向变量 greeting 赋值 “Dear President “，否则赋值 “Dear”。

隐藏文本与显示文本

<p id="p1">这是一段文本。</p>

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

对事件做出反应：点击文本之后，变成“谢谢”

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

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

onchange 事件常结合对输入字段的验证来使用。如下：将文本框中的小写字母变成大写字母


<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onfocus:当输入字段获得焦点时，改变其背景色。

获取文本框中的内容,并弹出窗口

<input type="text" id="fname">
function myfunction() {
          var x = document.getElementById('fname');
          alert(x.value);
        }

问题

笔记里面的button为什么没有
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖（没有理解）
document.write(x + “
“);x后面的是什么意思
var 与new的区别
访问对象的方法或者属性时，需要var一个对象吗？返回值？
这两个函数是什么
1
Date().getHours()
innerHTML 与alter 的区别
从事件处理器调用一个函数

没看懂第三行


<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

obj 是什么


function mOver(obj)
{
obj.innerHTML="谢谢"
}

onmouseup和onclick有什么区别