1. JavaScript简介
js是一种弱类型语言,也是一种动态类型语言
js是一种基于对象和事件驱动的脚本语言。
2. 基本语法
变量
* 语法:使用var声明变量 ,eg:var i = 100; var s = “s”;
* 注意:变量名区分大小写,使用期间可以任意赋值,可以不声明就直接赋值使用(不建议)。
函数
声明函数
* 有名函数:function methodName(){}
* 匿名函数: function (){}
使用函数
调用有名函数
*methodName()|methodName区别,前者直接调用函数,后者使用函数的引用。
注意: js中调用函数时,不检查形参与实参的匹配情况
1. 形参<实参:自动忽略多余的实参
2. 形参>实参:
* 实参类型为number型,返回:NaN(not a number)
* 实参类型为string型,返回:值+undefined
调用匿名函数
* 直接使用事件关联匿名函数:window.onload = function(){}
* 使用变量名(引用)关联匿名函数:var methodName = function(){}
对象
函数也是对象:function methodName(){},methodName.name
js中声明对象
1. var obj = new Object()
2. var jsonObj = {key:value,key2:value2} jsonObj.key
3. 事件
window.onload:加载事件。当前文档完全加载后执行。
element.onclick:单击事件
4. js嵌入方式
行内:书写在事件属性中,
eg:<input onclick="alert()">
内部: 书写在<.script>标签中
外部:书写在xxx.js文件中,注意不能在该标签中书写js代码。要想再写代码需要另起一个script标签。
注意:window.onload表示当前文档完全加载后执行。(一个源文件中只能有一个window.onload)
优先级:就近原则
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript">
alert("hello");
</script>
5. DOM查询
简介:
Document Object Model文档对象模型
节点
文档节点:document
元素节点:element
文本节点:text
属性节点:attribute
基于整个文档查找元素
- getElementById()
- getElementsByTagName()
- getElementsByName()
基于元素节点查找元素
子元素
* childNodes:所有子节点
* firstChild:
* lastChild:
* getElementsByTagName()
父元素
* parentNode
兄弟元素
* previousSibling:前
* nextSibling后
js操作文本
.innerText
.innerHTML
.value
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj节点
var btnEle = document.getElementById("btn01");
btnEle.onclick = function(){
var bjEle = document.getElementById("bj");
alert(bjEle.innerText);
};
//2.查找所有li节点
var btnEle02 = document.getElementById("btn02");
btnEle02.onclick = function(){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
//3.查找name=gender的所有节点
var btnEle03 = document.getElementById("btn03");
btnEle03.onclick = function(){
var gds = document.getElementsByName("gender");
for(var i=0;i<gds.length;i++){
alert(gds[i].value);
}
};
//4.查找#city下所有li节点
var btnEle04 = document.getElementById("btn04");
btnEle04.onclick = function(){
var cityEle = document.getElementById("city");
var lis = cityEle.getElementsByTagName("li");
alert(lis.length);
};
//5.返回#city的所有子节点
var btnEle05 = document.getElementById("btn05");
btnEle05.onclick = function(){
var cityEle = document.getElementById("city");
var cs = cityEle.childNodes;
//注意:ie版本<=8时,四个子节点。ie版本>=9时,9个子节点
alert(cs.length);
};
//6.返回#phone的第一个子节点
var btnEle06 = document.getElementById("btn06");
btnEle06.onclick = function(){
var phoneEle = document.getElementById("phone");
var fc = phoneEle.firstChild;
alert(fc.innerText);
};
//7.返回#bj的父节点
var btnEle07 = document.getElementById("btn07");
btnEle07.onclick = function(){
var bjEle = document.getElementById("bj");
var pn = bjEle.parentNode;
alert(pn.innerHTML);
// alert(pn.innerText);
};
//8.返回#android的前一个兄弟节点
var btnEle08 = document.getElementById("btn08");
btnEle08.onclick = function(){
var adEle = document.getElementById("android");
var psEle = adEle.previousSibling;
alert(psEle.innerText);
};
//9.读取#username的value属性值
var btnEle09 = document.getElementById("btn09");
btnEle09.onclick = function(){
var userNameEle = document.getElementById("username");
var ut = userNameEle.value
alert(ut);
};
//10.设置#username的value属性值
var btnEle10 = document.getElementById("btn10");
btnEle10.onclick = function(){
var userNameEle = document.getElementById("username");
userNameEle.value = "123456";
};
//11.返回#bj的文本值
var btnEle11 = document.getElementById("btn11");
btnEle11.onclick = function(){
var bjEle = document.getElementById("bj");
// alert(bjEle.innerHTML);
var nv = bjEle.firstChild.nodeValue;
alert(nv);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>