JS基础整理+实例

JavaScript 是脚本语言

JavaScript 对大小写是敏感的。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

单行注释以 // 开头。多行注释以 /* 开始,以 */ 结尾。

老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

写入HTML输出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

跳出提示窗口:welcome
<button type="button" οnclick=" alert('Welcome!')">点击这里</button>

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById( id ) 方法。
请使用 "id" 属性来标识 HTML 元素:

点击按钮,改变文本内容
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
x=document.getElementById("demo"); // 找到元素
  x.innerHTML="Hello JavaScript!"; // 改变内容  }     x.style.color="#ff0000"; //  改变 HTML 元素的样式。
                                                                       x.value=x.value.toUpperCase(  ); //针对输入框,把输入的小写英文字母转为大写
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>

<script>
document.getElementById("p2").style.color="blue";       //改变元素样式
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

简写:
<h1 id="id1">My Heading 1</h1>

<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>
点击按钮,隐藏文本   visibility=' visible'可见,' hidden'不可见
<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" οnclick="document.getElementById('p1').style. visibility='hidden'" />

点亮灯泡
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element= document.getElementById('myimage')
if (element.src.match("bulbon"))
  {  element.src="/i/eg_bulboff.gif";  } 
else
  {  element.src="/i/eg_bulbon.gif";  } 
}
</script>
<img id="myimage" οnclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html> 

放开鼠标就灭灯
<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" οnmοusedοwn="lighton()" οnmοuseup="lightoff()" src="/i/eg_bulboff.gif" />
<p>按住鼠标不放可以点亮这盏灯!</p>
</body>
</html>

验证用户的输入是否是数字: http://www.w3school.com.cn/tiy/t.asp?f=js_intro_validate

脚本也可以放在body和head中,此时脚本会在页面加载时执行:
<!DOCTYPE html>
<html>
<body>
<p>My First Paragraph.</p>
<button οnclick="myFunction()">点击这里</button>
<script>
function myFunction()
{   document.write("糟糕!文档消失了。"); 
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
在文档已加载后使用document.write(比如在函数中),会覆盖整个文档。比如这里,点击了button后,之前的都消失了。
</p>
</body>
</html>
通常的做法是把函数放入 <head> 部分中,这样把它们安置到同一处位置,不会干扰页面的内容。
提示: 我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
点击按钮改变文字:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" οnclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script type="text/javascript"  src="/js/myScript.js"></script>
</body>
</html>

myScript.js文件中的function可能如下:
function myFunction()
{ x=document.getElementById("demo"); // 找到元素
  x.innerHTML="Hello JavaScript!"; // 改变内容 }    

变量是存储信息的容器
使用 var 关键词来声明变量:
var x=2, y=3;  一条语句,多个变量
var name="Bill Gates";
var answer='Yes I am!';
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
var carname;  此时carname的值是undefined。Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
carname="Volvo";   现在carname的值是Volvo。
JavaScript对象:
var person={firstname:"Bill", lastname:"Gates", id:5566};
两种寻址方式:
name=person.lastname;
name=person["lastname"];
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

属性和方法

属性是与对象相关的值。

方法是能够在对象上执行的动作。

举例:汽车就是现实生活中的对象。

汽车的属性:

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white 

汽车的方法:

car.start()

car.drive()

car.brake()
调用方法:objectName.methodName()
var message="Hello world!";
var x=message.toUpperCase();  变成大写
函数是由事件驱动的 或者当它被调用时执行的 可重复使用的代码块。
function functionname()
{
这里是要执行的代码,关键词 function 必须是小写的
}
调用的函数会执行一个计算,然后返回结果
<!DOCTYPE html>
<html>
<body>
<p>本例调用的函数会执行一个计算,然后返回结果:</p>
<p id="demo"></p>
<script>
function myFunction(a,b)
{   return a*b;  
document.getElementById("demo").innerHTML= myFunction(4,3);     //即12
</script>
</body>
</html>

根据时间,选择发送问候
<!DOCTYPE html>
<html>
<body>
<p>点击这个按钮,获得基于时间的问候。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {   x="Good morning"; 
else if (time<20)
  {   x="Good day";   } 
else
  {   x="Good evening";   } 
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{   var y=document.getElementById("mess"); 
   y.innerHTML="错误:" + err + "。";  
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">测试输入值</button>
<p id="mess"></p>
</body>
</html>

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有:

  • 用户是否已填写表单中的必填项目?
  • 用户输入的邮件地址是否合法?
  • 用户是否已输入合法的日期?
  • 用户是否在数据域 (numeric field) 中输入了文本?
验证表单需要填写的项目不为空+验证email格式  http://www.w3school.com.cn/js/js_form_validation.asp

HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

通过 id 查找 HTML 元素

<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是:' + x.innerHTML + '</p>');    这里 x.innerHTML就是Hello World!
</script>
</body>
</html>

通过标签名查找 HTML 元素  

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
提示: 通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

JavaScript可以动态的创建HTML内容:
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());   这里的 Date()直接就获取到当前时间了:Tue Oct 21 2014 14:41:08 GMT+0800 (中国标准时间)
</script>
</body>
</html>

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应:
<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>    //在点击h1文本的时候,改变文本内容 
写到函数中:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{  x=document.getElementById("head1"); 
   x.innerHTML="谢谢!"; } 
</script>
</head>
<body>
<h1 id="head1" οnclick="changetext()">请点击该文本</h1> 
</body>
</html>

onload 和 onunload 事件,用于检测浏览器是否开启cookie:  http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onload_onunload

onmouseover 和 onmouseout 事件、onmousedown、onmouseup 以及 onclick 事件

<!DOCTYPE html>
<html>
<body>
<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">把鼠标移到上面</div>
<script>
function mDown(obj)
{obj.style.backgroundColor="#1ec5e5";
 obj.innerHTML="请释放鼠标按钮" }
function mUp(obj)
{obj.style.backgroundColor="green";
 obj.innerHTML="谢谢"}
function mOver(obj)
{ obj.innerHTML="谢谢"}
function mOut(obj)
{ obj.innerHTML="把鼠标移到上面"}
</script>
</body>
</html>

简易的文本onfocus事件:
<h1 οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">
请把鼠标移到这段文本上
</h1>

onload事件,加载页面时跳出一个提示框:
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage()
{   alert("这段消息由 onload 事件触发"); 
</script>
</head>
<body  οnlοad="mymessage()">
</body>
</html>
  onfocus事件,文本框输入时改变背景颜色:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{   x.style.background="yellow"; 
</script>
</head>
<body>
请输入英文字符:<input type="text" οnfοcus="myFunction(this)">
</body>
</html>

在JavaScript中创建新的 HTML 元素

<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");   // 创建新的 <p> 元素
var node=document.createTextNode("这是新段落。");   // 创建一个文本节点
para.appendChild(node);    // 须向 <p> 元素追加 这个文本节点
var element=document.getElementById("div1");   // 找到一个已有的元素
element.appendChild(para);    // 追加新元素
</script>
</body>
</html>

删除HTML元素
<script>
var parent=document.getElementById("div1");   //获得该元素的父元素
var child=document.getElementById("p1");     //找到子元素
parent.removeChild(child);         //从父元素中删除子元素
</script>

JavaScript对象
<!DOCTYPE html>
<html>
<body>
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{   this.lastname=name; 
}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("Ballmer");
document.write(myMother.lastname);
</script>
</body>
</html>

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。

JavaScript 数字 八进制和十六进制

如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 "0x",则解释为十六进制数。

var txt="Hello World!"
document.write(txt.length)  得12
txt.big()、txt.bold()、txt.italics()、txt.strike()、txt.fontcolor("Red")、txt.fontsize(16)、txt.toLowerCase()、txt.toUpperCase()、txt.sub()、txt.sup()、txt.link(" http://www.w3school.com.cn")

match() 方法 如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

replace() 方法在字符串中替换字符。
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))

JavaScript Date(日期)对象 实例


创建bollean对象  所有创建false 和所有创建true的方法
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");

算数、函数(方法)实例:

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7))   输出为:5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数:

document.write(Math.random())   输出为:0.9370844220218102

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:

document.write(Math.floor(Math.random()*11))   输出为:3

什么是 RegExp?

RegExp 是正则表达式的缩写。

RegExp 对象有 3 个方法:test()、exec() 以及 compile()。


Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
举例显示浏览器窗口的高度和宽度: http://www.w3school.com.cn/tiy/t.asp?f=js_window_innerwidth_innerheight

其他 Window 方法

一些其他方法:

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

返回访问者屏幕的宽度,高度: http://www.w3school.com.cn/tiy/t.asp?f=js_window_screen_availwidth

Window Screen   window.screen  对象在编写时可以不使用 window 这个前缀。

一些属性:

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

Window Locatio  window.location  对象在编写时可不使用 window 这个前缀。

一些例子:

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 (80 或 443)
  • location.protocol 返回所使用的 web 协议(http:// 或 https://)
  • location.href 属性返回当前页面的 URL。

function newDoc() 
{ window.location.assign(" http://www.w3school.com.cn") }     //可以再加个button,点击后加载新页面

Window History   window.history  对象在编写时可不使用 window 这个前缀。

一些方法:

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击按钮向前相同

Window Navigator   window.navigator 对象在编写时可不使用 window 这个前缀。

警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator 数据可被浏览器使用者更改
  • 浏览器无法报告晚于浏览器发布的新操作系统
<!DOCTYPE html>
<html>
<body>
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";  
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>

JavaScript消息框   可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

<script type="text/javascript">
function disp_alert()
  alert("我是警告框!! + '\n' + "向警告框添加折行。 ")  }   // 警告框
</script>

<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");  // 确认框, 如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
if (r==true)
  {   alert("You pressed OK!");   } 
else
  {   alert("You pressed Cancel!");   } 
}
</script>


<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Bill Gates")   //提示框, Bill Gates是默认名字, 请输入您的名字是提示框的提示语言
  if (name!=null && name!="")
    {   document.write("你好!" + name + " 今天过得怎么样?")   } 
  }
</script>

JavaScript计时事件   在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
 
     
var  t=setTimeout("javascript语句",毫秒)    // 未来的某时执行代码
 
    
clearTimeout( t)    // 取消setTimeout(变量t)
举例:

<script type="text/javascript">
function timedMsg()
{   var t=setTimeout("alert('5 秒!')",5000)  }    // 单击按钮, 5 秒后弹出一个警告框。
</script>

function timedText()      //单机按钮,在input输入文本框内显示 2 秒、4 秒和 6 秒的计时
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}

<html>     // 点击“开始计时”启动计时器。输入框会 从 0 开始 进行计时。点击“停止计时”终止计时,重置为 0。
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c      //获取的id是第二个input的id,不是第一个,也不是第三个!
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">
</form>
</body>
</html>

类似20:36:33这样的实时计时表  http://www.w3school.com.cn/tiy/t.asp?f=jseg_timing_clock

JavaScript Cookies   cookie是 用来识别用户的,可以存取(名字、密码、日期)
名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词。

JavaScript 框架(库)   一些广受欢迎的 JavaScript 框架:jQuery、Prototype、Mootools。
这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。
(1 j Query 是目前最受欢迎的 JavaScript 框架。 它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。

 同时提供 companion UI(用户界面)和插件。

(2) Prototype  是一种库,提供了,执行常见 web 任务的简单 API( 包含属性和方法的库,用于操作 HTML DOM)

Prototype 通过提供类和继承,实现了对 JavaScript 的增强。

(3) MooTools  也是一个框架,提供了,使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。

CDN - 内容分发网络(Content Delivery Network)   CDN 是包含可分享代码库的服务器网络。
您总是希望网页可以尽可能地快。希望页面的容量尽可能地小,希望浏览器尽可能多地进行缓存。如果许多不同的网站使用相同的 JavaScript 框架,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

Google 为一系列 JavaScript 库提供了免费的 CDN,包括:jQuery、Prototype、MooTools、Dojo、Yahoo! YUI

如需在您的网页中使用 JavaScript 框架库,只需在 <script> 标签中引用该库即可:

引用 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
引用 Prototype
    
    
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js>
</script>

jQuery 描述

主要的 jQuery 函数是 $() 函数。如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

function myFunction()         //javascript方式的函数
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
οnlοad=myFunction;

function myFunction()         //jQuery方式的函数
{ $("#h01").html("Hello jQuery"); }
$(document).ready(myFunction);
具体代码:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function myFunction()
$("#h01").attr("style","color:red").html("Hello jQuery")     //带有颜色属性设置的jQuery
$("#h01").html("Hello jQuery")  }
$(document).ready(myFunction);      // HTML DOM 文档对象被传递到 jQuery :$(document)。
                                                         //传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

提示:jQuery 对象拥有的属性和方法,与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。


Prototype 描述
与 jQuery 相同,Prototype 也有自己的 $() 函数。

$() 函数接受 HTML DOM 元素的 id 值(或 DOM 元素),并会向 DOM 对象添加新的功能。

与 jQuery 不同,Prototype 没有用以取代 window.onload() 的 ready() 方法。相反,Prototype 会向浏览器及 HTML DOM 添加扩展。

function myFunction()         //javascript方式的函数
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
οnlοad=myFunction;

function myFunction()         //Prototype方式的函数
   
   
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");      //带有颜色属性设置的Prototype
   
   
{ $("h01").insert("Hello Prototype!"); }Event.observe(window,"load",myFunction); //obserce()三个参数:处理的 HTML DOM 或 BOM(浏览器对象模型)对象、处理的事件调用的函数
实例:
一张灰色图片,鼠标浮于图片之上显示彩色,点击跳转页面。 http://www.w3school.com.cn/tiy/t.asp?f=jseg_animation
一张图片,水星、金星、判断坐标给出不同的注释。 http://www.w3school.com.cn/tiy/t.asp?f=jseg_imagemap



  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值