jquery 简单应用示例总结
2013-08-09 00:00
615 查看
1.指定在主页面某个div中中显示子页面内容 ,其中renderContainer 可以是主页面div的id或者name
2.选择指定表的指定属性的指定ID 进行某项动作
3.延迟加载触发事件,选择 id 中包含“userid”字段且被勾选 的checkbox,并把它们的id 放在idArray 数组里
3. 选择 id 中包含“userid”字段且被勾选 的checkbox 的另一种写法
4.简单实用的点击改变样式
5.“2012-12-21” 格式的时间比较大小,需要先转换
6.获取“2012-12-21” 格式的当前时间
最后是一个用jquery弄的类似双向列表,可以左右交换内容
先就这么多了,以上的代码还不完善,需要改进的地方希望大家不惜指教。
$.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 简单应用示例总结
- jQuery pjax 应用简单示例
- jquery.query.js 插件(示例及简单应用)
- jquery 简单应用总结
- jQuery pjax 应用简单示例
- jQuery在Rails3中的一个简单应用示例
- jquery.query.js 插件(示例及简单应用)
- STL源码剖析 [简单应用总结一]
- jQuery选择器总结 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
- vue-router单页应用简单示例(二)
- JQuery入门――用映射方式绑定不同事件应用示例
- 7款经典炫酷的HTML5/jQuery动画应用示例及源码
- jQuery.ajax的简单应用实例 附实例下载
- jquery getjson简单应用
- bootstrap实现的自适应页面简单应用示例
- 连接池的设置及简单应用示例
- 使用Log4j为项目配置日志输出应用详细总结及示例演示.
- jquery在form表单取值的简单应用
- jQuery 简单总结
- 事件代理总结: 已经有一些使用主流类库的事件代理示例出现了,比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子,比如说Usable Type blog上的这一个。一旦需要的话,事件代理将是你工具箱里的一件得心应手的工具,而且它很容易实现。