函数的基本格式

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. HTTP 报文中的 Header 字段进行身份验证

    [小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证 在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读 ...

  2. windows下架设SVN服务器并设置开机启动

    原文:windows下架设SVN服务器并设置开机启动 1.安装SVN服务器,到http://subversion.apache.org/packages.html上下载windows版的SVN,并安装 ...

  3. cocos2d-x3.2中将XCode发展project转移到VS2010可能会发生错误

    一些代码在线xcode写.我们希望我们自己的屌丝vs上述的实施,要重新构建它project,然后加载.但是绝对 没想到在VS里新建project再加入文件,编译后出现了好多错误.以下就把解决这些错误的 ...

  4. CLR Profiler 性能分析工具

    CLR Profiler 性能分析工具 CLR Profiler 性能分析工具 CLR Profiler 有两个版本,分别用于CLR1.1 和 CLR2.0,至于CLR4试了一些也可以,但不知道是否完 ...

  5. Android中的dp，px以及wrap_content的实际展示效果

    因为一个效果中的图片设置了wrap_content的属性,但在720dp跟540dp上面显示不一致使老大非常恼火.跟他讲也讲不明白.于是乎让我们彼此测试来探个究竟.首先测试的是个图片: 它的物理像素是 ...

  6. greenlet微线程

    Greenlet简介 一个 “greenlet” 是一个很小的独立微线程.可以把它想像成一个堆栈帧,栈底是初始调用,而栈顶是当前greenlet的暂停位置.你使用greenlet创建一堆这样的堆 栈, ...

  7. Coursera台大机器学习基础课程1

    Coursera台大机器学习基础课程学习笔记 -- 1 最近在跟台大的这个课程,觉得不错,想把学习笔记发出来跟大家分享下,有错误希望大家指正. 一 机器学习是什么? 感觉和 Tom M. Mitche ...

  8. EPROCESS KPROCESS PEB

    EPROCESS KPROCESS PEB <寒江独钓>内核学习笔记(2)     在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结 ...

  9. UIWebView的探索

    UIWebView 说到iOS的UIWebView,应该会很快回忆起常用委托方法,异步loadRequest.stopLoading.reload方法等. 在此我总结一些容易忽略的属性和方法: 1.  ...

  10. 【转】几点 iOS 开发技巧

    [译] 几点 iOS 开发技巧 原文:iOS Programming Architecture and Design Guidelines 原文来自破船的分享 原文作者是开发界中知晓度相当高的 Mug ...