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>");//输出zxx6662.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>实现界面：
