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 ...
随机推荐
- HDU 5833 Zhu and 772002 (数论+高斯消元)
题目链接 题意:给定n个数,这n个数的素因子值不超过2000,从中取任意个数使其乘积为完全平方数,问有多少种取法. 题解:开始用素筛枚举写了半天TLE了,后来队友说高斯消元才想起来,果断用模板.赛后又 ...
- UIScrollView控件实现图片缩放功能
转发自:http://www.cnblogs.com/wendingding/p/3754268.html 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScr ...
- Java IO流总结
Java IO流分类以及主要使用方式如下: IO流 |--字节流 |--字节输入流 InputStream: int read();//一次读取一个字节 int read(byte[] bys);// ...
- 解决【无法启动此程序,因为计算机中丢失MSVCP71.dll。尝试重新安装该程序以解决此问题】问题
今日电脑偶然出现:[无法启动此程序,因为计算机中丢失MSVCP71.dll.尝试重新安装该程序以解决此问题.]的不断地弹窗报错. 在网上查找了好久,也没有找到解决办法,就在我将要准备重装系统的时候,又 ...
- jquery获得select option的值 和对select option的操作
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- python基础——使用模块
python基础——使用模块 Python本身就内置了很多非常有用的模块,只要安装完毕,这些模块就可以立刻使用. 我们以内建的sys模块为例,编写一个hello的模块: #!/usr/bin/env ...
- 环境搭建及wamp空密码修改
WAMP:快速搭建PHP环境的.Windows系统下.搭建虚拟的服务器环境.APPSERVER:同上. LAMP架构Linux系统Apache服务器管理软件Mysql数据库Php语言. 修改密码方法: ...
- ios 弹出键盘 视图向上平移
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyboardwillAppear:) name:U ...
- Git 、 Cocoapods常用命令
Git常用命令 1.添加文件 git add xxx 2.提交更新到本地 git commit -m 'local-repo' 3.提交更新 git push master ...
- iOS真机调试
备注:本阶段之前的修改配置文件.准备脚本等,只需要做一次.但本阶段的操作,对每个需要真机调试的工程都要做一遍. ① 禁用Xcode自动的签名操作 将工程配置“Build Settings”中所有的Co ...