一、JS介绍
JavaScript是为了实现网页交互而设计的客户端语言。最初是为了实现表单验证功能而设计的。
其主要有以下三部分组成:
核心 EcmaScript
浏览器对象模型(BOM) broswer object model
文档对象模型(DOM) Document object model
1.1 JS的引入
内嵌式
在头部标签内直接写入如下语句:
<script type="text/javascript">
// Js事件
// 弹出警告框
alert("hello world");
// 浏览器内写入文字,会解析h1标签,将<h1></h1>翻译为一级标题标签
document.write("<h1>hello</h1>")
// 如果要显示"<h1></h1>",则将<替换为<,将>替换为>
document.write("<h1>hello</h1>")
</script>
外联式
新建一个单独的Js文件,存放Js事件
在头部标签内引入外部Js事件
<script type="text/javascript" src=".js文件相对路径"></script>
注意事项:
- text/javascript声明当前script标签中文本的类型
- 所有的js事件都写在script标签内,且以分号表示语句结束
- 可以编写多个script标签,多个script标签顺序执行
- 外联式引入Js事件时,script标签内不编写任何Js事件(因为不会执行这部分代码)
1.2 Js 基础数据类型及变量标识符
-
js基础数据类型
主要有以下几个:
数字类型number(包括整型和浮点型)---------100,3.32
字符串string-----------“hello”,‘world’
布尔类型boolean----------True False
特殊字符类型 null----空 undefined------未声明 -
js 变量
通过关键字var 来声明变量并给变量赋值
3. js 标识符命名规则<script type="text/javascript"> //声明一个变量dog 并给其赋值为小黄 var dog = "小黄"; // 修改dog的值 dog = "小红" // 定义多个变量 var a = 1,b = 2;
a.只能由字母、数字、下划线、$组成
b.不能由数字开头
c.区分大小写
d.标识符建议见名知意
e. js是一门弱语言<script type="text/javascript"> var age = 18; //弹出结果为number alert(typeof age); age = "hello"; //弹出结果为string alert(typeof age); </script>
1.3 js-BOM
BOM是浏览器对象模型,浏览器可以通过调用系统对话框向用户展示信息。
系统提供了三个函数,可以完成对话框的操作
<script type="text/javascript">
window.alert("hello");
// 确认框,点击确定返回值为true,点击取消返回值为false
window.confirm("请确认yes or no");
// 输入框,第一个参数为输入提示信息,第二个为输入框的默认值
window.prompt("请输入用户名","aaa");
</script>
1.4 js-DOM
DOM是文档对象模型,DOM的作用对象是整个html文件,利用js-DOM可以设置html各个标签的页面行为。
<script type="text/javascript">
//获取id为div1的div元素,返回值为object
var oDiv = document.getElementById('div1');
alert(typeof oDiv);
</script>
问题:
以上代码获取到的是null
原因:
因为代码从上往下执行,还没有加载出BOM元素(html代码)就执行script代码(DOM)
解决方法:
1.script放置body后面(但语法规范script要放在head标签中)
2.window.onload = function(){//在页面加载完成以后执行的函
数}
DOM可以获取的html节点有以下三个:
- 元素节点
- 属性节点 title=“属性值”
- 文本节点 内容
1.4.1 通过标签名称获得html元素
<script type="text/javascript">
window.onload = function(){
//获取标签名称为li的所有节点
var Lis = document.getElementsByTagName('li');
alert(Lis.length);
// 获取第一个div中的所有li标签
var oDiv = document.getElementsByTagName('div');
var uli = oDiv[0].getElementsByTagName('li');
alert(uli.length);
// 获取li标签中的内容
for(var i=0;i<uli.length;i++){
alert(uli[i].innerHTML);
}
}
</script>
1.4.2 通过标签属性获得html元素
1.通过id属性获得html元素
<script type="text/javascript">
windows.onload = function(){
//获取id为div1的div元素,返回值为object
var oDiv = document.getElementById('div1');
alert(typeof oDiv);
//获得某元素对象的属性
//获取元素名称
alert(oDiv.tagName);
//获取元素内容
alert(oDiv.innerHTML);
//获取元素类名
alert(oDiv.className);
//获取元素样式,只能获得行内样式
alert(oDiv.style.width);
alert(oDiv.style.backgroundColor);
//自己定义元素的属性,第一个参数为属性名,第二个参数为属性值
oDiv.setAttribute("xxx","yyy");
//获取元素的属性值
alert(oDiv.getAttribute("class"));
}
</script>
2.通过class属性获得标签属性
<script type="text/javascript">
window.onload = function(){
// 获取某个类的所有标签
var uli = document.getElementsByClassName('li1');
alert(uli.length);
// 获取li标签中的内容
for(var i=0;i<uli.length;i++){
alert(uli[i].innerHTML);
}
}
</script>
<body>
<div id="div1" class="country">
<li class="li1">美国</li>
<li>英国</li>
<li class="li1">中国</li>
</div>
<div class="money">
<li class="li1">美元</li>
<li>欧元</li>
<li class="li1">人民币</li>
</div>
</body>
3.通过name属性获得html元素
<script type="text/javascript">
window.onload = function(){
// 获取name="habit"的所有标签
var habit = document.getElementsByName('habit');
alert(habit.length);
}
</script>
<body>
<form action="">
<label for="">用户名:</label>
<input type="text" placeholder="用户名" name="uname">
<br>
<label for="">密 码:</label>
<input type="password" placeholder="xxxx" name="passwd">
<br>
<label for="">爱 好</label>
<input type="checkbox" name="habit" value="0">唱歌
<input type="checkbox" name="habit" value="1">跳舞
<input type="checkbox" name="habit" value="2">打篮球
<button>提交</button>
</form>
</body>
4.通过父节点获取所有的子元素
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
// 获得所有的子节点
var divchild = oDiv.childNodes;
// 子节点 = htmlnode + textnode
alert(divchild.length);
// 获取字节点中的内容
for(var i=0;i<divchild.length;i++){
alert(divchild[i].innerHTML);
}
// 获取div元素第一个节点-->text node
alert(oDiv.firstChild);
// 获取div元素的最后一个节点
alert(oDiv.lastChild);
}
</script>
<body>
<div id="div1" class="country">
<li class="li1">美国</li>
<li>英国</li>
<li class="li1">中国</li>
</div>
<div class="money">
<li class="li1">美元</li>
<li>欧元</li>
<li class="li1">人民币</li>
</div>
</body>
二、js事件
js事件是用来获取事件的详细信息,如鼠标位置、键盘按
键等。
主要分为:鼠标事件、键盘事件、表单事件
2.1 鼠标事件
<script>
window.onload=function(){
var oDiv = document.getElementById("test");
// onclick 鼠标单击事件 按下+松开
oDiv.onclick = function(){
console.log("onclick")
}
// onmouseover 鼠标移入事件
oDiv.onmouseover = function(){
this.style.backgroundColor="yellow";
}
// onmouseout 鼠标移出事件
oDiv.onmouseout = function(){
this.style.backgroundColor="pink";
}
// onmousemove 鼠标移动时触发
oDiv.onmousemove = function(){
this.style.backgroundColor="blue";
}
// onmousedown 按下鼠标按钮时触发
oDiv.onmousedown = function(){
this.style.backgroundColor="green";
console.log("onmousedown")
}
// onmouseup 鼠标松开
oDiv.onmouseup = function(){
this.style.backgroundColor="black";
console.log("onmouseup")
}
}
</script>
<body>
<div id="test" style="background-color: pink;width:200px;height:200px;"></div>
</body>
2.2 鼠标事件属性
<script>
window.onload = function(){
oDiv = document.getElementById("test");
oDiv.onclick = function(e){
// 鼠标所在位置距离可见区域的左边距和上边距的距离,包括margin宽度
// 106 123
console.log(e.clientX,e.clientY)
// 鼠标所在位置距离实际页面区域左边距和上边距的距离,包括margin宽度
// 106 1875
console.log(e.pageX,e.pageY)
// 鼠标所在位置距离事件源区域左边距和上边距的距离,不包括margin宽度
// 98 1867
console.log(e.offsetX,e.offsetY)
}
}
</script>
<body>
<div id="test" style="background-color: red;width: 200px;height: 2000px;"></div>
</body>
画板案例
<style>
div{
background-color: yellow;
border: 1px solid #CECECE;
width: 500px;
height: 500px;
}
</style>
<script>
window.onload = function(){
odiv = document.getElementsByTagName("div")[0];
ospan = odiv.children[0];
odiv.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
ospan.innerHTML = x + "," + y + "px";
}
odiv.onmouseout = function(){
ospan.innerHTML = ''
}
}
</script>
<div>
<span></span>
</div>
2.3 表单事件
<script>
window.onload = function(){
var oForm = document.getElementsByTagName("form")[0];
var oInput = document.getElementsByTagName("input");
// onsubmit 表单提交事件
oForm.onsubmit = function(){
console.log("submit");
// 阻止浏览器默认的表单跳转行为
return false;
}
// 表单聚焦事件
oInput[0].onfocus = function(){
console.log("focus");
}
// 输入框失焦事件
oInput[0].onblur = function(){
console.log("blur");
}
// 输入框内容改变 + 失去焦点
oInput[0].onchange = function(){
console.log("change");
}
}
</script>
<form action="">
<input type="text">
<input type="submit">
</form>
2.4 键盘事件
<script>
window.onload = function(){
// 键盘按下字符键(不包括shift、enter等)触发
document.onkeypress = function(){
console.log("keypress")
}
// 键盘按下任意键触发
document.onkeydown = function(){
console.log("keydown")
}
// 松开键盘触发
document.onkeyup = function(){
console.log("keyup")
}
document.onkeydown = function(e){
// 判断当前按下的键是否为alt或者shift,ctrl-->true false
console.log(e.altKey,e.shiftKey,e.ctrlKey)
// 输出当前按下键对应的编码
console.log(e.keyCode)
}
}
</script>
留言板案例
<style>
#test{
width: 300px;
height: 400px;
border: 1px solid #CECECE;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("test");
var oInput = document.getElementsByTagName("input");
oInput[1].onclick = function(){
oDiv.innerHTML += oInput[0].value + "<br>";
}
oInput[0].onfocus = function(){
oInput[0].value = "";
}
// 键盘按下enter键,发送数据
oInput[0].onkeydown = function(e){
if(e.keyCode==13){
oDiv.innerHTML += oInput[0].value + "<br>";
}
}
}
</script>
<body>
<div id="test"></div>
<div>
<input type="text" value="">
<input type="button" value="发送">
</div>
</body>
三、封装函数
将上述案例中重复使用的代码
oDiv.innerHTML += oInput[0].value + "<br>";
封装为一个函数
function htmltext(){
oDiv.innerHTML += oInput[0].value + "<br>";
}
oInput[1].onclick = htmltext;
oInput[0].onkeydown = function(e){
if(e.keyCode==13){
htmltext();
}
}
四、阻止浏览器默认行为
<script>
window.onload = function(){
var olink = document.getElementsByTagName("a")[0];
olink.onclick = function(e){
console.log("aaaa");
// 1-阻止页面跳转
// return false;
// 2-阻止页面跳转
// e.preventDefault();
// 3-阻止页面跳转
e.returnValue = false;
}
// 阻止右键弹出菜单
document.oncontextmenu = function(){
return false;
}
}
<script>
<body>
<a href="">链接</a>
</body>