锘??xml version="1.0" encoding="utf-8" standalone="yes"?>
]]>
]]>
]]>
]]>
浣跨敤<%=define_javascript_functions%>鎴栬?%= javascript_include_tag :defaults %> 闃呰鍏ㄦ枃
]]>
]]>
<table border="1">
聽<tr>
聽聽<td>濮撳悕</td>
聽聽<td>鍦板潃</td>
聽</tr>
聽<tbody id="mainbody">
聽<tr id="delCell">
聽聽<td>name</td>
聽聽<td>address</td>
聽</tr>
聽</tbody>
</table>
鍙栧緱tbody鐨勫厓绱爒ar mailbody = document.getElementById("mainbody");,
鎺ョ潃鍙栧緱瑕佸垹闄よ鐨勫厓绱爒ar cell = document.getElementById("delCell");
鏈鍚庡氨鏄粠tbody涓Щ鍘昏鍒犻櫎鐨勮灝卞彲浠ヤ簡mainbody.removeChild(cell);
瀹屾暣鐨勪唬鐮佸涓嬶細
<html>
<head>
聽<title>鍔ㄦ佸垹闄よ〃鏍肩殑琛?lt;/title>
聽<script type="text/javascript">
聽function deleteCell(){
聽聽var mailbody = document.getElementById("mainbody");
聽聽var cell = document.getElementById("delCell");
聽聽if(cell!=undefined){
聽聽聽聽 mainbody.removeChild(cell);
聽聽}聽
聽}
</script>
</head>
<body>
<table border="1">
聽<tr>
聽聽<td>濮撳悕</td>
聽聽<td>鍦板潃</td>
聽</tr>
聽<tbody id="mainbody">
聽<tr id="delCell">
聽聽<td>name</td>
聽聽<td>address</td>
聽</tr>
聽</tbody>
</table>
<input type="button" value="鍒犻櫎" onclick="deleteCell()"/>
</body>
<html>
<body>
<table border="1">
聽<tr>
聽聽<td>濮撳悕</td>
聽聽<td>鍦板潃</td>
聽</tr>
聽<tbody id="mainbody">
聽</tbody>
</table>
<input type="button" value="澧炲姞琛? onclick="addCell()"/>
</body>
</html>
Element.show(element,鈥?
鍜?/span>
Element.hide(element,鈥?
鍙互鏍規嵁鍏冪礌
id
鏉ユ樉紺哄拰闅愯棌鍏冪礌銆?/span>
<html>
聽聽聽
<head>
聽聽聽聽聽聽聽
<title></title>
聽聽聽聽聽聽聽 <%=javascript_include_tag(
:defaults
)%>
聽聽聽聽聽聽聽
<script
type
="text/javascript">
聽聽聽聽聽聽聽聽聽聽聽 function show(){
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 Element.show('mydiv');
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽聽聽聽聽 function hide(){
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 Element.hide('mydiv');
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽
</script>
聽聽聽
</head>
聽聽聽
<body>
聽聽聽聽聽聽聽
<input
type
="button" value="show" onclick="show();"/>
聽聽聽聽聽聽聽
<input
type
="button" value="hide" onclick="hide();"/>
聽聽聽聽聽聽聽
<div
id
="mydiv" style="display:none;">
聽聽聽聽聽聽聽聽聽聽聽 Test Element
聽聽聽聽聽聽聽
</div>
聽聽聽
</body>
</html>
Element.remove(element)
鏍規嵁鍏冪礌
id
鍒犻櫎鍏冪礌銆?/span>
<html>
聽聽聽
<head>
聽聽聽聽聽聽聽
<title>Element.remove</title>
聽聽聽聽聽聽聽 <%=javascript_include_tag(
:defaults
)%>
聽聽聽聽聽聽聽
<script
type
="text/javascript">
聽聽聽聽聽聽聽聽聽聽聽 function remove(){
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 Element.remove('mydiv');
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽
</script>
聽聽聽
</head>
聽聽聽
<body>
聽聽聽聽聽聽聽
<input
type
="button" value="remove" onclick="remove();"/>
聽聽聽聽聽聽聽
<div
id
="mydiv">
聽聽聽聽聽聽聽聽聽聽聽 Test Element
聽聽聽聽聽聽聽
</div>
聽聽聽
</body>
</html>
Prototype
鎻愪緵浜嗕竴浜涚畝渚跨殑鏂規硶鏉ユ搷浣?/span>
DOM
銆?/span>
document.getElementsByClassName(鈥渕yclass鈥?
鏍規嵁
class
鐨勫悕縐版潵鍙栧緱鍏冪礌銆備笉綆?/span>
class
鐨勫悕縐版槸涓嶆槸鍞竴鐨勫畠閮芥槸榪斿洖涓涓暟緇勩?/span>
<html>
<head>
<title>
鎿嶄綔
DOM
鐨勪緥瀛?/span>
</title>
<script src="/script/prototype.js"></script>
<script type=鈥漷ext/javascript鈥?gt;
function show() {
聽聽 var mydiv = document.getElementsByClassName(myclass) ;
聽聽 alert(mydiv.length);
聽聽 alert(mydiv[0].innerHTML);
}
</script>
</head>
<body>
<div class="myclass">Test</div>
<input type="submit" value="click" onclick=" show ()">
</body>
</html>
$(element,鈥?
鏍規嵁鍏冪礌鐨?/span>
id
榪斿洖鍏冪礌瀵硅薄銆?/span>
<html>
<head>
<title>
鎿嶄綔
DOM
鐨勪緥瀛?/span>
</title>
<script src="/script/prototype.js"></script>
<script type=鈥漷ext/javascript鈥?gt;
function show() {
聽聽 var mydiv =聽 $(鈥渕ydiv鈥?;
聽聽聽聽聽聽聽聽 alert(mydiv);
}
</script>
</head>
<body>
<div id=鈥漨ydiv鈥?gt;Test</div>
<input type="submit" value="click" onclick=" show ()">
</body>
</html>
濡傛灉浼犲叆鐨勫弬鏁版槸澶氫釜鍏冪礌鐨?/span>
id
錛岄偅灝嗚繑鍥炰竴涓寘鍚厓绱犲璞$殑鏁扮粍錛屼緥濡傦細
<html>
聽聽聽
<head>
聽聽聽聽聽聽聽
<title></title>
聽聽聽聽聽聽聽 <%=javascript_include_tag(
:defaults
)%>
聽聽聽聽聽聽聽
<script
type
="text/javascript">
聽聽聽聽聽聽聽聽聽聽聽 function show(){
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 var mydiv = $("mydiv1","mydiv2");
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 alert(mydiv.length);
//---------2
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽
</script>
聽聽聽
</head>
聽聽聽
<body>
聽聽聽聽聽聽聽
<div
id
="mydiv1"></div>
聽聽聽聽聽聽聽
<div
id
="mydiv2"></div>
聽聽聽聽聽聽聽
<input
type
="button" value="show" onclick="show();"/>
聽聽聽
</body>
</html>
$F("")
鏍規嵁鍏冪礌鐨?/span>
id
鍙栧緱鍏冪礌鐨勫箋?/span>
<html>
聽聽聽
<head>
聽聽聽聽聽聽
<title></title>
聽聽聽聽聽聽 <%=javascript_include_tag(
:defaults
)%>
聽聽聽聽聽聽
<script
type
="text/javascript">
聽聽聽聽聽聽聽聽聽聽 function show(){
聽聽聽聽聽聽聽聽聽聽聽聽聽 var myValue = $F("myText");
聽聽聽聽聽聽聽聽聽聽聽聽聽 alert(myValue); //-----myvalue
聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽
</script>
聽聽聽
</head>
聽聽聽
<body>
聽聽聽聽聽聽
<input
type
="text" value="myvalue" id="myText"/>
聽聽聽聽聽聽
<input
type
="button" value="show" onclick="show();"/>
聽聽聽
</body>
</html>
鍦?/span> javascript 涓畾涔夌被鐨勬柟寮忔湁濂藉嚑縐嶏紝 prototype 涔熸彁渚涗簡涓縐嶅畾涔夌被鐨勬柟娉曘?/span>
聽聽聽 var Shape = Class.create();
聽聽聽 Shape.prototype = {
聽聽聽聽聽聽 initialize:function(color){
聽聽聽聽聽聽聽聽聽聽 this.color = color;
聽聽聽聽聽聽聽聽聽聽 alert('in initialize');
聽聽聽聽聽聽 },
聽聽聽聽聽聽 draw:function(){
聽聽聽聽聽聽聽聽聽聽 alert("in draw");
聽聽聽聽聽聽聽聽聽聽 alert(this.color);
聽聽聽聽聽聽 }
聽聽聽 }
聽聽聽 var shape = new Shape('red');
shape.draw();
initialize
鏄?/span>
Shape
鐨勬瀯閫犲櫒銆?/span>
2.
綾葷戶鎵?/span>
鎴戜滑鐜板湪鏈変竴涓?/span> Circle 緇ф壙浜?/span> Shape 騫跺鍔犱簡鍗婂緞鐨勫睘鎬с備唬鐮佸涓嬶細
聽聽聽 var Circle = Class.create();
聽聽聽 Circle.prototype = Object.extend(new Shape(),{
聽聽聽聽聽聽 initialize:function(color,radius){
聽聽聽聽聽聽聽聽聽聽 alert('in Circle initialize');
聽聽聽聽聽聽聽聽聽聽 this.color = color;
聽聽聽聽聽聽聽聽聽聽 this.radius = radius;
聽聽聽聽聽聽 },
聽聽聽聽聽聽 drawCircle:function(){
聽聽聽聽聽聽聽聽聽聽 alert("in drawCircle");
聽聽聽聽聽聽聽聽聽聽 alert("color:"+this.color);
聽聽聽聽聽聽聽聽聽聽 alert("radius:"+this.radius);
聽聽聽聽聽聽 }
聽聽聽 })
聽聽聽
聽聽聽 var circle = new Circle("green",10);
聽聽聽 circle.drawCircle();
聽聽聽 circle.draw();
Circle 鍐呯殑 this.color 鏄粠鐖剁被緇ф壙涓嬫潵鐨勶紝 new Circle("green",10) 鐨勬椂鍊欑埗綾葷殑鏋勯犲嚱鏁板皢棣栧厛鍒墽琛岋紝浣嗚繖鏃剁殑 color 鐨勫兼槸 undefine 錛屾帴鐫鎵ц瀛愮被鐨勬瀯閫犲嚱鏁?/span> color 灝嗚璧嬪間負 鈥?/span> green鈥?