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中,用户刷新后,仍然是当前选择的皮肤

时间: 2024-10-22 20:48:36

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

Python之路【第十三篇续】jQuery案例-Form表单&插件及扩展

jQuery案例-Form表单 学完这个form表单的案例,如果有人说这个表单(功能)还不够NB(此文不包含样式,样式是CSS比较简单可以根据需求自己添加),那么找武Sir他帮你搞定. 一步一步来 注意事项(目录结构): 在写前端html代码的时候要注意(任何代码都一样),一定要规划好目录结构方便其他的人来看你的代码! 如果还有其他的html页面可以在加一个html存储的文件夹. 1.首先看下HTML主体 <!DOCTYPE html> <html lang="en"

HTML之表格和表单

1. 表格和表单的区别:表格多用于页面布局,创建页面的排版样式.表单多用于传输数据获取信息,如:input输入框,单选.多选.下拉选择框. 2. 表格:table. a. 基本样式如下: <table> <caption> table test </caption> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <table/&g

如何利用jQuery进行简单表单验证

如何利用jQuery进行简单表单验证:利用jQuery可以进行表单验证,当然有比较复杂的表单验证,这里就不介绍了,下面就简单介绍一下如何使用jQuery进行简单的表单验证,然后大家可以通过改造进行基本的表达验证了.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

jQuery控制form表单元素聚焦

CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ function makeFirstTextFormElementFocused (formId) { $('#' + formId + ' :text').eq(0).focus(); } 测试: window.onload = function() { makeFirstTextFormElementFoc

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

css011 表格和表单的格式化

css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom"> table 1:cosmofarmer.com's indoor mower roundup </caption> <colgroup> <col id="brand"></col> <col id="price&

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

Jquery异步提交表单到Action

转载请注明出处:jiq?钦's technical Blog 一 需求 出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.jsp,以返回的JSON数据为参数. 效果如下: 现在的需求是:我要在编

第一百八十五节,jQuery,Ajax 表单插件

jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 Ajax 提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素 到决定如何管理提交进行的功能.