1.1输出
<body>
<p id="p1">我是第一段文字</p>
<script type="text/javascript">//在html中插入js代码
document.write("hello,world!");//输出hello,world!
console.log("hello,world!")//控制台输出hello,world!
document.getElementById("p1").style.color="red";//获取id为p1的对象,访问样式中的颜色,并将其设置为红色
alert("hello,world");//弹框显示"hello world"
</script>
</body>
直接在js里面写:document.getElementById(“hello,world”).style.color=“red”;会报错。因为document.getElementById(" ") 得到的是一个对象;alert 显示得到的是“ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才是具体的值!
1.2 在head和在body中用js的区别
js在head里写是看不见的,但是在body里写能看见,就像一个人,有外表和内部结构,一个看得见,一个看不见。
1.3 注释的两种方法
//单行注释
/*
多行注释
我哥
牛逼
*/
1.4 函数
<body>
<script>
function zxx()
{
var cousinage=23;//定义一个变量并赋值
document.write("the function name is my cousin's acronym,his age ");
if(cousinage==23)
alert("is"+cousinage);//输出结果就是这个
else
alert("...e...I don't know his age, but he is very cute!");
}
</script>
<input style="background-color: red;" type="button" value="zxx" onclick="zxx()">;//在onclick中调用了zxx()函数
</body>
2.1 js 输出内容
var num1 = 1;
var num2 = 2;
var char1 = "zxx";
var char2 = "666";
document.write(num1 + num2 + "<br>");//输出3,运算符功能
document.write(num1 + char1 + "<br>");//输出1zxx,实现连接
document.write(num1 + char2 + "<br>");//输出1666
document.write(char1 + char2 + "<br>");//输出zxx666
2.2 弹框
- 对话框:confirm();
function money()
{
var money = confirm("您是否要续费");
if(money==true)
document.write("续费成功");
else
document.write("支付失败");
}
money();
2.警告框:alert();
alert("警告");
3.消息对话框:prompt()
var zxx;
var mycousin = prompt("请输入我堂哥的名字:",zxx);//将变量zxx的值赋值给mycousin
if(mycousin=="zxx")
alert("是");
else
alert("否");
4.打开新窗口:window.open(‘网页地址’,‘窗口名称’,‘设置窗口参数’);
例如:
window.open('http://baidu.com','window_name','height=200px,width=300px');
就会直接打开窗口
5.关闭窗口:
- 关闭本窗口:window.close(‘网址’);
- 关闭指定窗口:[窗口对象].close();
var baidu= window.open('http://baidu.com','window_name','height=200px,width=300px');
baidu.close();
3.1dom操作:
1.通过ID获取元素:
document.getElementById();
2.获取或替换html元素内容:
对象.innerHTML;
<body>
<p1 id="zxx">我哥牛逼!</p1>
<script>
var name = document.getElementById("zxx");
document.write(zxx.innerHTML);
zxx.innerHTML="我哥爱唱歌";//在控制台时zxx的语句被替换成了这个
document.write(zxx.innerHTML);
</script>
</body>
3.2 隐藏与显示
隐藏:Object.style.display=“none”;
显示:Object.style.display=“block”;
var cousin = document.getElementById("zxx");
function text1()
{
cousin.style.display = "none";
}
function text2()
{
cousin.style.display = "block";
}
</script>
<input type="button" value="隐藏内容" onclick="text1()">
<input type="button" value="显示内容" onclick="text2()">
3.3 控制类名:className 属性
className 属性设置或返回元素的class 属性。
语法:
object.className = classname
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 20px;
}
.zxx1{
color: springgreen;
font-size: 30px;
}
.zxx2{
color: steelblue;
font-size: 40px;
}
</style>
</head>
<body>
<p id="p1">zxx牛逼</p>
<input type="button" value="zxx" onclick="cousin1()"/>
<p id="p2" class="zxx1">我哥牛逼</p>
<input type="button" value="666" onclick="cousin2()"/>
<script>
function cousin1()
{
var name1=document.getElementById("p1");
p1.className="zxx1";//设置属性为zxx1
}
function cousin2()
{
var name2=document.getElementById("p2");
p2.className="zxx2";//修改属性变成zxx2
}
</script>
</body>
</html>
实现界面: