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. ...
随机推荐
- bzoj 2744: [HEOI2012]朋友圈 二分图匹配
2744: [HEOI2012]朋友圈 Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 612 Solved: 174[Submit][Status] ...
- Matlab中bsxfun和unique函数解析
一.问题来源 来自于一份LSH代码,记录下来. 二.函数解析 2.1 bsxfun bsxfun是一个matlab自版本R2007a来就提供的一个函数,作用是”applies an element-b ...
- HTML可编辑下拉框
<div style="position:relative;"> <select style="width:120px;" onchang ...
- 用户自定义结构数据与VARIANT转换 .
用户自定义结构数据与VARIANT转换 cheungmine 将用户自定义的C结构数据存储成VARIANT类型,需要时再将VARIANT类型转为用户自定义的结构数据,有十分现实的意义,既然我们不想为这 ...
- JAVA面试题：Spring中bean的生命周期
Spring 中bean 的生命周期短暂吗? 在spring中,从BeanFactory或ApplicationContext取得的实例为Singleton,也就是预设为每一个Bean的别名只能维持一 ...
- hdu 4675 GCD of Sequence
数学题! 从M到1计算,在计算i的时候,算出原序列是i的倍数的个数cnt: 也就是将cnt个数中的cnt-(n-k)个数变掉,n-cnt个数变为i的倍数. 且i的倍数为t=m/i; 则符合的数为:c[ ...
- spring IOC容器实例化Bean的方式与RequestContextListener应用
spring IOC容器实例化Bean的方式有: singleton 在spring IOC容器中仅存在一个Bean实例,Bean以单实例的方式存在. prototype 每次从容器中调用Bean时, ...
- Get请求携带数据量的各种限制及解决办法、Post请求说明
1. Get请求携带数据量的各种限制及解决办法 Http Get方法提交的数据大小长度并没有限制,HTTP协议规范没有对URL长度进行限制.这个限制是特定的浏览器及服务器对它的限制. 到新公司处理 ...
- 转：tar 常用命令
tar在linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用的压缩与解压缩参数 参数: -c :create 建立压缩档案的参数: -x : 解压缩压缩档案的参数: -z : 是 ...
- Django自定义用户认证系统Customizing authentication
扩展已有的用户模型Extending the existing User model 有两种方法来扩展默认的User Model而不用重写自己的模型.如果你不需要改变存储在数据库中的字段,而只是需要改 ...