表单应用:

1、设置高度:

$comment.height($comment.height() + 50);

$comment.animate({height : "+=50"},400);

2、滚动条高度变化,是利用scrollTop属性;eg:文本域的滚动条

3、复选框的全选以及全不选以及反选

全选:

$("#ChenckAll").click(function(){

$('[name=items] :checkbox').attr("checked",true);

})

反选:

//each循环

$("#ChenckAll").click(function(){

$('[name=items] :checkbox').each(function(){

this.checked = ! this.checked;

})

})

4、删除以及追加这两个按钮可以在appendTo()中直接完成

就是说当我将一侧中的元素选取出来添加到另一侧的时候,会导致一侧中的元素消失,会出现在另一侧中

5、$("#select1").dbclick(function(){

//当双击鼠标的时候,会获取被点击的选中的项

var $options = $("option:selected",this);

$options.appendTo("select2");

})

表格应用:

1、当对象发生改变的时候,我们又需要使用原来的对象,可以使用end()函数

$('tbody > tr').click(function(){

$(this).addClass('selected')

.sibiling().removeClass('selected')

//对象发生了改变

.end()

//返回到this对象

.find(':radio').attr('checked',true);

})

2、使用hasClass()判断是否含有某class类

3、var hasSelected = $(this).hasClass('selected');

//3元表达式

$(this)[hasSelected ? "removeClass" : "addClass"]("selected");

4、

//当点击分类行的时候,分类的内容会显示或隐藏

$(function(){

$('tr .parent').click(function(){

$(this).toggleClass("selected")

.sibiling('.child_' + this.id).toggle();

})

})

//当用户刚进入页面的时候,默认是收缩起来的

$('tr .parent').click(function(){

$(this).toggleClass("selected")

.sibiling('.child_' + this.id).toggle();

}).click();

5、$(function(){

$("#filterName").keyup(function(){

$("table tbody tr").hide()

.filter(":contains('"+( $(this).val() )+"')").show();

}).keyup();  //DOM加载完后,绑定事件完成之后会立即触发

})

当输入一个字符的时候,筛选出来的选项在刷新后,字符存在,项不存在,以上代码,会使其保存一致

6、对当前皮肤换肤:

function switchSkin(skinName){

$("#"+skinName).addClass("selected")

.sibiling().removeClass("selected");

$("#cssfile").attr("href","css/"+skinName+".css");

$.cookie("MyCssSkin" , skinName , { path: '/' , expires : 10});

}

$(function(){

var $li = $("#skin li");

$li.click(function(){

switchSkin(this.id);

});

var cookie_skin = $.cookie("MyCssSkin");

if(cookie_skin){

switchSkin(cookie_skin);

}

})

网页换肤功能不仅能正常切换,而且也能保存到Cookie中,用户刷新后,仍然是当前选择的皮肤

jQuery-表格以及表单的更多相关文章

  1. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  2. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  3. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  4. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

  5. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  6. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  7. jquery php ajax 表单验证

    本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送.   .创建一个表单 html 页面   表单部分 html 代码   以下为引用内容: &l ...

  8. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  9. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  10. jquery回车提交表单

    jquery回车提交表单,比较方便的功能. 三个事件keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 ,所以用keyup. $(document).keyup(funct ...

随机推荐

  1. 【转】CV_EXPORT定义的作用,lib及dll的区别

    http://blog.csdn.net/viewcode/article/details/8021989 在core.hpp中,CV_EXPORT是出现频率最高的词之一. 1. CV_EXPORT是 ...

  2. 【mysql】利用Navicat for MySQL的使用

    1. 查看sql语句 如果忘记了某个SQL语句怎么写,可以利用Navicat for MySQL的历史日志来查看 在Navicat for MySQL中,直接对数据库进行想要的操作,然后点击工具-&g ...

  3. 由浅入深剖析.htaccess

    转自:http://blog.csdn.net/21aspnet/article/details/6908025 [-] htaccess文件使用前提 htaccess基本语法介绍 现学现用学习正则表 ...

  4. YAML-初识

    YAML简介 YAML-what? YAML Ain't Markup Language 和GNU一样,YAML是一个递归着说"不"的名字.不同的是,GNU对UNIX说不,YAML ...

  5. XMPP框架下微信项目总结(8)图片发送

    前言:“图片”发送和“聊天文本”都是通过模块发起的成为:“消息模块”(反正传递的都是字符串) 发送原理:     1 current客户端获取本地图片 2 xmpp发送“字符串”(为什么是字符串?1: ...

  6. poj1703(各种姿势)

    题目链接:http://poj.org/problem?id=1703 题意:有n个人分别属于两个团伙,接下来m组形如 ch, x, y的数据,ch为"D"表示 x, y属于不同的 ...

  7. python 中time模块使用

    在开始之前,首先要说明这几点: 1.在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时间字符串 3)元组(struct_time)共九个元素.由于Python的time模块实现主 ...

  8. EasyUi – 4.datagrid

    测试的时候用Json来测试就好啦. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  9. Delphi面向对象的可见性表示符

    Delphi能通过在声明域和方法的时候用protected.private.public.published和automated指示符来对对象提供进一步的控制.使用这些关键字的语法如下 TSomeOb ...

  10. Oracle锁定和解锁用户的命令

    转:http://database.51cto.com/art/200910/158576.htm 在DBA的日常工作中,经常遇到为Oracle用户解锁的操作:这篇文章给出在命令行下进行Oracle用 ...