BlogJava-zidoing-随笔分类-Ajaxhttp://www.blogjava.net/zidoing/category/8591.html迷途师渡，悟了自渡。zh-cnWed, 28 Feb 2007 04:06:54 GMTWed, 28 Feb 2007 04:06:54 GMT60丰富的ajax资源http://www.blogjava.net/zidoing/archive/2006/07/16/58407.htmlzidoingzidoingSun, 16 Jul 2006 04:37:00 GMThttp://www.blogjava.net/zidoing/archive/2006/07/16/58407.htmlhttp://www.blogjava.net/zidoing/comments/58407.htmlhttp://www.blogjava.net/zidoing/archive/2006/07/16/58407.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/58407.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/58407.htmlhttp://www.maxkiesler.com/index.php/mhub/category/

zidoing 2006-07-16 12:37 发表评论
]]>Ajax随想http://www.blogjava.net/zidoing/archive/2006/06/02/50084.htmlzidoingzidoingFri, 02 Jun 2006 15:57:00 GMThttp://www.blogjava.net/zidoing/archive/2006/06/02/50084.htmlhttp://www.blogjava.net/zidoing/comments/50084.htmlhttp://www.blogjava.net/zidoing/archive/2006/06/02/50084.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/50084.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/50084.html阅读全文

zidoing 2006-06-02 23:57 发表评论
]]>Ajax 技术资源中心http://www.blogjava.net/zidoing/archive/2006/05/30/48951.htmlzidoingzidoingTue, 30 May 2006 05:27:00 GMThttp://www.blogjava.net/zidoing/archive/2006/05/30/48951.htmlhttp://www.blogjava.net/zidoing/comments/48951.htmlhttp://www.blogjava.net/zidoing/archive/2006/05/30/48951.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/48951.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/48951.html http://www-128.ibm.com/developerworks/cn/xml/ajax/?S_TACT=105AGX52&S_CMP=techcsdn

zidoing 2006-05-30 13:27 发表评论
]]>AJAX框架汇总http://www.blogjava.net/zidoing/archive/2006/05/22/47524.htmlzidoingzidoingMon, 22 May 2006 12:35:00 GMThttp://www.blogjava.net/zidoing/archive/2006/05/22/47524.htmlhttp://www.blogjava.net/zidoing/comments/47524.htmlhttp://www.blogjava.net/zidoing/archive/2006/05/22/47524.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/47524.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/47524.htmlhttp://blog.csdn.net/baggio785/archive/2006/05/21/747753.aspx

zidoing 2006-05-22 20:35 发表评论
]]>如何使用ajax做实时查询http://www.blogjava.net/zidoing/archive/2006/04/30/44105.htmlzidoingzidoingSat, 29 Apr 2006 16:43:00 GMThttp://www.blogjava.net/zidoing/archive/2006/04/30/44105.htmlhttp://www.blogjava.net/zidoing/comments/44105.htmlhttp://www.blogjava.net/zidoing/archive/2006/04/30/44105.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/44105.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/44105.html
使用<%=define_javascript_functions%>或者<%= javascript_include_tag :defaults %>  阅读全文

zidoing 2006-04-30 00:43 发表评论
]]>ROR中如何使用ajaxhttp://www.blogjava.net/zidoing/archive/2006/04/30/44102.htmlzidoingzidoingSat, 29 Apr 2006 16:21:00 GMThttp://www.blogjava.net/zidoing/archive/2006/04/30/44102.htmlhttp://www.blogjava.net/zidoing/comments/44102.htmlhttp://www.blogjava.net/zidoing/archive/2006/04/30/44102.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/44102.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/44102.html阅读全文

zidoing 2006-04-30 00:21 发表评论
]]>如何删除表格的行http://www.blogjava.net/zidoing/archive/2006/03/29/38047.htmlzidoingzidoingWed, 29 Mar 2006 06:35:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/29/38047.htmlhttp://www.blogjava.net/zidoing/comments/38047.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/29/38047.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/38047.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/38047.html上次讲到了如何动态给表格增加行，那么这次就讲讲如何删除表格的行了。首先建立一个表格，
<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的元素var mailbody = document.getElementById("mainbody");,
接着取得要删除行的元素var cell = document.getElementById("delCell");
最后就是从tbody中移去要删除的行就可以了mainbody.removeChild(cell);
完整的代码如下：
<html>
<head>
 <title>动态删除表格的行</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>



zidoing 2006-03-29 14:35 发表评论
]]>给表格动态增加行http://www.blogjava.net/zidoing/archive/2006/03/27/37650.htmlzidoingzidoingMon, 27 Mar 2006 09:38:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/27/37650.htmlhttp://www.blogjava.net/zidoing/comments/37650.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/27/37650.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/37650.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/37650.html在AJAX的应用中很经常碰到要动态给表格增加行,这该如何实现呢?
先建一个表如下:
<table border="1">
 <tr>
  <td>姓名</td>
  <td>地址</td>
 </tr>
 <tbody id="mainbody">
 </tbody>
</table>
现在进入实际的操作了.我们先动态地生成一个行
var cell = document.createElement("tr");
接着动态生成两个列和要放入列中的值.
var row1 = document.createElement("td");
var row2 = document.createElement("td");
var text1 = document.createTextNode("zidoing")
var text2 = document.createTextNode("xiamen");
这些都做完以后下面就很简单了。
把值放入列中.
row1.appendChild(text1);
row2.appendChild(text2);
把列放入行中
cell.appendChild(row1);
cell.appendChild(row2);
最后取得tbody，把行放入就可以了。
var mainbody = document.getElementById("mainbody");
mainbody.appendChild(cell);
完整的代码如下：
<html>
 <head>
  <title>动态增加行</title>
 
 <script type="text/javascript">
  function addCell(){
   var cell = document.createElement("tr");
   var row1 = document.createElement("td");
   var row2 = document.createElement("td");
   var text1 = document.createTextNode("zidoing")
   var text2 = document.createTextNode("xiamen");
   row1.appendChild(text1);
   row2.appendChild(text2);
   cell.appendChild(row1);
   cell.appendChild(row2);
   var mainbody = document.getElementById("mainbody");
   mainbody.appendChild(cell);
  }
 </script>
</head>

<body>

<table border="1">
 <tr>
  <td>姓名</td>
  <td>地址</td>
 </tr>
 <tbody id="mainbody">
 </tbody>
</table>

<input type="button" value="增加行" onclick="addCell()"/>

</body>

</html>



zidoing 2006-03-27 17:38 发表评论
]]>prototype类库的使用(三)http://www.blogjava.net/zidoing/archive/2006/03/24/37199.htmlzidoingzidoingFri, 24 Mar 2006 05:37:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/24/37199.htmlhttp://www.blogjava.net/zidoing/comments/37199.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/24/37199.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/37199.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/37199.html 4.Element 使用

Element.show(element,…) 和 Element.hide(element,…) 可以根据元素 id 来显示和隐藏元素。

<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 删除元素。

<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>



zidoing 2006-03-24 13:37 发表评论
]]>30篇Ajax教程http://www.blogjava.net/zidoing/archive/2006/03/22/36896.htmlzidoingzidoingWed, 22 Mar 2006 10:27:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/22/36896.htmlhttp://www.blogjava.net/zidoing/comments/36896.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/22/36896.html#Feedback2http://www.blogjava.net/zidoing/comments/commentRss/36896.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/36896.html
http://www.maxkiesler.com/index.php/weblog/comments/round_up_of_30_ajax_tutorials/

zidoing 2006-03-22 18:27 发表评论
]]>prototype类库的使用(二) http://www.blogjava.net/zidoing/archive/2006/03/22/36823.htmlzidoingzidoingWed, 22 Mar 2006 04:48:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/22/36823.htmlhttp://www.blogjava.net/zidoing/comments/36823.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/22/36823.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/36823.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/36823.html 3. 操作 DOM.

Prototype 提供了一些简便的方法来操作 DOM 。

document.getElementsByClassName(“myclass”) 根据 class 的名称来取得元素。不管 class 的名称是不是唯一的它都是返回一个数组。

<html>

<head>

<title> 操作 DOM 的例子 </title>

<script src="/script/prototype.js"></script>

<script type=”text/javascript”>

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,…) 根据元素的 id 返回元素对象。

<html>

<head>

<title> 操作 DOM 的例子 </title>

<script src="/script/prototype.js"></script>

<script type=”text/javascript”>

function show() {

   var mydiv =  $(“mydiv”);

         alert(mydiv);

}

</script>

</head>

<body>

<div id=”mydiv”>Test</div>

<input type="submit" value="click" onclick=" show ()">

</body>

</html>

如果传入的参数是多个元素的 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("") 根据元素的 id 取得元素的值。

<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>



zidoing 2006-03-22 12:48 发表评论
]]>prototype类库的使用(一)http://www.blogjava.net/zidoing/archive/2006/03/21/36615.htmlzidoingzidoingTue, 21 Mar 2006 05:25:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/21/36615.htmlhttp://www.blogjava.net/zidoing/comments/36615.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/21/36615.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/36615.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/36615.html 1. 定义类

在 javascript 中定义类的方式有好几种， prototype 也提供了一种定义类的方法。

    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 是 Shape 的构造器。

2. 类继承

我们现在有一个 Circle 继承了 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 ，接着执行子类的构造函数 color 将被赋值为 “ green”.



zidoing 2006-03-21 13:25 发表评论
]]>《Ajax基础》厦门外图可以买到了。http://www.blogjava.net/zidoing/archive/2006/03/17/35856.htmlzidoingzidoingFri, 17 Mar 2006 11:45:00 GMThttp://www.blogjava.net/zidoing/archive/2006/03/17/35856.htmlhttp://www.blogjava.net/zidoing/comments/35856.htmlhttp://www.blogjava.net/zidoing/archive/2006/03/17/35856.html#Feedback0http://www.blogjava.net/zidoing/comments/commentRss/35856.htmlhttp://www.blogjava.net/zidoing/services/trackbacks/35856.html

zidoing 2006-03-17 19:45 发表评论
]]>