jquery 简单应用示例总结


Posted in Javascript onAugust 09, 2013

1.指定在主页面某个div中中显示子页面内容 ,其中renderContainer 可以是主页面div的id或者name

$.ajax({ 
url: url, 
data: parameters, 
type:"GET", 
dataType:"html", 
success:function (html) { 
$(renderContainer).attr("title", title); 
$(renderContainer).html(html); 
$(renderContainer).dialog({ 
autoOpen: true, 
width: 590, 
height: 720, 
modal: true, 
resizable: false, 
draggable: true 
}); 
} 
});

2.选择指定表的指定属性的指定ID 进行某项动作
$(".tbl_checked tr[userid='" + idArray[i] + "']").remove();

3.延迟加载触发事件,选择 id 中包含“userid”字段且被勾选 的checkbox,并把它们的id 放在idArray 数组里
$("#authorize_reset").live('click',function(){ 
var idArray = []; 
$(":checkbox[id^='userid']").each(function(){ 
if($(this).attr("checked") == "checked"){ 
idArray.push(parseInt($(this).val())); 
} 
}); 
}); 
});

3. 选择 id 中包含“userid”字段且被勾选 的checkbox 的另一种写法
$(":checkbox[id^='userid'][checked]").each(function(){ 
selectedRoleIdArray.push(parseInt($(this).val())); 
});

4.简单实用的点击改变样式
$(function(){ 
$(".tbl_checked tr").live('click', function(){ 
var target = $(this); 
if(target.attr("class") == "tr_checked") { 
target.removeClass("tr_checked"); 
} else { 
target.addClass("tr_checked"); 
} 
})

5.“2012-12-21” 格式的时间比较大小,需要先转换
var compareTime = Date.parse(setTime.replace(/-/g, "/"));

6.获取“2012-12-21” 格式的当前时间
(function ($) { 
var FormatDateTime = function FormatDateTime() { }; 
$.FormatDateTime = function (days) { 
//var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); 
var myDate = new Date(); 
myDate.setDate(myDate.getDate()+days); 
var year = myDate.getFullYear(); 
var month = ("0" + (myDate.getMonth() + 1)).slice(-2); 
var day = ("0" + myDate.getDate()).slice(-2); 
var s=year+"-"+month+"-"+day; 
return s ; 
} 
})(jQuery);

最后是一个用jquery弄的类似双向列表,可以左右交换内容
$(function(){ 
//点击 加载用户列表,角色用户列表 
$(".add_remove_user").live('click',function() { 
var rid = $(".current").attr("id").substring("ut_".length); 
changeroleDialog(changeroleRoute.url(), {id: rid}, ".set_user_list"); 
}); 
<!--选中高亮 begin--> 
$(".tbl_checked tr").live('click', function(){ 
var target = $(this); 
if(target.attr("class") == "tr_checked") { 
target.removeClass("tr_checked"); 
} else { 
target.addClass("tr_checked"); 
} 
}); 
$(".tb1_role_checked tr").live('click', function(){ 
var target = $(this); 
if(target.attr("class") == "tr_checked_1") { 
target.removeClass("tr_checked_1"); 
} else { 
target.addClass("tr_checked_1"); 
} 
}); 
<!--选中高亮 end--> 
<!--点击”添加/删除“按钮 左右移动列表内容 begin--> 
$("#addThisRole").live('click',function(){ 
if($(".tb1_role_checked tr").first().attr("default_value")=='noResult'){ 
var table = $(".tb1_role_checked"); 
$(".tb1_role_checked tr").remove(); 
var tr = $("<tr ></tr>") 
.append($("<th></th>").html('姓名')) 
.append($("<th></th>").html('账号')) 
table.append(tr); 
} 
$(".tr_checked").each(function(){ 
$(this).remove(); 
var element = $(this); 
var id = element.attr("param_id") 
var name = element.attr("param_name") 
var account = element.attr("param_account") 
var table = $(".tb1_role_checked"); 
var tr = $("<tr param_roleid='"+id+"' param_rolename='"+name+"' param_roleaccount='"+account+"' style='cursor: pointer'></tr>") 
.append($("<td></td>").html(element.attr("param_name"))) 
.append($("<td></td>").html(element.attr("param_account"))) 
//table.append(tr); 
tr.insertAfter($(".tb1_role_checked tr").first()); 
}); }); 
$("#deleteThisRole").live('click',function(){ 
if($(".tbl_checked tr").first().attr("default_value")=='noResult'){ 
var table = $(".tbl_checked"); 
$(".tbl_checked tr").remove(); 
var tr = $("<tr ></tr>") 
.append($("<th></th>").html('姓名')) 
.append($("<th></th>").html('账号')) 
table.append(tr); 
} 
$(".tr_checked_1").each(function(){ 
$(this).remove(); 
var element = $(this); 
var id = element.attr("param_roleid"); 
var name = element.attr("param_rolename"); 
var account = element.attr("param_roleaccount"); 
var table = $(".tbl_checked"); 
var tr = $("<tr param_id='"+id+"' param_name='"+name+"' param_account='"+account+"' style='cursor: pointer'></tr>") 
.append($("<td></td>").html(element.attr("param_rolename"))) 
.append($("<td></td>").html(element.attr("param_roleaccount"))) 
//table.insertBefore(tr, $(".tbl_checked tr").first()); 
tr.insertAfter($(".tbl_checked tr").first()); 
}); 
}); 
});

jquery 简单应用示例总结 
先就这么多了,以上的代码还不完善,需要改进的地方希望大家不惜指教。
Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
JS命名空间的另一种实现
Aug 09 #Javascript
使用javascript创建快捷方式的简单实例
Aug 09 #Javascript
使用js修改客户端注册表的方法
Aug 09 #Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 #Javascript
jQuery :first选择器使用介绍
Aug 09 #Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 #Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
php适配器模式简单应用示例
2019/10/23 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
在Django框架中编写Contact表单的教程
2015/07/17 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
eclipse创建python项目步骤详解
2019/05/10 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年创先争优工作总结
2014/12/11 职场文书