js基础第二天
函数：是由事件驱动的或者当它被调用时执行的可以重复使用的代码块。
函数声明：
1. 自定义函数（常用）
var num=10;
function fun() {
alert(“我是自定义函数”);
}
fun(); 函数如果不调用，则自己不执行
2. 函数直接量声明
var fun1=function() {
alert(“直接量声明”)
}
fun1(); 也需要调用
3.利用Function关键字声明（少用）
var fun2=new Function(“var a=10;var b=20; return a+b”);
fun2();
提升变量（面试题）
在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。
1 function fun(){
2 console.log(num);
3 var num = 20;
4 }
相当于
1 function fun(){
2 var num;
3 console.log(num);
4 Num = 20;
5 }
结果是undefind
函数传参
function fn(a,b) 形参
{
console.log(a+b);
}
fn(1,2); 实参
结果为3
fn(5);
结果为NaN。(5,underfind) 5+underfind=NaN（数值+underfind=NaN）
fn（4,6,9）;
结果为10，多出的9可以放着不用，只加4和6。
arguments是存储了函数传送过来的实参。
<script>
function fn(a,b)
{
console.log(fn.length); //得到是 函数的形参的个数
//console.log(arguments);
console.log(arguments.length); // 得到的是实参的个数
if(fn.length == arguments.length)
{
console.log(a+b);
}
else
{
console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length);
}
//console.log(a+b);
}
fn(1,2); 先执行，执行完再执行下面的。
fn(1,2,3);
</script>
输出为2,2,3,2,3,对不起，您的参数不匹配，正确的参数个数为2
自定义函数及实参的传参实例
<style>
div {
height: 100px;
width: 200px;
margin: 20px;
background-color: pink;
display: none;
}
</style>
<script>
function fn(obj) {/*形参，自定义函数*/
var target=document.getElementById(obj);
target.style.display="block";
}
</script>
</head>
<body>
<button onclick="fn('demo1');">按钮1</button>
<button onclick="fn('demo2');">按钮2</button>
<button onclick="fn('demo3');">按钮3</button>
<button onclick="fn('demo4');">按钮4</button>
<div id="demo1">1</div>
<div id="demo2">2</div>
<div id="demo3">3</div>
<div id="demo4">4</div>
</body>
鼠标图片轮换传参案例
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#box {
height: 70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
background: url(images/01big.jpg) no-repeat;
}
#box ul{
overflow: hidden;
border-top:1px solid #ccc;
}
#box li {
float: left;
}
</style>
<script>
window.onload = function() {
var box =document.getElementById("box");
function fn(liid,bg) {
var mama =document.getElementById(liid);
mama.onmouseover =function() {
box.style.backgroundImage=bg;
}
}
fn("li01","url(images/01big.jpg)");
fn("li02","url(images/02big.jpg)");
fn("li03","url(images/03big.jpg)");
fn("li04","url(images/04big.jpg)");
fn("li05","url(images/05big.jpg)");
}
</script>
</head>
<body>
<div id="box">
<ul>
<li id="li01"><img src="images/01.jpg" alt=""/></li>
<li id="li02"><img src="images/02.jpg" alt=""/></li>
<li id="li03"><img src="images/03.jpg" alt=""/></li>
<li id="li04"><img src="images/04.jpg" alt=""/></li>
<li id="li05"><img src="images/05.jpg" alt=""/></li>
</ul>
</div>
</body>
返回值return
return一般用来设置返回值，一个函数只能有一个返回值。同时终止代码执行。
return后面不要换行。
$id函数值（封装为一个函数来调用）
function $(id){
return document.getElementById(id);
}
$(“一个id名”).style.backgroundColor=”red”;
这样可以直接调用函数，不用写一句一句的调用。
算术运算符
A++ ++后置 每次自加1
++A ++前置 每次自加1
var num =1;
console.log(num++); 结果是1 先运算后自加，也就是先输出，然后再加1。这个1如果再有一个输出就可以看到结果为2.
console.log(++num); 结果是2 先自加后运算，先加1，后输出
1 var a=10, b=20 , c=30;
2 ++a; 11
3 a++; 12
4 e=++a+(++b)+(c++)+a++; 13+21+30+13=77 a++和c++在输出之后才各加1
5 alert(e);
77
获得焦点和失去焦点
获得焦点：onfocus
失去焦点：onblur
单等是赋值，双等是判断
赋值“=”判断“==”
输入框样式及特效
input输入框表单样式案例
<style>
input,button {
border:0 none;
padding:0;
}
.search {
width:258px;
height:40px;
margin: 100px auto;
background-color: pink;
}
.search input {
width:208px;
height: 40px;
background: url(images/left.jpg) no-repeat;
outline-style: none;
padding-left: 8px;
color: #ccc;
float: left;
}
.search button {
height: 40px;
width: 42px;
background: url(images/right.jpg) no-repeat;
float: left;
cursor: pointer;
}
</style>
<script>
window.onload =function() {
var txt = document.getElementById("txt");
txt.onfocus = function() {
if (txt.value == "请输入...") {
txt.value = "";
txt.style.color = "#333";
}
} txt.onblur = function() {
if(txt.value == "")
{
txt.value = "请输入...";
txt.style.color = "#ccc";
}
}
}
</script> </head>
<body>
<div class="search">
<input type="text" value="请输入..." id="txt"/>
<button></button>
</div>
</body>
this（自己的）
指的是本身，this主要是指事件的调用者
className类名
innerHTML更换盒子里面的内容，文字、标记、标签、图片。
表单如果想要更换内容input.value，而span行内元素是没有value的，所以使用innerHTML来更换。
isNaN不是个数字。inNaN(“12”); 如果里面的不是个数字，返回true 否则返回false
简单验证表单案例（重复多做）
<style>/*css无视频*/
.box {
text-align: center;
margin:100px auto;
}
span {
display: inline-block;
width: 150px;
height: 20px;
border: 1px solid #ccc;
font-size:12px;
line-height: 20px;
text-align: left;
padding-left: 20px;
background-color: #eee;
color:#999;
}
.right { /*正确的*/
color: #5EFF5E;
background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
border: 1px solid #ACFFAC;
}
.wrong { /*错误的*/
background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
border: 1px solid #FFAC91;
color: #FF6B39;
}
</style>
<script>
window.onload = function() {
function $(id) {return document.getElementById(id);}
$("txt").onblur = function() {
if(this.value == "")
{
$("result").className = "wrong";
$("result").innerHTML = "里面的内容不能为空";
}
else if(isNaN(this.value))
{
$("result").className = "wrong";
$("result").innerHTML = "请输入数字";
}
else if (this.value>150 || this.value<0)
{
$("result").className = "wrong";
$("result").innerHTML = "请输入合理范围";
}
else
{
$("result").className = "right";
$("result").innerHTML = "您输入正确";
}
}
}
</script>
</head>
<body>
<div class="box">
语文: <input type="text" id="txt"/> <span id="result">请输入成绩</span>
</div>
</body>
属性和方法
手机：颜色、尺寸、外在特性、材质都是属性
手机的颜色是黑色 iphone.color=”black”;
属性给值一定是等号
手机方法：打电话、发短信、玩游戏、聊天、看电影
方法是动词，可以干什么
手机打电话 iphone.tel();
方法一律带有小括号
isNaN(””）; 是一种方法，带有某种功能，用来判断是否是数字的。
表单自动获得焦点
txt.focus(); 方法
onfocus 事件
鼠标经过选择表单
this.select(); 方法
自动获得焦点案例及鼠标经过选择表单案例
<script>
window.onload = function() {
var txt = document.getElementById("txt");
var sele=document.getElementById("select");
txt.focus();/*自动获得焦点*/
sele.onmouseover = function() {
this.select();
}
}
</script>
</head>
<body>
自动获得焦点：
<input type="text" id="txt"/>
鼠标经过选择表单：
<input type="text" id="select"/>
</body>
像百度一样，打开自动光标闪动。
for循环
最简单的for循环语句
for(var i=0;i<=100;i++)
{
/*document.write("这个人已经活了"+i+"岁了<br/>");*/
if(i==0)
{
document.write("这个人出生了<br/>");
}
else if (i==25)
{
document.write("这个人结婚了<br/>");
}
else if (i==55)
{
document.write("这个人有孙子了<br/>");
}
else if (i==100)
{
document.write("这个人死了<br/>");
}
else
{
document.write("这个人"+i+"岁了<br/>");
}
}
金字塔案例
i+=3 意思是i=i+3
<script>
for(var i=1;i<=100;i+=3)
{
document.write("<hr width= "+i+"%/>");
}
</script>
getElementsByTagName() 获取某类标签
比方说所有的div li span等
getElementsByTagName()；
得到的是一个伪数组。
lis是数组
lis[索引号] 其中的某一个，第一个索引号是0
获取某类标签案例
<script>
window.onload =function() {
var lis =document.getElementsByTagName("li");
/*lis[0].innerHTML = "abc";*/
for(var i=0;i<lis.length;i++)
{
lis[i].innerHTML = "abc";
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
js基础第二天的更多相关文章
- [妙味JS基础]第二课：for应用、this关键字
知识点总结 getElementsByTagName(动态方法) 与 getElementById(静态方法) 的区别 1.ID前面只能跟document,不能跟其他元素,比如:document.ge ...
- js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- Three.js基础
Three.js基础探寻一 Three.js基础探寻一 1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...
- js基础和工具库
/* * 作者: 胡乐 * 2015/4/18 * js 基础 和 工具库 * * * */ //根据获取对象 function hGetId(id){ return document.getElem ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- js基础查漏补缺（更新）
js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...
随机推荐
- 实时数据处理环境搭建flume+kafka+storm：0.环境依赖
storm需要java和Python 部署依赖环境 --- 要求Java 6+ .Python 2.6.6+ java,python安装配置完成
- DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义
DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...
- 你不需要jQuery(五)
什么不用jQuery?因为它让你的网站体积变得臃肿.你的网站并不真的需要jQuery,不需要它带来的额外体积.带宽和加载时间. 用原生JavaScript简单实现jQuery提供的功能和方法 查找.选 ...
- (转)struts2.0配置文件、常量配置详解
一.配置: 在struts2中配置常量的方式有三种: 在struts.xml文件中配置 在web.xml文件中配置 在sturts.propreties文件中配置 1.之所以使用struts.prop ...
- Android 图片缩放
以下演示将一个ImageView的高度设置为两倍: 布局文件main.xml <?xml version="1.0" encoding="utf-8"?& ...
- Java Web开发 之小张老师总结中文乱码解决方案
中文乱码:在以后学习过程中全部采用UTF-8 1.文件的乱码 1.1.项目文本文件默认编码: [右击项目]->[Properties]->[Resource]->[Te ...
- 镜面电火花EDM加工技术资料，模具行业的人应该好好看看！
目前镜面电火花加工技术在精密型腔模具制造中逐步得以推广.本文就企业中镜面电火花加工应用的关键环节,结合实践分析了影响镜面加工性能的因素.通过控制各个工艺环节,可有效实现高质量.高效率的镜面电火花加工. ...
- Qt：使用自定义的字体
Qt:使用自定义的字体 1. 下载字体文件 2. 加载字体文件 3. 使用字体 QFontDatabase::addApplicationFont("XENOTRON.TTF" ...
- SQL Server 2012 连接到数据库引擎
第 1 课:连接到数据库引擎 https://msdn.microsoft.com/zh-cn/library/ms345332(v=sql.110).aspx 本课将介绍主要的工具以及如何连接并 ...
- 产生WM_PAINT 消息
UpdateWindow会检查窗口的Update Region,当其不为空时才发送WM_PAINT消息:RedrawWindow则给我们更多的控制:是否重画非客户区和背景,是否总是发送WM_PAINT ...