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和CSS通过expression实现Table居中显示
Jun 28 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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类的特性实例分析
2016/09/28 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
React Native 截屏组件的示例代码
2017/12/06 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python中tell()方法的使用详解
2015/05/24 Python
python之Socket网络编程详解
2016/09/29 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
怎样声明子类
2013/07/02 面试题
英语系本科生求职信范文
2013/12/18 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Nginx配置使用详解
2022/07/07 Servers