JavaScript
1.简介
JavaScript简介:
JS是运行在浏览器端的一门脚本语言,一开始主要用来做浏览器验证,但现在功能已经不止于此。
所谓脚本语言就是指,代码不需要编译,直接运行,并且读入一行运行一行
JavaScript目前应用非常广泛,例如:浏览器端的验证,Ajax,客户端等,甚至也有服务器端的JavaScript--node.js
2.编写位置
(1)网页内部
<script type="text/javascript">
alert("这是啥");
</script>
(2)外部的.js文件
JavaScript一般单独写在一个.js文件中,通过以下方法来引用
<script type="text/javascript" src="script.js"></script>
(3)基本语法
①注释
单行注释 //
多行注释 /**/
②变量
Ⅰ声明:JS是一门弱类型语言,声明变量时不需要指定变量的类型,只需要使用var关键字
例如:var a;
Ⅱ赋值:
JS是一门动态类型的语言,可以给一个变量赋任意类型的值,同时在使用过程中可以任意修改变量
变量的类型
a=123;
a="hello";
Ⅲ声明和赋值同时进行
var b=123;
var c="hello";
var d=true;
③函数
在JS中函数也是一个对象,也可以将一个函数的引用赋值给一个变量
1)声明函数使用function关键字
第一种方式:
var sum=function(a,b){
return a+b;
};
第二种方式:
function sum2(a,b,c){
return a+b+c;
};
sum2(2,3,4);
2)函数的调用:
-函数的引用+();
-sum(123,234)
-sum2(123,"abc",true)
调用函数不会检查参数类型和个数,所以在js中不存在重载这回事
例如:
④对象
Ⅰ对象的创建
(1)var obj=new Object();
(2)var obj ={}
Ⅱ动态的为对象添加属性
对象.属性名=属性值
例:obj.name="张三";
obj.age=16;
obj.fun=function(){
alert("hello");
};
Ⅲ在创建对象时,直接添加属性
注意:键值对之间使用 “ :”隔开。
3.事件
(1)用户操作网页或者浏览器所发生的交互行为称为事件。比如:点击按钮,最小化窗口,修改文本框内容等。
(2)JS为我们定义许多浏览器中的事件。比如:单击、双击、移动 等。
(3)我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响应函数:
1)直接通过标签的属性来设置,这种方式是结构与行为耦合,不推荐使用
<button οnclick="alert('hello')">按钮</button>
-这种方式叫做结构与行为耦合,不推荐使用这种方式
2)在<script>标签来设置
<button id="btn">按钮</button>
<script>
//获取到按钮的对象
var btn =document.getElementById("btn");
//为btn绑定一个单击响应函数
btn.οnclick=function(){
alert("hello");
}
</script>
3)几种鼠标事件
//鼠标单击事件
<button id="btn" οnclick="alert('你点我干嘛')">点我</button>
鼠标单击按钮事件触发
//鼠标双击事件
<button id="btn" οndblclick="alert('你点我干嘛')">点我</button>
//鼠标移到按钮上事件触发
<button id="btn" οnmοuseοver="alert('鼠标移动上来了!')">点我</button>
//鼠标从按钮上移走事件触发
<button id="btn" οnmοuseοut="alert('鼠标移走!')">点我</button>
4.加载方式
(1)浏览器加载网页代码时是由上到下依次加载的。
(2)如果我们在浏览器还尚未加载网页中的元素,那么将无法确定,控制台将会报错。
解决该问题有两种方式:
1)将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都编写在head标签中,
这种形式不符合使用规则
2)将js代码编写到window.οnlοad=function(){}中,推荐使用方式
注意:编写js时,上来就把window.οnlοad=function(){}写上
程序是一行一行执行的,如果var btn=document.getElementById("btn1");代码之前没有写window.οnlοad=function(){}
那么在执行的时候是找不到body里面的id="btn1",因此window.οnlοad=function(){}作用就是加载完整个页面之后再执行里面的内容。
但是如果将javascript写在body里面,之前已经加载完了id="btn1",所以var btn=document.getElementById("btn1");再运行就没有问题了。
注意:<button>标签只能写在body里面。
5.DOM编程
DOM全称:Document Object Model
DOM编程是JavaScript中非常重要的一部分内容 。
DOM主要是通过JavaScript来控制网页中的各种元素,从而达到使网页可以和用户进行动态交互的作用。
DOM的操作主要分为四部分:增、删、改、查。
(1)document对象:
document是一个文档节点,代表整个文档,所有节点都是它的后代节点。
document也是window的对象的属性,可以直接使用。
(2)节点类型:
① 元素节点:HTML文档中的HTML标签
②文本节点:元素的属性
③ 属性节点:HTML标签中的文本内容
(3)节点属性
(4)元素节点的属性:
1.获取元素对象.属性名
例:element.value
element.id
element.className
2.设置元素对象.属性名=新的值
例:element.value="hello"
element.id="id01"
element.className="newClass"
其它属性:
innerHTML:元素节点通过该属性获取和设置标签内部的html代码
nodeValue:文本节点可以通过nodeValue属性获取和设置文本节点的内容
(5)***DOM查询
通过document对象查询:
document.getElementById()
-通过id属性获取一个元素节点对象
document.getElementsByTagName()
-通过标签名获取一组元素节点对象
document.getElementByName()
-通过name属性获取一组元素节点对象,一般用来获取表单项
通过具体的元素对象查询:
element.getElementsByTagName
-查找当前元素节点内指定标签名的子节点
element.childNodes
-查找当前节点的所有子节点
element.firstChild
-查找当前节点的第一个子节点
element.lastChild
-查找当前节点的最后一个子节点
element.parentNode
-查找当前节点的父节点
element.previousSibling
-查找当前节点的前一个兄弟节点
element.nextSibling
-查找当前节点的后一个兄弟节点
例:
注意:1.function myQuery(idStr,func){
var btn=document.getElementById(idStr);
btn.οnclick=func;
}
这段代码为4个查询中共有的内容,所以封装成一个方法,下面直接调用就可以了,避免写重复代码,起到了简化代码的作用。
2.在查询 “#city的所有子节点” 的时候,其实只有四个--北京,上海,东京,首尔;但是在用火狐浏览器和谷歌浏览器运行时会把
节点与节点之间的空格也当作了一个节点,所有此时应该根据元素节点的属性,用if语句判断一下if(liEle5[i].nodeType==1){} ,当nodeType==1时才是元素节点。
(6)***DOM增删改
①创建元素节点
document.createElement(标签名)
②添加子节点
父节点.appendChild(子节点)
③插入节点
父节点.insertBefore(新节点,旧节点)
④替换节点
父节点.replaceChild(新节点,旧节点)
⑤删除节点
父节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点) *****
⑥读写元素内部HTML代码
读取
元素.innerHTML
设置
元素.innerHTML = 新值
需要注意点:在设置元素节点时有以下两种方式:
1.document.getElementById("bj").innerHTML = "天津";
2.document.getElementById("bj").firstChild.nodeValue="天津";
请参照以上(4)元素节点的属性中其他属性部分。