JQuery 实现表格操作

butterfly_onfly

于 2024-12-24 08:45:00 发布

阅读量734

点赞数 13

分类专栏： JavaScript 文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/butterfly_onfly/article/details/144624098

版权

引言

jQuery是一个快速、简洁的javascript库，使用户能够方便地遍历HTML Documents、操作DOM、处理事件、实现动画效果和提供Ajax交互，此外jQuery兼容CSS3.0及各种浏览器。jQuery的优势：

（1）利用CSS的优势；

（2）良好浏览器兼容性；

（3）优秀的DOM操作封装和事件处理；

（4）多重操作集于一行；

（5）完善的Ajax；

（6）支持扩展

jquery对象和dom对象的区别

jQuery对象是通过jQuery包装DOM对象后创建的对象。jQuery对象是jQuery独有的，其具有jQuery扩展的方法，如.css(), .attr(), .show(), .hide()等，而DOM对象是原生JavaScript对象，只有DOM提供的方法。

区别如下：

jQuery对象是通过$()包装DOM对象后创建的。

jQuery对象无法直接使用DOM对象的方法，反之亦然。

jQuery对象是一个数组对象，可以通过索引访问其中的DOM元素。

// 假设有一个DOM元素：<div id="myDiv"></div>
 
// 通过jQuery获取该元素的jQuery对象
var $div = $('#myDiv');
 
// 通过原生JavaScript获取该元素的DOM对象
var div = document.getElementById('myDiv');
 
// 以下是使用方式的区别
 
// 使用jQuery对象
$div.css('color', 'red'); // 正确
// $div.style.color = 'red'; // 错误，jQuery对象无法使用DOM对象的属性和方法
 
// 使用DOM对象
div.style.color = 'red'; // 正确
// div.css('color', 'red'); // 错误，DOM对象无法使用jQuery的方法

在编写jQuery代码时，要确保方法适用于jQuery对象，并且不要混用DOM对象的方法。如果需要使用DOM对象，可以通过$div[0]或$div.get(0)来获取。

效果图：

这里用的是

    <script src="js/jquery-1.11.0.min.js"></script>

html布局

<table width="500px" border="1px" id="tab">
       <thead>
          <tr>
              <td>id</td>
              <td>name</td>
              <td>age</td>
              <td>操作</td>
          </tr>
       </thead>
       <tbody>
       <tr>
           <td>1</td>
           <td>tom</td>
           <td>8</td>
           <td><a hre

最低0.47元/天解锁文章