这章本来准备写成jQuery的表单操作和表格操作的。

然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来。

那么今天就来看看表格吧。

因为平常做的都是公司的内部管理系统,所以说数据表格用到的还是比较多的。那么在这里写出来说不定还能用上。

关于jQuery的表格应用

  • 隔行变色

    $(function(){
    $("tbody>tr:odd").addClass("样式1");//odd是选取奇数行
    $("tbody>tr:even").addClass("样式2");//even是选取偶数行
    })
  • 单选框控制表格行高亮
    $('tbody>tr').click(function(){
    $(this).addClass('选中样式').siblings().removeClass('选中样式').end().find(':radio').attr('checked',true);
    //请注意这里的end(),当用了siblings()后,后面所有的元素实际上操作的是this的统计元素,而用了end()后就回到了之前的$(this)元素
    });
    //注意到我们最开始初始化表格的时候,如果默认有单选框被选中,那么也需要进行处理。
    $(table :radio:checked).parent().parent().addClass('selected');
    //或者
    $(table :radio:checked).parents("tr").addClass('selected');
    //或者
    $(table>tr:has(:checked)).addClass('selected');
  • 复选框控制表格行高亮
    //最简单的那种就不写了,看看下面这种
    $('tbody>tr').click(function(){
    //判断当前是否选中
    var hasSelected=$(this).hasClass('selected');
    $(this)[hasSelected?"removeClass":"addClass"]('selected')
    .find(':checkbox').attr("checked",!hasSelected);
    });
    //本示例突出[hasSelected?"removeClass":"addClass"]这种玩法
    //这实际上就是javascript的用法,因为一个对象里面的东西既可以用.这样的形式取出来,又可以用类似数组的形式取出来
  • 表格展开关闭
    //这种情况就是解决表格里面行数据有层级结构的
    $(function(){
    $('tr .parent').click(function(){
    $(this).toggleClass("selected")
    .siblings('.child_'+this.id).toggle();
    })
    })
  • 表格内容筛选
    //下面是表格的筛选操作
    $(function(){
    $("#filterName").keyup(function(){
    $("table tbody tr").hide()
    .filter(":contains('"+($(this).val())+"')").show();
    });
    });
    //这种一般都是用不上,因为我们要的表格一般都是翻页的,然后去后台查筛选,然后传数据给前台。

好吧,这本书本章的其他节都是在炒剩饭,唯一新用到的函数是

var $div_li=$("li");
$div_li.click(function(){
var index=$div_li.index(this);//这种用法很有趣,其次就是index这个函数,是用于在选择出来的元素中,然后根据元素来获取元素的索引
})

还有就是js可以操作整个样式表的替换(这个我以前真的没玩过)

<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
$(function(){
$("#cssfile").attr("href","css/skin_1.css");
})

还介绍了jQuery的一款操作cookie的小插件,可以帮忙简化cookie操作

<script src="js/jquery.cookie.js" type="text/javascript"></script>

$.cookie("MyCookieName","232",{path:'/',expires:10,domain:'myDomain.com',secure:true});//存cookie
//这里232为cookie的值,
//expires:cookie的期限,比如10就是存10天,如果不设置或者设置为null那么就当作session cookie处理,在浏览器关闭后就删除。-1就是删除cookie。
//path:'/'必须这么写,否则cookie的路径就会根据目录路径的不同自动设置,如http://www.xxx.com/user/,path会被设置为 '/user'
//domain:cookie的域名属性,默认为创建该Cookie的页面域名
//secure:如果设为true,那么此cookie的传输会要求一个安全协议,例如:HTTPS
var cookie_skin=$.cookie("MyCookieName");//取cookie
$.cookie(’MyCookieName’, null); //删除cookie,必须使用之前一样的path和domain才能正确删除cookie

【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用的更多相关文章

  1. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  2. jQuery基础学习(一)—jQuery初识

    一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...

  3. jQuery基础学习3——jQuery库冲突

    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...

  4. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  5. jQuery基础学习4——jQuery容错性

    使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...

  6. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  7. jQuery 基础学习笔记总结(一)

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  8. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  9. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

随机推荐

  1. 关于 Redis 访问安全性的问题

    升级版本 3.0.2 版本升级到 redis-3.2.0 版本远程无法访问,比较配置文件有些变化,比如默认只能本地的机器才能访问 3.0.2 版本 # By default Redis listens ...

  2. Selenium关键字驱动测试框架Demo(Java版)

    Selenium关键字驱动测试框架Demo(Java版)http://www.docin.com/p-803493675.html

  3. EPLAN P8导线颜色的设置

    P8里的导线应称为"连接",连接的颜色代表了其电位的传递路径,如可以给三相电源设置成黑色,PE设为绿色,N设为蓝色等等.  P8中电位在连接和元器件中传递的方法是由元器件的连接点属 ...

  4. SSAS:菜鸟笔记(二)定义计算(DMX脚本)

    基本概念 Calculation可以定义计算成员.名称集以及执行其他脚本命令来扩展分析服务立方(Analysis Service Cube)的功能. Calculation包含MDX以及脚本两个部分: ...

  5. 『WPF』实现拖动文件到窗体(控件)

    前言 实现从窗口外部拖文件到窗口内部并自动捕获文件地址. 第一步 开启属性 启用底层Window的AllowDrop属性,添加Drop事件. Drop事件:当你拖动文件到对应控件后,松开触发. 除Dr ...

  6. SQLServer 获得所有表结构(包括表名及字段)

    then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, ( then '√'else '' end) 标识, (case when (SE ...

  7. 云极知客开放平台接口调用方法(C#)

    云极知客为企业提供基于SAAS的智能问答服务.支持企业个性化知识库的快速导入,借助语义模型的理解和分析,使企业客户立即就拥有本行业的24小时客服小专家.其SAAS模式实现零成本投入下的实时客服数据的可 ...

  8. 一种读取Exchange的用户未读邮件数方法!

    已好几个月没写博客了,由于之前忙于开发基于Sharepoint上的移动OA(AgilePoint)和采用混合移动开发技术开发一个安卓版的企业通讯录APP(数据与lync一致),并于1月初正式上线.马年 ...

  9. jQuery浏览器差异

    //firefox Interface.send(data,function(msg){ $(msg).find("CARINFO").each(function(i){ var ...

  10. [C++] memset 和sizeof 的使用注意

    因为使用C++写小题目时经常需要清除数组,这里记录下Memset函数的sizeof运算符的使用注意. memset的特点是:将给定地址后连续的内存(包括给定地址),逐个byte初始化为参数中指明的值. ...