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技术-屏蔽类
Aug 15 Javascript
jQuery 表格工具集
Apr 25 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
js的2种继承方式详解
Mar 04 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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
天津市收音机工业发展史
2021/03/04 无线电
在PHP中执行系统外部命令
2006/10/09 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue router demo详解
2017/10/13 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
教师一岗双责责任书
2014/04/16 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
综治宣传月活动总结
2014/04/28 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
安全保证书格式
2015/02/28 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
vue实现移动端div拖动效果
2022/03/03 Vue.js
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS