在页面写入文字
var mystr="hello world!";//变量输出
document.write(mystr);
document.write(mystr+"I love JavaScript");
document.write(mystr+"<br>");//输出后加换行符
//调整页面文字的颜色
document.getElementById("p1").style.color="blue";
如何插入js代码
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
引入js文件
<script src="script.js"></script>
使用函数
{
alert("哈哈，调用函数了!");
}```
警告，调试程序
`alert("i love js");`
消息会话框
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女的吗?");//含有确定和取消按钮
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>
提问消息对话框
<script type="text/javascript">
function rec(){
var score=60; //score变量，用来存储用户输入的成绩值。
score = prompt("输入你的成绩",score);
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
</body>
打开/关闭新窗口
window.open([URL], [窗口名称], [参数字符串])
window.open('http://www.imooc.com','fly','width=300,height=200,menubar=no,toolbar=no,status=no,scrollbars=yes')
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。 _blank：在新窗口显示目标网页 _self：在当前窗口显示目标网页 _top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
window.close(); //关闭本窗口
<窗口对象>.close(); //关闭指定的窗口
<script type="text/javascript"> var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>
通过ID获取元素
获取或替换HTML元素的内容：innerHTML
改变HTML样式style.*
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#CCC";
mychar.style.width="300px";
</script>
显示和隐藏style.display
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";//block显示为块级元素
}
控制类名className
作用：
1.获取元素的class 属性
- 为网页内的某个元素指定一个css样式来更改该元素的外观
比较：
两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。
jq1= numa>numb ;
jq2= numa!=numb ;
document.write("numa大于numb的分数吗？"+jq1+"
")
document.write("numa不等于numb的分数吗？"+ jq2);
函数：
第一种情况:在<script>标签内调用。
<script type="text/javascript">
function add2()
{
sum = 1 + 1;
alert(sum);
}
add2();//调用函数，直接写函数名。
</SCRIPT>
第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。
<html>
<head>
<script type="text/javascript">
function add2()
{
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>
事件：
网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
<input type="button" value="click it" onclick="add2()"> //点击
<input name="确定" type="button" value="确定" onmousemove="message()"/> //鼠标划过
<a href="http://www.imooc.com" onmouseout="message()">点击我</a> //鼠标移开
<form>
<select name="career" onfocus="message()" onfocus="message()"> //聚焦
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
<input name="username" type="text" value="请输入用户名！" onblur="message()"> //失焦
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea> //选中事件
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea> //文本内容改变
<body onload="message()"></body> //加载页面时，弹出对话框“加载中，请稍等…”。onload 常用在 <body> 中，
一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
对象：
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义。
var objectName =new Array();//使用new关键字定义对象
或者
var objectName =[];
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
浏览器对象BOM
window对象:
window.history.length;
window.history.back(); //forward();go();back()相当于go(-1),forward()相当于go(1)
location对象：
Navigator对象：
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
//查看浏览器名称和版本
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("
");
document.write("Browser version"+b_version);
</script>
DOM对象
`getElementById() `方法可返回对拥有指定 ID 的第一个对象的引用（返回的是DOM Element）。
`getElementsByName()`方法返回带有指定名称的节点对象的集合。
因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
`getElementsByTagName()方法`返回带有指定标签名（如input，li等）的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
DOM对象的属性：
使用"."运算符 和 `getAttribute（setAttribute）`通过元素节点的属性名称获取属性的值。
语法：
`elementNode.getAttribute(name)`
`elementNode.setAttribute(name,value)`增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
<span style="color:red">这两个方法只能通过元素节点对象调用。<span>
名词elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字
<div id='test' class="cls" dir="ltr" title="wott" ss="ss"></div>
var e = document.getElementById('test');
alert(e.id);//'test'
alert(e.className);//'cls'
alert(e.ss);//undefined(IE下为 'ss');
//注意浏览器差异
alert(e.getAttribute('class'));//'cls'(Firefox)
alert(e.getAttribute('className'));//'cls'(IE)
//用getAttribute 来引用，可以访问自定义属性，不区分大小写。
alert(e.getAttribute('id'));//'test'
alert(e.getAttribute('ID'));//'test'
//对于自定义属性，使用.运算符的设置的属性无法通过getAttribute获取，反之亦然。
//对于style,className的设置，通常是使用.运算符来实现
el.style.backgroundColor = 'blue';
el.className = 'nav';//works in all browers.
网友评论