【JS学习笔记】关于function函数
函数的基本格式
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函数的更多相关文章
- [前端JS学习笔记]JavaScript function
一.函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) ...
- (转)js学习笔记()函数
1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...
- js学习笔记34----自执行函数
自执行函数的写法通常如下: 方式1: (function(){ *** 写事件处理代码 *** }()) 方式2: (function(){ *** 写事件处理代码 *** })() 方式3: !(f ...
- JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
随机推荐
- HTTP 报文中的 Header 字段进行身份验证
[小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证 在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读 ...
- windows下架设SVN服务器并设置开机启动
原文:windows下架设SVN服务器并设置开机启动 1.安装SVN服务器,到http://subversion.apache.org/packages.html上下载windows版的SVN,并安装 ...
- cocos2d-x3.2中将XCode发展project转移到VS2010可能会发生错误
一些代码在线xcode写.我们希望我们自己的屌丝vs上述的实施,要重新构建它project,然后加载.但是绝对 没想到在VS里新建project再加入文件,编译后出现了好多错误.以下就把解决这些错误的 ...
- CLR Profiler 性能分析工具
CLR Profiler 性能分析工具 CLR Profiler 性能分析工具 CLR Profiler 有两个版本,分别用于CLR1.1 和 CLR2.0,至于CLR4试了一些也可以,但不知道是否完 ...
- Android中的dp,px以及wrap_content的实际展示效果
因为一个效果中的图片设置了wrap_content的属性,但在720dp跟540dp上面显示不一致使老大非常恼火.跟他讲也讲不明白.于是乎让我们彼此测试来探个究竟.首先测试的是个图片: 它的物理像素是 ...
- greenlet微线程
Greenlet简介 一个 “greenlet” 是一个很小的独立微线程.可以把它想像成一个堆栈帧,栈底是初始调用,而栈顶是当前greenlet的暂停位置.你使用greenlet创建一堆这样的堆 栈, ...
- Coursera台大机器学习基础课程1
Coursera台大机器学习基础课程学习笔记 -- 1 最近在跟台大的这个课程,觉得不错,想把学习笔记发出来跟大家分享下,有错误希望大家指正. 一 机器学习是什么? 感觉和 Tom M. Mitche ...
- EPROCESS KPROCESS PEB
EPROCESS KPROCESS PEB <寒江独钓>内核学习笔记(2) 在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结 ...
- UIWebView的探索
UIWebView 说到iOS的UIWebView,应该会很快回忆起常用委托方法,异步loadRequest.stopLoading.reload方法等. 在此我总结一些容易忽略的属性和方法: 1. ...
- 【转】几点 iOS 开发技巧
[译] 几点 iOS 开发技巧 原文:iOS Programming Architecture and Design Guidelines 原文来自破船的分享 原文作者是开发界中知晓度相当高的 Mug ...