函数的基本格式

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. SQL Server的链接服务器(MySQL、Oracle、Ms_sql、Access、SYBASE)

    原文:SQL Server的链接服务器(MySQL.Oracle.Ms_sql.Access.SYBASE) 一.使用 Microsoft OLE DB Provider For ODBC 链接MyS ...

  2. .Net编译之AnyCPU - 进阶者系列 - 学习者系列文章

    Visual Studio是一款非常强大的IDE工具,它为我们提供了强大的编码.调试和测试等工具,为我们编好.NET软件提供了强大的支持. 今天早晨想到了Visual Studio编译模式中的CPU类 ...

  3. WebIM(2)---消息缓存

    WebIM系列文章 在一步一步打造WebIM(1)一文中,已经介绍了如何实现一个简单的WebIM,但是,这个WebIM有一个问题,就是每一次添加消息监听器时,都必须访问一次数据库去查询是否有消息,显然 ...

  4. ftoa浮法成字符串

    #include <stdio.h> bool ftos(float num,char *s,int n) {     int temp; float t=num; int pn=0; b ...

  5. git简单教材

    0)初始化 $ git config --global user.name "xxx" $ git config --global user.email "xxx@gma ...

  6. Bootstrap 导航

    在本文中,您将学习如何使用 Bootstrap 工具包来创建基于导航.标签.胶囊式标签的导航. 基于标签的导航 nav nav-tabs <!DOCTYPE html> <html ...

  7. 《剑指Offer》面试题-重建二叉树

    题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...

  8. 大数据工具篇之Hive与HBase整合完整教程

    大数据工具篇之Hive与HBase整合完整教程 一.引言 最近的一次培训,用户特意提到Hadoop环境下HDFS中存储的文件如何才能导入到HBase,关于这部分基于HBase Java API的写入方 ...

  9. U盘安装Win7

    声明:本方法仅仅适用于windows 7 的安装. 工具准备: 1.网上下载一个windows 7 系统.最好是纯净版的,非Gost 版.虽然装机慢了一些,但到用时就体会到他的流畅. 2.Window ...

  10. D11

    =-=感觉今天的题目好难... 主要是没有碰到过,所以会觉得不懂怎么写.. 其实现在想想,T1,T2,T3其实都好水..T1其实没有做过还真不会,有做过的话就是个大水题了 T2找最小环..超级裸的,但 ...