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. ...
随机推荐
- Linux桌面扩展 Docky
Docky是从GNOME Do项目剥离出来的一个Dock软件,最初即为GNOME Do的“Docky”模式. 后来开发者觉得,GNOME Do是个快速启动工具,弄个Docky模式有点不伦不类,于是,D ...
- hdu 4717 The Moving Points（第一个三分题）
http://acm.hdu.edu.cn/showproblem.php?pid=4717 [题意]: 给N个点,给出N个点的方向和移动速度,求每个时刻N个点中任意两点的最大值中的最小值,以及取最小 ...
- mysql 跨库JOIN
现有两台MYSQL数据库 一台是192.168.1.1 端口3306 上有数据库DB1 有表TABLE1一台是192.168.1.2 端口3307 上有数据库DB2 有表TABLE2192.168.1 ...
- XSD - <schema> 元素
<schema> 元素 <schema> 元素是每一个 XML Schema 的根元素: <?xml version="1.0"?> <x ...
- 汇编invoke和call的关系
win32汇编里面,我们既可以用invoke也可以用call调用子程序/函数,不过invoke使用简单方便,所以绝大多数情况我们都用invoke. 但是很多人只是知道使用它,对它却不是很了解.我以前对 ...
- uva 1377
比较不错的一个题,关键是理解状态转移 #include<algorithm> #include<cstdio> #include<cstring> #include ...
- hdu 3853 LOOPS 概率DP
简单的概率DP入门题 代码如下: #include<iostream> #include<stdio.h> #include<algorithm> #include ...
- 【BZOJ 1045】 1045: [HAOI2008] 糖果传递
1045: [HAOI2008] 糖果传递 Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正整数n& ...
- C++ 通过对象方式 、指针方式两种方式去访问成员变量（属性或者方法）
准备 1.在VS中新建一个项目-Viscal C++ ---常规--空项目 2.建立一个.h的头文件 定义一个类 声明其成员(C#中的属性和方法) #include<iostream> # ...
- C#基础精华04（文件流，文件操作，File、Directory、Path，Directory）
文件流 FileStream 可读可写 大文件 释放 StreamReader 读取 释放 StreamWriter 写入 释放 using 中释放 File 可读可写 小文件 操作文 ...