js基础
javascript
js首先,和java没有关系,就是负责控制web前端结构的前两者:结构(HTML)和样式(css)
了解:js出现是为了验证表单的合法性
js的基础语法
1、写script标签,放在HTML页面的最后位置
2、从script标签中间
alert(“警告”)
<script type="text/javascript">
//弹出对话框
alert("弹出来");
</script>
js事件
事件:在什么情况下执行什么命令
事件三要素:
--事件源.事件类型=执行的命令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{color: red;}
</style>
</head>
<body>
<div id="div1">
点击
</div>
<p class="pppp">
1111
</p>
<p class="pppp">
2222
</p>
</body>
</html>
<script type="text/javascript">
//如果想要控制某个标签,必须要先找到它
//我想点击页面中的div
//弹出对话框
document.getElementById("div1").onclick=function(){
alert("警告");
}
//事件源.事件的类型=执行的命令
document.getElementsByClassName('pppp')[0].ondblclick=function(){
alert("双击我弹出对话框");
}
//getElementsByClassName 通过class来寻找页面中的元素,而class可以设置多个重复的类名,获取的时候必须要在后面添加[数字],数字从0开始计数
</script>
js的书写位置
1、内嵌(如上)
2、外链
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{color: red;}
</style>
</head>
<body>
<div id="div1">
点击
</div>
<p class="pppp">
1111
</p>
<p class="pppp">
2222
</p>
</body>
</html>
<script type="text/javascript" src="js.js">
//此处是外链的语法,则写什么都不执行
</script>
js文件
document.getElementById("div1").onclick=function(){
alert("警告");
}
//事件源.事件的类型=执行的命令
document.getElementsByClassName('pppp')[0].ondblclick=function(){
alert("双击我弹出对话框");
}
3、行内式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div onclick="alert('警告')">点击</div>
<!--事件类型=执行的动作-->
</body>
</html>
js常见特效
1、js实现动画效果:
测试的时候一定要多次触发动画,查看是否有动画累积的情况
2、js模态窗口
弹出两个层;一个负责盖住下面其他页面案的内容,另一个是让用户操作的层:只允许用户操作弹出的层
3、自定义单选、多选、下拉菜单
--只要不是系统原生的,就算是自定义;这些程序,需要使用js+html+css组合才能实现,肯定比原生的写法浪费时间,但是为了整体的页面美观,必须要求程序员按照设计师的要求来实现。