文章目录
JavaScript
体验JavaScript
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验JavaScript语言</title>
</head>
<body>
<h1>体验JavaScript语言</h1>
<script type="text/javascript">
window.document.write("hello,world");
</script>
</body>
</html>
语法
引入方式与引入位置
向HTML页面插入JavaScript的主要方法,就是使用<script元素>。
使用<script>
元素的方式有两种:直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。
- JS代码存放在标签对
<script>...</script>
中。 - 使用script标签的src属性引入一个js文件。(方便后期维护,扩展)
例:<script src=”test.js” type=”text/javascript”></script>
注:规范中script标签中必须加入type属性。
内部
外部
html文件
<script>
标签的位置
关于<script>
标签的位置,<script>
应该放在页面的<head>
元素中。
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在HTML中使用JavaScript</title>
<script type="text/javascript" >
window.document.write("世界你好!!!");
</script>
</head>
<body>
<h1>将JavaScrip标签放在head上</h1>
</body>
</html>
注意:
1、 页面上可以有多个<script>
标签
2、 <script>
标签按顺序执行
3、 <script>
标签可以出现在任意的页面位置
4、<script>
标签一定要写</script>
关闭,而不能<script/>
这样关闭。否则没有任何错误信息,但是没有运行结果。
常用函数
window.alert() 或写为 alert()
:显示一个提示框显示内容。
window.document.write()
:在网页的当前位置处写内容。
变量
<script type="text/javascript" >
//定义变量
var color = "red";
var num = 25;
var visible = true;
</script>
同时,可以随时改变变量所存数据的类型(尽量避免这样做)。
<script type="text/javascript" >
//定义变量
var message = "hello";
message = 100;
alert(message);
</script>
该案例中变量message一开始保存了一个字符串值"hi" 然后又被一个数值100取代。这在ECMAScript是有效的,但是不建议这样使用。
使用细节:
1、 var关键字在定义变量的时候可以省略不写
2、 变量名可以重复,后面的将覆盖前面的变量
3、 变量的类型取决于值的类型
一条语句定义多个变量。
中间使用豆号隔开即可,可初始化,也可以不初始化。
<script type="text/javascript" >
var name = "jack",
age = 28,
gender = "男";
</script>
JavaScript代码块及其代码块变量作用域
<script type="text/javascript" >
//代码块 (Java)对代码进行封装 隔离变量的作用域
{
var a = 100;
document.write(a + "</br>");
} {
document.write(a + "</br>");
//JavaScript不会隔离变量作用域
}
</script>
JavaScript函数基础
函数主要用来封装具体的功能代码。
函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。
注意:函数的形参是不用声明使用的。
函数的基本语法是这样的:
function functionName(arg0, arg1, … argN) {
statements
}
例如:
function sayHi(sName, sMessage) {
alert("Hello " + sName + sMessage);
}
调用函数?
函数可以通过其名字加上括号中的参数进行调用,如果有多个参数。
如果您想调用上例中的那个函数,可以使用如下的代码:
sayHi("David", " Nice to meet you!")
调用上面的函数 sayHi() 会生成一个警告窗口。
函数的返回值
没有返回值类型,如果一个函数需要返回值直接使用return即可.
该函数只需要使用 return 运算符后跟要返回的值即可。
function sum(iNum1, iNum2) {
return iNum1 + iNum2;
}
注释:如果函数无明确的返回值,或调用了没有参数的 return 语句,那么它真正返回的值是 undefined。
函数格式
Function 函数名(参数列表){
代码;
return 返回值; //return 不是必须的.
}
示例:
function foo() {
alert("test");
}
function foo2( a ){
alert(a);
return; // 没有返回值,表示方法执行完了,后面如果有代码就不会执行了
}
function foo3( a, b ){
alert(a + b);
}
function foo4( a, b ){
return a + b;
}
注意事项:
1.不需要类型,只写形参的名称就可以了。
2声明时不需要指定返回值类型;return可以有,也可以没有。
3. javascript中的函数没有重载的形式,后定义的函数会直接覆盖前面 的函数。
4. 一个函数可以接收任意个 参数。
参数:
JS的函数都是类似于Java中可变参数的。
在函数中可以直接使用arguments变量,arguments是一个数组,表示所有传递过来的参数。
在声明函数时,定义的形参就对应arguments数组中相应位置的参数值,写形参只是用着方便一点。
参数示例
定义:
function foo( a, b, c ){
...
}
调用:
foo()
foo( 1, 2 )
foo( 1, 2, 3 )
foo( 1, 3, 5, 7, 9 )
foo( "aa", null, "cc" )
没有重载
当同一个名称的函数定义多次时,最终使用的是最后一个的定义。没有重载!
例:
function sum(){ alert("11"); }
function sum(a,b){ alert("22"); }*
调用时写sum(1,2),结果还是显示“22”。
总结:
特点:
1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行,与顺序无关。
4、可以通过函数名赋值函数,函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。
案例:体验JavaScript
定义一个输入框输入的月份,然后输出本月对应的天数。
<html>
<head>
<title>学习JavaScript</title>
</head>
<body>
月份:
<input type="text" id="month">
<input type="button" value="显示天数" onclick="foo()">
<!--
31天:1,3,5,7,8,10,12
30天:4,6,9,11
28天:2
-->
<script type="text/javascript">
function foo(){
var monthValue = document.getElementById("month").value;
// 如果是非数字,则不再继续执行
if( isNaN(monthValue) ){
alert("请输入正确的月份!");
return;
}
// 转为数字
monthValue = parseInt(monthValue);
// 判断范围
if( monthValue < 1 || monthValue > 12){
alert("请输入正确的月份(1--12)!");
return;
}
// 根据月份显示天数
switch(monthValue){ // 这时不会自动转换类型,所以先转型
case 2:
alert("28天");
break;
case 4:
case 6:
case 9:
case 11:
alert("30天");
break;
default:
alert("31天");
break;
}
}
</script>
</body>
</html>
自定义对象
无参构造函数
/*
* 自定义对象
*
* */
function Person() {
window.document.write("constructor()<br>");
}
var person = new Person();
//定义属性
person.name = "jack";
person.age = 23;
//定义方法
person.work = function() {
window.document.write("person working...<br/>");
};
//获取构造函数
window.document.write(person.constructor + "<br/>");
window.document.write(person.name + "," + person.age + "<br/>");
person.work();
有参数构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.work = function() {
alert(this.name + ":" + this.age);
}
}
var person = new Person("jack", 28);
person.work();
BOM
BOM编程基础
全称 Browser Object Model,浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
window 对象
- Window 对象是 JavaScript 层级中的顶层对象。
- Window 对象代表一个浏览器窗口或一个框架。
- Window对象会在 或 每次出现时被自动创建。
window中的方法
document 对 Document 对象的只读引用
location 用于窗口或框架的 Location 对象
history 对 History 对象的只读引用。
document.tilte 设置网页的标题
moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveby() 相对于目前的位置移动。
resizeTo() 调整当前浏览器的窗口。
open() 打开新窗口显示指定的URL(有的浏览器中是打一个新的选项卡)
setTimeout(vCode, iMilliSeconds) 超时后执行代码。
setInterval(vCode, iMilliSeconds) 定时执行代码,第一次也是先待,到时再执行。
事件
a) 事件说明
基本上所有的HTML元素中都可以指定事件属性。
每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头,后面的是事件的触发方式,如:
onclick,表示单击
onkeydown,表示键按下
...
b) 常用的事件类型:
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
location 对象
Location 对象是由 JavaScript runtime engine 自动创建的,包含有关当前 URL 的信息。
location中的重要方法:
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
screen 对象
Screen 对象是由 JavaScript runtime engine 自动创建的,包含有关客户机显示屏幕的信息。
属性:
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
示例:
document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");
document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");
document对象
该对象代表整个文档页面
对象的集合:
all 获取页面所有元素对象
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象
DOM
DOM简介
全称Document Object Model,即文档对象模型。
DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,
组建好之后,按照树的结构将页面显示在浏览器的窗口中。
节点层次
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// 获取dom 树, 获取document 对象.
var dom = window.document;
// all 获取页面中所有的标签节点 ,注释和文档类型约束.
function testAll() {
var allArr = dom.all;
alert(allArr.length);
for (var i = 0; i < allArr.length; i++) {
//获取节点名称
alert(allArr[i].nodeName);
}
}
// anchors 获取页面中的所有的锚连接.
function testAnchors() {
var anArr = dom.anchors;
alert(anArr.length);
}
// froms 获取所有的form 表单对象
function testForms() {
var formArr = dom.forms;
alert(formArr.length);
alert(formArr[0].nodeName);
}
// images
function testImages() {
var imageArr = dom.images;
alert(imageArr.length);
}
// links 获取页面的超链接.
function testLinks() {
var linkArr = dom.links;
//alert(linkArr.length);
for (var i = 0; i < linkArr.length; i++) {
//alert(linkArr[i].nodeName);
}
for (var i in linkArr) {
alert(i);
}
}
//testLinks();
// 获取页面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">百度两下</a>
<a href="http://www.baigu.com">百谷一下</a>
<a name="one"></a>
<a name="two"></a>
<form>
<label>姓名:</label><!--默认不写type 就是文本输入框-->
<input type="text"/>
</form>
</body>
</html>
获取节点对象案例
document.getElementById(“html元素的id”)
document.getElementsByTagName(“标签名”)
document.getElementsByName(“html元素的name”)
示例:
1,得到所有的div元素并显示信息(innerHTML)。
2,得到所有div元素中id为"test"的结果。
Var dom = window.document;
function testByTagName() {
var iptArr = dom.getElementsByTagName("input");
for (var i = 0; i < iptArr.length; i++) {
alert(iptArr[i].value);
}
}
// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2,得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() {
var user = dom.getElementById("username");
alert(user.value);
user.value = "rose";
}
//testById();
//3. 获取所有标签name 为like的元素.获取value值.
function testByName() {
var likeArr = dom.getElementsByName("like");
for (var i = 0; i < likeArr.length; i++) {
alert(likeArr[i].value);
}
}
testByName();
属性操作练习
1,写一个form,其中有多个checkbox。
2,获取所有选中的数量。
3,实现全选与全不选的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getSum()
{
/*
需求:通过点击总金额按钮获取被选中的条目的金额的总和,并将总金额显示在按钮右边。
思路:
1,先获取所有的checkbox对象。
2,对这些对象进行遍历。判断哪个对象被选中。
3,对被选中对象的金额进行累加。
4,显示在按钮右边。
*/
var items = document.getElementsByName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
{
sum += parseInt(items[x].value);
}
}
var str = sum+"元";
document.getElementById("sumid").innerHTML = str.fontcolor('red');
}
function checkAll(node)
{
/*
需求:通过全选checkbox,将其他条目都选中。
思路:
只要将全选checkbox的checked状态赋值给其他的item checked状态即可。
*/
//var allNode = document.getElementsByName("all")[index];
var items = document.getElementsByName("item");
for(var x=0; x<items.length; x++)
{
items[x].checked = node.checked;
}
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="button" value="总金额:" onclick="getSum()" /><span id="sumid"></span>
</body>
</html>
通过节点关系查找节点
从一个节点出发开始查找:
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
示例1:
firstChild属性最普遍的用法是访问某个元素的文本:
var text=x.firstChild.nodeValue;
示例2:
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
获取节点对象的信息
每个节点都包含的信息的,这些属性是:
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素,例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点,nodeValue 属性是所包含的文本。
对于属性节点,nodeValue 属性是属性值。
对于注释节点,nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//节点和节点之间的关系.
//获取dom树
var dom = window.document;
//获取指定id 的标签节点.
function test() {
var form = dom.getElementById("form1");
//获取父节点.
//alert(form.parentNode.nodeName);
// 获取子节点(Node 包含 文本,注释,标签)
var childArr = form.childNodes;
//alert(childArr.length);
/*
for (var i = 0; i < childArr.length; i++) {
alert(childArr[i]);
}
*/
// 获取第一个孩子.
var first = form.firstChild;
//alert(first);
//最后一个孩子.
var last = form.lastChild;
//alert(last);
// 获取下兄弟(获取弟弟)
var sibling = form.nextSibling;
//alert(sibling.nodeName);
// 获取大哥
var previous = form.previousSibling;
alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<a>哈哈</a>
<form id="form1">
<label>姓名:</label>
<input type="text" />
</form>
</body>
</html>
节点操作
document.createElement(“标签名”) 创建新元素节点
elt.setAttribute(“属性名”, “属性值”) 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中,child之前。 // 参数1:要插入的节点 参数 2:插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
创建节点:
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
添加节点到文档树上:
elt.appendChild(e) 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。
elt.insertBefore(new, child); 添加到elt中,child之前。
// 参数1:要插入的节点 参数2:插入目标元素的位置
*/
/*
function add(){
//
var inputNode = document.createElement("input"); // 创建一个节点的对象
inputNode.setAttribute("type","file"); //给新节点设置type的属性值。
var body = document.getElementsByTagName("body")[0];
body.appendChild(inputNode); //把新节点添加到body体中。
}
*/
var count = 1;
function add(){
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value",count+"");
count++;
tdNode.appendChild(inputNode);
trNode.appendChild(tdNode);
//trNode添加 到指定 的位置上。
var tbodyNode = document.getElementsByTagName("tbody")[0];
//tableNode.appendChild(trNode);
var button1 = document.getElementById("b1");
tbodyNode.insertBefore(trNode,button1); // 注意: 使用obj.insertBefore(o1,o2)这个方法的时候
//obj必须是o1,o2的直接父节点。
//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td>
<input type="button" value="0">
</td>
</tr>
<tr id="b1">
<td>
<input type="button" value="添加" onclick="add()">
</td>
</tr>
</table>