函数的基本格式

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. idea中output log4j中文乱码

    1.设置tomcat中的VM optins:-Dfile.encofing=UTF-8 2.idea安装目录bin文件夹中idea.exe.vmoptions.idea64.exe.vmoptions ...

  2. Unity学习入门

    文章说明,文本内容基于配置文件进行依赖注入 unity介绍:Unity是由微软的Patterns & Practices团队开发的一个轻量级.可扩展的依赖注入(Dependency Injec ...

  3. 常用排序算法的python实现和性能分析

    常用排序算法的python实现和性能分析 一年一度的换工作高峰又到了,HR大概每天都塞几份简历过来,基本上一天安排两个面试的话,当天就只能加班干活了.趁着面试别人的机会,自己也把一些基础算法和一些面试 ...

  4. C#简单实现贪吃蛇程序（LinQ + Entity）

    做梦想起来的C#简单实现贪吃蛇程序(LinQ + Entity) 最近一直在忙着单位核心开发组件的版本更新,前天加了一个通宵,昨天晚上却睡不着,脑子里面突然不知怎的一直在想贪吃蛇的实现方法.以往也有类 ...

  5. IP 首部检验和算法

    原创博文,转载请注明出处. 在学习TCP/IP 详解的过程中遇到了不止一次的关于检验和的概念,在吸取了他人理解的前提下,我决定用Wireshark 进行抓包分析. 首先我们得知道IP数据包格式 首先把 ...

  6. CGI杂谈

    CGI是一个连接外部应用程序到信息服务器(比如HTTP或者网络服务器)的标准.一个简单的HTML文档是无交互后台程序,它是静态的,也就是说它处于一个不可变的状态,即文本文件不可以变化.相反地,CGI程 ...

  7. 旅游[SPFA或是最小生成树][简单算法的灵活题]

    旅行 [问题描述] Z 小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z 小镇附近共有N 个景点(编号为1,2,3,…,N),这些景点被M 条道路连接着,所有道路都是双向的,两个景点之间 ...

  8. C/C++基础知识总结——数组、指针域、字符串

    1. 数组 1.1 数组作为函数参数 (1) 如果使用数组作为函数的参数,则实参和形参都是数组名,且类型要相同.数组名做参数时传递的是地址 (2) 使用方法: void rowSum(int a[][ ...

  9. [转]Mac's and serial TTY's

    Mac's are excellent tools for accessing serial device TTY ports (to console into PBX's, switches, an ...

  10. C# 号码归属地查询算法（根据Android来电归属地二进制文件查询修改）

    前言 近期有个项目需要用到号码归属查询,归属地数据库可能比不上ip138,淘宝上也有卖的-,-! 文本提供一个279188条记录并压缩成562KB的归属地数据.我在互联网上搜索了相关文章,要不是数据库 ...