函数的基本格式

function 函数名（）

{

　　代码；

}

函数的定义和调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function show()//定义
{
    alert('abc');
    }
show();//调用
</script>
</head>

<body>
</body>
</html>

简单的网页换肤代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="l1" rel="stylesheet" type="text/css" href="css1.css"/>
<script>
function skin1()
{
    var oL=document.getElementById('l1');
    
    oL.href="css1.css";
    }
function skin2()
{
    var oL=document.getElementById('l1');
    
    oL.href="css2.css";
    }    
</script>
</head>

<body>
    <input type="button" value="皮肤1" onclick="skin1()"/>
    <input type="button" value="皮肤2" onclick="skin2()"/>
</body>
</html>

注意：任何标签都可以加id，包括link；

　　　任何标签的任何属性，都可以修改；

　　　HTML里怎么写，JS里就怎么写。

简单的利用按钮在文本里改文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function setText()
{
    var oTxt=document.getElementById('txt1');
    oTxt.value="abc";
    }
</script>
</head>

<body>
<input id="txt1" type="text"/>
<input type="button" value="改文字" onclick="setText()"/>
</body>
</html>

if用作判断

if（条件）

{

　　语句1；

}

else

{

　　语句2；

}

点击按钮显示/隐藏div（弹出菜单）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
    width:100px;
    height:200px;
    background:#ccc;
    display:none;
    }
</style>
<script>
function showHide()
{
    var oDiv=document.getElementById('div1');
    
    if(oDiv.style.display=='block')
    {
        oDiv.style.display="none";
    }
    else
    {
        oDiv.style.display="block";
        }
    
    }
</script>
</head>

<body>
<input type="button" value="显示隐藏" onclick="showHide()"/>
<div id="div1">
</div>
</body>
</html>

className的使用（class在JS中是比较特殊的存在，不能随便拿来用，必须使用className）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1
{
    width:100px;
    height:100px;
    border:1px solid black;
    }
.box{
    background:red;
    }
</style>
<script>
function toRed()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.className='box';
    }
</script>
</head>

<body>
<input type="button" value="变红" onclick="toRed()"/>
<div id="div1">
</div>
</body>
</html>

【JS学习笔记】关于function函数的更多相关文章

  1. [前端JS学习笔记]JavaScript function

    一.函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) ...

  2. （转）js学习笔记（）函数

    1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...

  3. js学习笔记34----自执行函数

    自执行函数的写法通常如下: 方式1: (function(){ *** 写事件处理代码 *** }()) 方式2: (function(){ *** 写事件处理代码 *** })() 方式3: !(f ...

  4. JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div

    function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  10. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

随机推荐

  1. lsof基本使用

    当你想在计算机上启动一个服务,电脑已经建议"port already in use",此时,可以使用lsof命令查看占用端口的进程(lsof -i:port). lsof这是LiS ...

  2. 清空SQL Server数据库中所有表数据的方法

    原文:清空SQL Server数据库中所有表数据的方法 其实删除数据库中数据的方法并不复杂,为什么我还要多此一举呢,一是我这里介绍的是删除数据库的所有数据,因为数据之间可能形成相互约束关系,删除操作可 ...

  3. javascript 动态创建tip图片提示

    前言: 在做前端的项目中,经常看到移动一个小图标上显示这个图标对应的大图的提示,之前的做法是在小图标的位置后面添加一个div,然后移动到小图标然后显示这个图标的图片!但是这个方法做的时候发现,如果提示 ...

  4. SVN服务器搭建（2）

    转自:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407979.html 上一篇介绍了VisualSVN Server和Tortois ...

  5. 【转】仿QQ5.0侧滑菜单ResideMenu

    本文由孙国威 原创.如需转载,请注明出处! 原文:http://blog.csdn.net/manoel/article/details/39013095 为了后续对这个项目进行优化,比如透明度动画. ...

  6. OpenGL绘制棱锥,剔除

    /** * 缓冲区工具类 */public class BufferUtil { /**  * 将浮点数组转换成字节缓冲区  */ public static ByteBuffer arr2ByteB ...

  7. 看精通SQL SERVER2008有感1

    SQLserver数据库中的其他数据库作用: Master:存储SQLserver所有的全局配置,也就是存储SQLserver所知道的关于自己的全部信息,包括自身的配置,和当前的状态,这些数据存储在系 ...

  8. 列表类型转换(ConvertList<TSource, TResult>)

    性能优化-列表类型转换(ConvertList<TSource, TResult>) 2013-12-16 16:55 by stevey, 426 阅读, 7 评论, 收藏, 编辑 之前 ...

  9. Knockout 是什么？

    翻译:Knockout 轻松上手 - 1 Knockout 是什么? 原文名称:KnockoutJS Starter Knockout 是一个非常棒的脚本库,可是我发现许多人并不了解它,所以,思胜翻译 ...

  10. D6

    今天依旧很惨...本来第二题可以A的,感觉很久没有碰数学,出现这样的低级错误,简直逗了...晚上的话打算找了书店,静下心来看点书进去吧 但是其他题目就不太好写了..我直接发题解好了 T1:贪心 其实贪 ...