Javascprit入门笔记
2017-09-17 本文已影响0人
可怜丶狼
1、JS的位置和使用方法
一般来说JS的位置是任意的，可以在head，可以在body，也可以在其他任意地方。
"index.html"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热身</title>
<script>
document.getElementById("p2").style.color="red";
</script>
</head>
<body>
<p id="p1">我是第一段文字</p>
<p id="p2">我是第二段文字</p>
<script type="text/javascript">
document.write("hello");
document.getElementById("p1").sty.color = "blue";
</script>
</body>
</html>
在这里你甚至可以不写代码，把js代码写在其他文件里，到时再index.html文件里调用就好了，是不是很方便
调用方法<script scr = "url">默认是本地文件夹
"index.html"
<!DOCTYPE HTML>
<html>
<head>
<script src = "script.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
"script.js"
//请写入JS代码
alert("JS代码");
document.write("引用JS文件!");
2、DOM(document)的使用
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
1、最简单的输出
document.write("String")
2、常用的获取<p>元素的列表
var p=document.getElementById("p-ID");
获得元素列表后对其可进行许多操作
更改文本内容innerHTML
p.innerHTML = "String";
改变HTML样式
p.style.color= "color"; //字体颜色
p.style.width = "300px"; //一行宽度
p.style.fontSize = "20px"; //字体大小
p.style.background="blue"; //背景颜色
显示与隐藏
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<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>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
通过获取类名更改CSS样式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<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>
</body>
</html>
3、一些杂七杂八的以后会补充
alert("String"); //消息提醒
confirm("String") ;//确定消息框，确定返回true，否定返回false
prompt();//消息对话框，获取用户输入的内容
window.open('目的网址','打开方式','显示细节')；
window.close(); // window是个比较广泛的类，用处用法比较多，以后补齐
