document.write("xxx"); // 在html页面中 输出点东西
alert("弹窗")； // 这个东西是一个弹窗，在点击弹窗的按钮之前，页面中不能做任何操作。
confirm("你喜欢js吗") 返回值 boolean , true 确定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证Confirm</title>
</head>
<body>
<script type="text/javascript">
var myChar = confirm("你喜欢javaScript 吗？")
if(myChar){
document.write("真棒，加油")
}else{
document.write("不喜欢拉倒")
}
</script>
</body>
</html>
image.png
window.open("url","窗口名称","参数字符串")
/*
* _blank： 在新窗口显示目标网页
* _self： 在当前窗口显示目标网页
*_top： 框架网页中在上部窗口中显示目标网页
*/
window.open("www.imooc.com","_blank","width=300，height=200")
window.close() 关闭窗口
window.close(); 直接关闭当前窗口
<script type="text/javascript">
var mywin=window.open("http://www.imooc.com");
mywin.close();
</script>
认识DOM
我觉得 通过 document.getElementById("id") 拿回来的对象就是一个 DOM。
document.getElementById("id")
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
</script>
innerHTML 属性用于获取或替换 HTML 元素的内容
<h2 id="con">javascript</H2>
<p> 。。。。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "Hello world!"
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
输出结果 == 原标题:javascript
修改后的标题:Hello world!
修改Html的样式
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var myChar= document.getElementById("con");
myChar.style.color ="red";
myChar.style.backgroundColor="#CCC";
myChar.style.width="300px";
</script>
显示和隐藏属性 object.style.display
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
控制类名 className
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className ="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
网友评论