jQuery-表格以及表单
表单应用:
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-表格以及表单的更多相关文章
- 13、Semantic-UI之表格与表单
13.1 定义基础样式表格 在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- css011 表格和表单的格式化
css011 表格和表单的格式化 一. 让表格专司其职 Html中创建一个三行三列的表格 <table> <caption align="bottom" ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jquery php ajax 表单验证
本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送. .创建一个表单 html 页面 表单部分 html 代码 以下为引用内容: &l ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- jquery回车提交表单
jquery回车提交表单,比较方便的功能. 三个事件keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 ,所以用keyup. $(document).keyup(funct ...
随机推荐
- 【转】CV_EXPORT定义的作用,lib及dll的区别
http://blog.csdn.net/viewcode/article/details/8021989 在core.hpp中,CV_EXPORT是出现频率最高的词之一. 1. CV_EXPORT是 ...
- 【mysql】利用Navicat for MySQL的使用
1. 查看sql语句 如果忘记了某个SQL语句怎么写,可以利用Navicat for MySQL的历史日志来查看 在Navicat for MySQL中,直接对数据库进行想要的操作,然后点击工具-&g ...
- 由浅入深剖析.htaccess
转自:http://blog.csdn.net/21aspnet/article/details/6908025 [-] htaccess文件使用前提 htaccess基本语法介绍 现学现用学习正则表 ...
- YAML-初识
YAML简介 YAML-what? YAML Ain't Markup Language 和GNU一样,YAML是一个递归着说"不"的名字.不同的是,GNU对UNIX说不,YAML ...
- XMPP框架下微信项目总结(8)图片发送
前言:“图片”发送和“聊天文本”都是通过模块发起的成为:“消息模块”(反正传递的都是字符串) 发送原理: 1 current客户端获取本地图片 2 xmpp发送“字符串”(为什么是字符串?1: ...
- poj1703(各种姿势)
题目链接:http://poj.org/problem?id=1703 题意:有n个人分别属于两个团伙,接下来m组形如 ch, x, y的数据,ch为"D"表示 x, y属于不同的 ...
- python 中time模块使用
在开始之前,首先要说明这几点: 1.在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时间字符串 3)元组(struct_time)共九个元素.由于Python的time模块实现主 ...
- EasyUi – 4.datagrid
测试的时候用Json来测试就好啦. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- Delphi面向对象的可见性表示符
Delphi能通过在声明域和方法的时候用protected.private.public.published和automated指示符来对对象提供进一步的控制.使用这些关键字的语法如下 TSomeOb ...
- Oracle锁定和解锁用户的命令
转:http://database.51cto.com/art/200910/158576.htm 在DBA的日常工作中,经常遇到为Oracle用户解锁的操作:这篇文章给出在命令行下进行Oracle用 ...