JavaScript是什么？
网页特效原理
- 淘宝、新浪、报读
- JavaScript就是修改样式
编写JS的流程
- 布局：HTML+CSS
- 属性：确定要修改哪些属性
- 事件：确定用户做哪些操作（产品设计）
-编写JS：在事件中，用JS来修改页面元素的样式
第一个JS特效——鼠标提示框
分析效果实现原理:
- 样式：div的display
- 事件：onmouseover、onmouseout
- 动手编写此效果
特效基础
- 事件驱动：onmouseover
- 元素属性操作：obj.style.[……]
- 特效实现原理概括：相应用户操作，对页面元素（标签）进行某种修改
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 200px;
height: 100px;
background:#e2e1e1;
border:1px solid #999;
display: none;
}
</style>
</head>
<body>
<!-- 鼠标经过提示功能： -->
<input type="checkbox">
<label for="" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';">两周内自动登录</label>
<div id="div1">
为了您的信息安全，请不要在网吧、公司或者其他公共电脑上使用此功能……
</div>
</body>
</html>
初识函数
- 制作更复杂的效果（DIV的颜色、大小都变化）
-
直接在事件内写代码会很乱
1、引入function()函数的基本形式
2、把JS从标签里放入到函数里，类似css的class
3、变量的使用——别名 -
定义和调用
1、函数的定义：只是告诉系统有这个函数，不会实际执行
2、函数的调用：真正执行函数里面的代码
3、关系和区别
初步使用函数：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
<script>
var oDiv = document.getElementById('div1');
function toGreen() {
oDiv.style.width='300px';
oDiv.style.height='300px';
oDiv.style.background='green';
}
function toRed() {
oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.background='red';
}
</script>
</body>
</html>
getElementById
- 这是一个兼容性问题
-
在FF下直接使用id存在问题
1、引入document.getElementById()
2、doucument.getElementById在任何浏览器下均可使用 -
网页换肤
1.土豆网“开灯、关灯”效果
2.任何标签都可以加id，包括link
3.任何标签的任何属性，也可以修改
4.HTML里面怎么写，JS里就怎么写
换肤：
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link id="l1" rel="stylesheet" type="text/css" href="">
</head>
<body>
<input type="button" value="皮肤1" onclick="skin1()">
<input type="button" value="皮肤2" onclick="skin2()">
<script>
var oL = document.getElementById('l1');
function skin1(){
oL.href='css1.css';
}
function skin2(){
oL.href='css2.css';
}
</script>
</body>
</html>
css1.css:
@charset "utf-8";
body {
background-color: black;
}
input {
width: 200px;
height: 100px;
background-color: yellow;
}
css2.css:
@charset "utf-8";
body {
background-color: #ccc;
}
input {
width: 100px;
height: 50px;
background-color: red;
}
HTML里面怎么写，JS里就怎么写:
如，修改input里面的文字：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="text1" type="text">
<input type="button" value="改文字" onclick="setText()">
<script>
var oTxt = document.getElementById('text1');
function setText(){
oTxt.value="改变input里面的文字";
}
</script>
</body>
</html>
if判断
if，翻译过来就是“如果”的意思，if在javascript里面就是判断，所谓判断就是遇到不同的情况就做不同的操作，不同的问题就做不同的处理；
if的基本格式：
if(条件){
// 语句1
}else{
// 语句2
}
意思是，如果条件成立，那么执行语句1，如果条件不成立，则执行语句2
- 点击按钮显示/隐藏div（点击下拉菜单）
特效实现过程及原理分析
当点击的时候
如果div是显示的，则隐藏（oDiv.style.display='none'）
如果div是隐藏的，则显示（oDiv.style.display='block'）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 200px;
background-color: #ccc;
border:1px solid #999;
display: none;
}
</style>
</head>
<body>
<button onclick="showHide()">更多></button>
<div id="div1">
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</div>
<script>
function showHide(){
var oDiv = document.getElementById('div1');
if(oDiv.style.display == 'block'){
oDiv.style.display = 'none';
}else{
oDiv.style.display = 'block';
}
}
</script>
</body>
</html>
Paste_Image.png
if的基本形式
- 扩展
为a链接添加JS
<a href="javascript:;"></a>
className的使用:
DOM 0级事件绑定方式，可以将js事件代码跟HTML分离；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 200px;
border:1px solid black;
}
.box {
background-color: red;
}
</style>
</head>
<body>
<button id="btn">变红</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn');
//DOM 0级事件处理程序：
//将js事件代码和HTML代码相分离
oBtn.onclick = function(){
oDiv.className = "box";
}
</script>
</body>
</html>
网友评论