jQuery实现的网格线绘制方法

网络编程 jQuery实现的网格线绘制方法 06-22

本文实例讲述了jQuery实现的网格线绘制方法。分享给大家供大家参考，具体如下：

效果图如下：

查看图片

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>测试页面</title>
 <script type ="text/javascript" src='jquery-1.7.2.js'></script>
 <style type = "text/css">
  body{
  background:#000000;
  }
  #fa{
  width:380px;
  height:380px;
  margin:100px auto;
  background:#4b4b4b;
  }
 </style>
 <script type = "text/javascript">
  $(function(){
   var table = document.createElement("table");
   var tbody = document.createElement("tbody");
   table.style.borderCollapse = "collapse";
   for(var i = 0;i<20;i++){
   var tr = document.createElement("tr");
   for(var j = 0;j<20;j++){
    var td = document.createElement("td");
    var text = document.createTextNode("");
    td.style.border = "1px solid #dfdfdf";
    td.style.padding = "9px";
    td.appendChild(text);
    tr.appendChild(td);
   }
   table.appendChild(tr);
   }
   document.getElementById("fa").appendChild(table);
  })
 </script>
 </head>
 <body>
 <input type = "button" value = "测试按钮" id = "test"/>
 <div id = "fa"></div>
 </body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery代码性能优化的10种方法
1、总是使用#id去寻找element.在jQuery中最快的选择器是ID选择器($('#someid')).这是因为它直接映射为JavaScript的getElementById()方法。选择单个元素divid="content"form

jQuery AJAX timeout 超时问题详解
先给大家分析下超时原因：1.网络不通畅。2.后台运行比较慢（服务器第一次运行时，容易出现）超时结果：JQ中timeout设置请求超时时间。如果服务器响

jQuery中的ready函数与window.onload谁先执行
A.关于$(document).ready()：jquery中的$(document).ready()，那$(document).ready()到底是什么作用呢？是不是可以用window.onload=function(){...}来实现呢？这里，我们要明确

编辑：一起学习网

标签：特效,选择器,这是,本文,代码