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);

获得焦点和失去焦点

获得焦点：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. ...

随机推荐

Extjs-4.2.1（一）——编辑 hello word
前言:在搭建好环境后,就可以利用Extjs进行开发了. 一.在项目中拷贝相关的Extjs文件,如下图: 注意:不需要整个Ext开发包全部导入,这样很容易造成eclipse卡死,因为eclipse会自动 ...
linux命令useradd添加用户详解
1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s shell] [-c comment] [ ...
DWR
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...
Oracle----dual
1. dual is a table that contains a single row. 2. The dual table has one VARCHAR2 column named dummy ...
Unity3D的几种坐标系
原地址:http://www.cnblogs.com/martianzone/p/3371789.html http://www.cnblogs.com/88999660/archive/2013/0 ...
sqlmap动态sql优化,避免传参失误批量修改和删除操作!
分析以下的sqlmap存在问题: <delete id="deletePartspic" parameterClass="TblSpPartspic"&g ...
jquery 请求jsp传递json数据的方法
$(function() { $("a[name=hrefID]").click(function() { var id = $(this).attr("id" ...
linux distribution是什么？
linux distribution,即Linux发行版,有很多种类,包括Fedora,Ubuntu,Debian,Red Hat,SuSE等,其内核都是差不多的,只是界面设计和功能上各有千秋.
EASYUI Dialog的基本使用
1.基本使用代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&q ...
李洪强iOS开发本人集成环信的经验总结_09_处理好友请求
李洪强iOS开发本人集成环信的经验总结_09_处理好友请求实现这种效果: 01 - 遵守处理好友请求的代理协议 02 - 设置代理 03 - 实现代理方法 04 - 实现代理中用到的方法

js基础第二天

js基础第二天的更多相关文章

随机推荐

热门专题