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 相关文章推荐
jquery $.getJSON()跨域请求
Dec 21 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
深入理解js中的加载事件
Feb 08 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
实例讲解JavaScript 计时事件
Jul 04 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使用smtp发送支持附件的邮件示例
2014/04/13 PHP
降低PHP Redis内存占用
2017/03/23 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python属性和内建属性实例解析
2020/01/14 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
公证委托书标准格式
2014/09/11 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
关于的python五子棋的算法
2022/05/02 Python