>1:JS为什么值得我们学习。
1. 所有主流浏览器都支持JavaScript。
2. 目前,全世界大部分网页都使用JavaScript。
3. 它可以让网页呈现各种动态效果。
在window.onload时,文件中所有内容加载完成,一般将js中的内容卸载head的 window.onload = function()中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.onload = function()
{
}
</script>
>3:基础
3.1:可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容document.write("I love JavaScript!");
3.2 alert(字符串或变量);消息对话框
3.3 confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>
3.4 弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
3.5 open() 方法可以查找一个已经存在或者新建的浏览器窗口
window.open([URL], [窗口名称], [参数字符串])
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
案例:
<script type="text/javascript"> window.open('http://www.imooc.com',
'_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
3.6 close()关闭窗口 ,window.close(); //关闭本窗口,<窗口对象>.close(); //关闭指定的窗口
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
</script>
4:JS DOM编程
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。
DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
案例二:节点的属性:
案例三://实现点击每个li时 弹出li的text
1. 所有主流浏览器都支持JavaScript。
2. 目前,全世界大部分网页都使用JavaScript。
3. 它可以让网页呈现各种动态效果。
4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。
在window.onload时,文件中所有内容加载完成,一般将js中的内容卸载head的 window.onload = function()中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.onload = function()
{
}
</script>
>3:基础
3.1:可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容document.write("I love JavaScript!");
3.2 alert(字符串或变量);消息对话框
3.3 confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>
3.4 弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
3.5 open() 方法可以查找一个已经存在或者新建的浏览器窗口
window.open([URL], [窗口名称], [参数字符串])
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
案例:
<script type="text/javascript"> window.open('http://www.imooc.com',
'_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
3.6 close()关闭窗口 ,window.close(); //关闭本窗口,<窗口对象>.close(); //关闭指定的窗口
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
</script>
4:JS DOM编程
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。
DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。
简单案例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function()
{
//1:获取元素节点
//在编写html文档时,需要确保id属性值是唯一的
var bjNode = document.getElementById("bj");
alert(bjNode);
//获取所有的li节点 使用标签名获取指定节点的集合
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
var cityNodes = document.getElementById("city");
var cityLiNodes = cityNodes.getElementsByTagName("li");
alert(cityLiNodes.length);
//根据html的name属性来获取指定元素的集合
var gendernodes = document.getElementsByName("gender");
alert(gendernodes.length);
/*
若html中没有定义name属性 则getElementsByName()
对于Ie无效,所以使用该方法时无效
*/
var beijingNodes = document.getElementsByName("beijing");
alert(beijingNodes.length);
//其他获取元素节点方法IE不支持
//2:读写属性节点 属性节点即为 某一指定元素的节点属性
//获取元素节点
var textNode = document.getElementById("name");
alert(textNode.value);
textNode.value = "Test";
//3:获取子节点
//获取city的所有子节点
var cityNode = document.getElementById("city");
//利用元素节点的childNodes 可以获取指定元素的所有节点 该方法不实用
alert(cityNode.childNodes.length);
//获取city节点的所有的li节点
var cityLiNode = cityNode.getElementsByTagName("li");
alert(cityLiNode.length);
//获取最后一个节点和第一个节点
alert(cityNode.firstChild);
alert(cityNode.lastChild);
//4:获取文本节点
//获取文本节点所在的元素节点
var beijingNode = document.getElementById("bj");
//通过firstChild定位到文本节点
var beijingNodeChild = beijingNode.firstChild;
//通过操作操作文本节点的nodeValue属性来读取文本节点的值
alert(beijingNodeChild.nodeValue);
//重新设置文本节点的值
beijingNodeChild.nodeValue = "西单";
//alert(beijingNodeChild);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="nj">南京</li>
<li id="xj">西京</li>
<li id="dj">东京</li>
</ul>
<br><br>
<p>你喜欢哪类手机?</p>
<ul id="game">
<li id="apple">苹果</li>
<li id="sum">三星</li>
<li id="huawei">华为</li>
<li id="xiaomi">小米</li>
</ul>
<br>
name:<input type="text" name="username" id="name" value="atguigu">
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>
案例二:节点的属性:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function()
{
//关于节点的属性 nodeType nodeName nodeValue
//在文档中 任何一个节点都有这三个属性
//而 id name value是具体节点的属性
//元素节点的三个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType);//1
alert(bjNode.nodeName);//li
alert(bjNode.nodeValue);//元素节点中没有nodeValue,所以是null
//属性节点
var nameAttr = document.getElementById("name").getAttributeNode("name");
alert(nameAttr.nodeType);//2
alert(nameAttr.nodeName);//属性节点的节点名:属性名
alert(nameAttr.nodeValue);//属性节点的nodeValue 属性值
//文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//3
alert(textNode.nodeName);//"text"
alert(textNode.nodeValue);//文本内容
//nodeTpye nodeName是只读的,NodeValue是可读写的
//以上三个属性 只在文本节点中使用nodeValue 读写文本值时 使用最多。
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="nj">南京</li>
<li id="xj">西京</li>
<li id="dj">东京</li>
</ul>
<br><br>
<p>你喜欢哪类手机?</p>
<ul id="game">
<li id="apple">苹果</li>
<li id="sum">三星</li>
<li id="huawei">华为</li>
<li id="xiaomi">小米</li>
</ul>
<br>
name:<input type="text" name="username" id="name" value="atguigu">
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>
案例三://实现点击每个li时 弹出li的text
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function()
{
//实现点击每个li时 弹出li的text
var liNodes = document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++)
{
liNodes[i].onclick = function()
{
//this为正在相应时间的节点
//alert(this.firstChild.nodeValue);
//此时 i 已经是8了
//因为在加载完页面的时候for循环已经执行完了i=8
//所以liNodes[i].firstChild.nodeValue获取不到值
//alert(i);
var str = this.firstChild.nodeValue;
var reg = /^\^{2}/g;
if(reg.test(str))
{
str = str.replace(reg,"");
}
else
{
str = "^^"+this.firstChild.nodeValue;
}
this.firstChild.nodeValue = str;
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="nj">南京</li>
<li id="xj">西京</li>
<li id="dj">东京</li>
</ul>
<br><br>
<p>你喜欢哪类手机?</p>
<ul id="game">
<li id="apple">苹果</li>
<li id="sum">三星</li>
<li id="huawei">华为</li>
<li id="xiaomi">小米</li>
</ul>
<br>
name:<input type="text" name="username" id="name" value="atguigu">
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>