第一节 JavaScript概述
第一节 JavaScript概述
JavaScript：其实就是对HTML+CSS静态页面进行样式修改，使其实现各种动态效果。
编写JS脚本基本步骤：
1. HTML+CSS静态布局；
2. 确定要修改的属性；
3.确定用户做哪些操作，即事件（产品样式）；
4.在事件中，用JS来修改页面元素的样式。
特效实现原理：响应用户操作，对页面元素（标签）进行某种动态效果的实现。
函数简介：
基本形式为“function 函数名(){……}”，把JS从标签中放入函数里，类似与CSS中的class
函数的定义和调用：
一般函数定义：function 函数名(){……}; n=函数名;//即为函数调用，不需加“()”
匿名函数定义：var n=……; n=function(){……};//本身也是一种函数调用
document。getElementById();：不会出现直接引用“id”而出现的错误
网站更换皮肤：即把引入的CSS样式改变了，如CSS1样式是第一种皮肤，CSS2是另一种皮肤一样。
HTML文件便签中怎么写特效，JS中特效就怎么写，但有一特例，HTML中的class必须在JS中写className
函数什么时候该传参数：当函数里有定不下来的变量是需要传参
在函数中，style添加的样式都是添加在便签内的，称为行间样式（而行间样式的优先级最高），所以在编写程序的时候，要么只修改style，要么只修改class。
提取事件：为元素添加事件，事件和其他属性一样，可以用js添加，如onload()，如下：当
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){alert('a');};
</script>
在标签<body></body>标签内时，函数正确运行，但是 如果上述代码放在<head></head>标签内时就会报错，因为JS（与Python类似）是解释性语言，即读一行、执行一行，所以函数调用只能写在函数下面，否则就会报错，此时的解决办法为：
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){alert('a');};
};
</script>
行为、样式、结构三者分离：即JS文件、CSS文件、HTML文件分开
获取一组元素：getElementByTagName
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
float: left;
border:1px solid black;
margin: 10px;
}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
//alert(aDiv.length);//上述代码返回的就是一个数组，此处提示输出数组的长度
//对数组中的div的样式分别进行修改，注意，数组下标是从0开始计数的
aDiv[0].style.background='red';//即第一个div为的背景颜色变为“红色”
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
小综合：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aCh=oDiv.getElementsByTagName('input'); oBtn1.onclick=function () {
//aCh[0].checked=true;
for(var i=0; i<aCh.length; i++){
aCh[i].checked=true;
}
};
oBtn2.onclick=function () {
//aCh[0].checked=false;
for(var i=0; i<aCh.length; i++){
aCh[i].checked=false;
}
};
oBtn3.onclick=function () {
//aCh[0].checked=true;
for(var i=0; i<aCh.length; i++){
if (aCh[i].checked==true){ //判断用==
aCh[i].checked=false; //赋值用=
} else{
aCh[i].checked=true;
}
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="全选"/>
<input id="btn2" type="button" value="全不选"/>
<input id="btn3" type="button" value="反选"/><br/>
<div id="div1">
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
</div>
</body>
</html>
this：当前发生事件的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
#div1 .active{background: yellow;}
#div1 div{
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #999;
display: none;
}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div'); for (var i = 0; i<aBtn.length; i++){
aBtn[i].index=i; //给每一个按钮添加一个自定义属性“index”属性
//此时用js添加自定义属性，正规浏览器不会报错；如果在标签内直接添加自定义属性，正规浏览器不会响应
aBtn[i].onclick=function () {
for (var i = 0;i<aBtn.length; i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
//alert(this.index);
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育"/>
<input type="button" value="培训"/>
<input type="button" value="招生"/>
<input type="button" value="出国"/>
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
</body>
</html>
innerHTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易年历</title>
<style>
#tab{
width: 360px;
height: 600px;
border: 1px solid black;
text-align: center;
line-height: 600px;
margin: 0 auto;
}
#tab ul{
margin-left: -15px;
margin-top: 23px;
}
#tab ul li{
width: 100px;
height: 100px;
border: 1px solid #999999;
float: left;
list-style: none;
/*text-decoration: none;
text-align: center;*/
line-height: 20px;
margin: 1px; }
.text{
width: 308px;
height: 136px;
border: 1px solid #943E01;
margin-top: 440px;
margin-left: 26px;
list-style: none;
line-height: 20px;
}
</style>
<script>
window.onload=function () {
var arr=[
'快过年了，大家可以商量一下去哪玩儿……',
'不知细叶谁裁出，二月春风似剪刀。',
'阳春三月，此之踏青最佳时节……',
'你是人间四月天……',
'五月初夏，时令刚好……'
]; var oDiv=document.getElementById('tab');
var oLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0]; for (var i=0; i<oLi.length; i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
for (var i=0; i<oLi.length; i++){ oLi[i].className=''; } this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
//上句如果(this.index+1)不加“()”则系统默认为字符串连接，而不会直接运算，加“()”之后就会直接相加了
};
}
};
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>Jan</p></li>
<li><h2>2</h2><p>Fer</p></li>
<li><h2>3</h2><p>Mar</p></li>
<li><h2>4</h2><p>Apr</p></li>
<li><h2>5</h2><p>May</p></li>
<li><h2>6</h2><p>Jun</p></li>
<li><h2>7</h2><p>Jul</p></li>
<li><h2>8</h2><p>Aug</p></li>
<li><h2>9</h2><p>Sep</p></li>
<li><h2>10</h2><p>Oct</p></li>
<li><h2>11</h2><p>Nov</p></li>
<li><h2>12</h2><p>Dec</p></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>快过年了，大家可以商量一下去哪玩儿……</p>
</div>
</div>
</body>
</html>
函数传参：函数就是占位符
style与className：
元素.style.属性=XXX 是修改行间样式
之后再修改className不会有效果
自定义属性：索引值的使用
什么时候需要使用索引值--需要知道第几个的时候
注意：HTML标签添加自定义属性标签内属性index，在运行时会被FF过滤掉，所以要使用js添加自定义索引属性
第一节 JavaScript概述的更多相关文章
- Javascript权威指南——第一章Javascript概述
示例:javascript贷款计算器 相关技术: 1.如何在文档中查找元素: 2.如何通过表单input元素来获取用户的输入数据: 3.如何通过文档元素来设置HTML内容: 4.如何将数据存储在浏览器 ...
- 第一章 JavaScript概述
JavaScript诞生于1995年.它当时的目的是为了验证表单输入的验证.因为在JavaScript 问世之前,表单的验证都是通过服务器端验证.而当时都是电话拨号上网的年代,服务器验证数据是一件非常 ...
- 第一节 WCF概述
主要内容: 1.什么是WCF? 2.WCF的背景介绍. 引例:(WCF用来解决什么事情) 一家汽车租赁公司决定创建一个新的应用程序,用于汽车预定 • 该租车预定应用程序的创建者知道,应用程序所实现的业 ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
- 第一节 课程简介与HTML5概述
第一节 课程简介与HTML5概述 *********************************************************** 1.1课程简介 教学目的: 从基础入手到能够运 ...
- 第九十六节，JavaScript概述
JavaScript概述 学习要点: 1.什么是JavaScript 2.JavaScript特点 3.JavaScript历史 4.JavaScript核心 5.开发工具集 JavaScript诞生 ...
- JavaScript概述.pdf
第1章 JavaScript概述 第2章 使用JavaScript 第3章 语法.关键保留字及变量 第4章 数据类型 第5章 运算符 第6章 流程控制语句 第7章 函数 //没有参数的函数 funct ...
- 第一章 Javascript基础
一.Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用: 给页面添加动态效果 c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAscipt. d.特 ...
- javascript 概述及基础知识点（变量，常量，运算符，数据类型）
JavaScript概述 1.1 什么是JavaScript: javaScript(简称js),是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.同时也是一种广泛用于客户端Web开发的脚本语 ...
随机推荐
- 下拉菜单被表单、图片、FLASH挡住的解决办法
设置Flash的参数: <param name="wmode" value="opaque"> <object classid="c ...
- Redis入门到高可用（六）—— 字符串
一.结构和命令 1.字符串键值结构 key是字符串,value可以是字符串.数字.二进制.json等: redis的key和string类型value限制均为512MB. 2.使用场景 ♦️ 缓存 ♦ ...
- entry.define编程思路
0.lua将文字传给场景脚本. 1.场景脚本将pattern.define文件中的PAT当作子弹(水泡弹,带颜色) 2.用户的问题作为客户端的请求,发送给服务器端 3.服务器端接受客户端的问题请求 4 ...
- 小程序js执行顺序
底部tab 有 login/index my/index home/index 操作1>进 login/index 页面, index.js加载以下方法 onLoad页面加载onSh ...
- MyBatis——模糊查询
在mybatis中可以使用三种模糊查询的方式: <!-- 模糊查询 --> <select id="selectListByTitle" parameterTyp ...
- docker容器多服务(不推荐)
1.最常用方式配置进程管理工具Supervisor 2.最简单的就是把多个启动命令放到一个启动脚本里面,启动的时候直接启动这个脚本 第一种方式: 1.构建基础镜像 FROM lmurawsk/pyth ...
- Java读文件
public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. */ public static void readFileB ...
- NgDL:第四周深层神经网络
4.3核对矩阵维数 根据前向的矩阵,可以计算出右上的规律,对于第L层的w来说,其维数为(n[L],n[L-1]),n[L]表示第L层的单元数. 4.4为什么深层神经网络会好用? 如果要做一个人脸识别的 ...
- JS 8-3 prototype属性
动态修改Student.prototype的属性时,会影响已创建或将要创建的实例. 如果将整个Student.prototype赋值为新的对象,对已经创建的实例是不会修改的,会影响后续创建的实例. n ...
- SQL Server 2008 R2下载地址
MS 发布了最新的SQL Server 2008 R2,似乎早在4.19就提供了下载,不过才到昨天放出下载地址: 这个是试用版的下载,于正式版的区别就只在一个序列号! 而MSDN的版本则集成了安装序列 ...