CFXIXI工作室首页
CF西西的博客 | JQuery

更加好的使用javascript原生方法改变radio控件的选中值

30. 八月 2013
var _this=e.currentTarget; 复制代码 $(" li input.radio").removeAttr("checked"); _this.find("input.radio").attr("checked", "checked");* 复制代码 可以更好的替换为: _this.find("input.radio")[0].checked = true; 复制代码

javascript, JQuery

JQuery如何对一个dom设置多个attr

30. 八月 2013
firstRadio.attr({ fundcode: fundCode, fundname:fundName, first:"first" });

JQuery

jquery如何选中Radio控件

27. 八月 2013
    function(e,callback){ var _this=$(e.target); $("#fastWithdrawalPageScroller .relateAccount li input.radio").removeAttr("checked"); _this.find("input.radio").attr("checked", "checked"); return false; }

JQuery

Jquery如何获取select控件的change事件中的参数

21. 八月 2013
$("#ddd").on("change",function(){ var el=$(this); var seledItem=el.children('option:selected'); var confirmFundCode=seledItem.attr("value"); var confirmFundName=seledItem.attr("bbb"); return false; })

JQuery

JQuery如何将input disable(可以防止tab聚焦)

26. 七月 2013
参考:http://stackoverflow.com/questions/1414365/how-to-disable-an-input-with-jquery jQuery 1.6+ To change the disabled property you should use the .prop() function. $("input").prop('disabled',true); $("input").prop('disabled',false); jQuery 1.5 and below The .prop() function doesn't exist, but .attr() does similar: Set the disabled attribute. $("input").attr('disabled','disabled'); To enable again $("input").removeAttr('disabled'); In any version of jQuery You can always rely on the actual DOM object and is probably a little faster than the other two options if you are only dealing with one element: // assuming an event handler thus 'this'this.disabled =true; The advantage to using the .prop() or .attr() methods is that you can set the property for a bunch of selected items.

JQuery

jquery 添加新元素

9. 七月 2013
转自:http://www.cnblogs.com/jenney-qiu/archive/2012/03/09/2387197.html (一)after()和before()方法的区别        after()——其方法是将方法里面的参数添加到jquery对象后面去;        如:A.after(B)的意思是将B放到A后面去;        before()——其方法是将方法里面的参数添加到jquery对象前面去。        如:A.before(B)的意思是将A放到B前面去;   (二)insertAfter()和insertBefore()的方法的区别        其实是将元素对调位置;        可以是页面上已有元素;也可以是动态添加进来的元素。        如:A.insertAfter(B);即将A元素调换到B元素后面;        如<span>CC</span><p>HELLO</p>使用$("span").insertAfter($("p"))后,就变为<p>HELLO</p><span>CC</span>了。两者位置调换了      (三)append()和appendTo()方法的区别              append()——其方法是将方法里面的参数添加到jquery对象中来;              如:A.append(B)的意思是将B放到A中来,后面追加,A的子元素的最后一个位置;              appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。              如:A.appendTo(B)的意思是将A放到B中去,后面追加,B的子元素的最后一个位置;   (四)prepend()和prependTo()方法的区别              append()——其方法是将方法里面的参数添加到jquery对象中来;              如:A.append(B)的意思是将B放到A中来,插入到A的子元素的第一个位置;              appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。              如:A.appendTo(B)的意思是将A放到B中去,插入到B的子元素的第一个位置;         (一)(二)方法与(三)(四)方法的区别就在于:后者是外部插入,即在元素外面添加,作为元素的兄弟节点;        前者是在内部插入,即在元素内部进行添加,作为元素的子节点。       第(一)(二)方法很相似。

JQuery

jquery eq not

10. 六月 2013
转自:http://hi.baidu.com/xinliang211/item/5d1e6c3baace3c5880f1a7da For example, let's say you have 5 items in group, #1, #2, #3, #4, #5..not(':eq(0)').not(':eq(1)').not(':last');1. .not(':eq(0)') means "remove first item", so now we only have 4 items in group: #2, #3, #4, #52. .not(':eq(1)') means "remove second item" from PREVIOUS GROUP, so now the group looks like this: #2, #4, #53. .not(':last') means "remove last item prom previous group, so now we only have #2, #4.not(':eq(0)').not(':eq(1)').not(':last');means #1(remove), #2, #3(remove), #4, #5(remove)$('#state-or-province option').not(':eq(0)').remove();

JQuery

JQuery 选择所有元素

3. 六月 2013
用$("body *")选到dom

JQuery

关于Jquery拓展方法

17. 五月 2013
一般如果想要对jquery选中后的对象进行方法的调用可以这么写: $.fn.aaa = function () { alert(123); } 调用的时候可以这么用 $("#bbb").aaa();   如果希望用jquery点出方法调用,可以这么做   $.extend($, {         bbb: function () {               alert(234);         }     }); 调用时: $.bbb();  

JQuery

Jquery判断是否是safari游览器

2. 五月 2013
参考:http://stackoverflow.com/questions/3303858/distinguish-chrome-from-safari-using-jquery-browser With jQuery $.browser.chrome = $.browser.webkit &&!!window.chrome; $.browser.safari = $.browser.webkit &&!window.chrome; Without jQuery isChrome =function(){return/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor);} isSafari =function(){return/Safari/.test(navigator.userAgent)&&/Apple Computer/.test(navigator.vendor);} Showing two ways to differentiate, one via window.chrome and one via navigator.vendor. 上面的方案依然有很大的缺陷,比方说放在国内,360和遨游3都使用webkit的内核,如果使用$.browser.webkit &&!window.chrome;的判断safari游览器的话,遨游3也会被认为是safari游览器,造成很大的麻烦。 因此比较好的方案是: http://stackoverflow.com/questions/5899783/detect-safari-using-jquery var is_chrome = navigator.userAgent.indexOf('Chrome')>-1;var is_explorer = navigator.userAgent.indexOf('MSIE')>-1;var is_firefox = navigator.userAgent.indexOf('Firefox')>-1;var is_safari = navigator.userAgent.indexOf("Safari")>-1;var is_Opera = navigator.userAgent.indexOf("Presto")>-1;if((is_chrome)&&(is_safari)){is_safari=false;} if (is_safari) alert('Safari'); 这样可以保证safari游览器被完美识别

JQuery

跨域请求之jQuery的ajax jsonp的使用——指定jquery jsonp请求,返回变量函数名称及传参的变量

24. 四月 2013
转自:http://www.cnblogs.com/know/archive/2011/10/09/2204005.html 指定jquery jsonp请求,返回变量函数名称及传参的变量名称 $.ajax({             type : "get",             async:false,             url : "ajax.ashx",             dataType : "jsonp",             jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)             jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名             success : function(json){                 alert(json);                 alert(json[0].name);             },             error:function(){                 alert('fail');             }         });         var a="firstName Brett";         alert(a);     }); 前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解;出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解。于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下!   首先,贴出可以成功执行的代码:       (页面部分) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml" >3 <head>4     <title>Untitled Page</title>5      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>6      <script type="text/javascript">7     jQuery(document).ready(function(){8         $.ajax({9             type : "get",10             async:false,11             url : "ajax.ashx",12             dataType : "jsonp",13             jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)14             jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名15             success : function(json){16                 alert(json);17                 alert(json[0].name);18             },19             error:function(){20                 alert('fail');21             }22         });23         var a="firstName Brett";24         alert(a);25     });26     </script>27     </head>28  <body>29  </body>30 </html> (处理程序部分) 1 <%@ WebHandler Language="C#" Class="ajax" %>2 3 using System;4 using System.Web;5 6 public class ajax : IHttpHandler {7     8     public void ProcessRequest (HttpContext context) {9         context.Response.ContentType = "text/plain";10         string callbackFunName = context.Request["callbackparam"];11         context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )");12     }13  14     public bool IsReusable {15         get {16             return false;17         }18     }19 20 }   (请求抓包截图) ajax请求参数说明: dataType  String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载) "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 "text": 返回纯文本字符串 jsonp   String 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 jsonpCallback   String 为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。    ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为: success_jsonpCallback([ { name:"John"} ] ); ————其实就是,调用jsonp回调函数success_jsonpCallback,并将要响应的字符串或json传入此方法(作为参数值),其底层的实现,大概的猜想应该是: function success_jsonpCallback(data)        {            success(data);        } 经测试,ajax jsonp对同步或异步请求没有影响。 好了,如有解释不对或不完整的地方,希望大家见谅,欢迎留言、扔板砖!

JQuery

JQuery slideToggle() 方法如何判断状态是隐藏还是现实

11. 四月 2013
参考:http://stackoverflow.com/questions/1133192/jquery-slidetoggle-current-show-hide-state-property 举个栗子: if($("#panel").is(":hidden")){// do stuff}

JQuery

【Jquery】offset()方法是干什么的

28. 三月 2013
参考:http://api.jquery.com/offset/ 举例: <script>var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );</script> 简单来说就是获得元素的document坐标(获得p:last这个dom的坐标位置)

JQuery

关于input(text)输入框的jquery赋值

12. 三月 2013
一般以为$("#id").html('aaa')可以解决问题,但是事实上对于input(text)输入框需要使用attr赋值 例如: $("#id").attr("value",'aaa')这样才能解决问题。

JQuery

Jquey如何选取父级、兄弟级的dom

7. 三月 2013
参考:http://blog.csdn.net/duanshuyong/article/details/7562423 举例: 在id位aaa的dom上找寻class为bbb的dom $("#aaa").parent(".bbb")   其他寻找兄弟级的api: jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点,不分前后   寻找子级节点: var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点

JQuery

JQuery Ajax调用asp.net后台方法

22. 二月 2013
转自:http://blog.csdn.net/iouxyz/article/details/5691050 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。 先来个简单的实例热热身吧。 1、无参数的方法调用 asp.net code: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; }   注意:1.方法一定要静态方法,而且要有[WebMethod]的声明 JQuery code: $(function() { $("#btnOK").click(function() { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "data.aspx/SayHello", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); });   结果:       2、带参数的方法调用   asp.net code:     using System.Web.Script.Services; [WebMethod] public static string GetStr(string str, string str2) { return str + str2; }       JQuery code:   /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetStr", //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 data: "{'str':'我是','str2':'XXX'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); });   运行结果:   下面进入高级应用罗 3、返回数组方法的调用  asp.net code: using System.Web.Script.Services; [WebMethod] public static List<string> GetArray() { List<string> li = new List<string>(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; }   JQuery code: /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetArray", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //插入前先清空ul $("#list").html(""); //递归获取数据 $(data.d).each(function() { //插入结果到li里面 $("#list").append("<li>" + this + "</li>"); }); alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); });   运行结果:     4、返回Hashtable方法的调用 asp.net code: using System.Web.Script.Services; using System.Collections; [WebMethod] public static Hashtable GetHash(string key,string value) { Hashtable hs = new Hashtable(); hs.Add("www", "yahooooooo"); hs.Add(key, value); return hs; }   JQuery code: /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetHash", //记得加双引号 T_T data: "{ 'key': 'haha', 'value': '哈哈!' }", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { alert("key: haha ==> "+data.d["haha"]+"/n key: www ==> "+data.d["www"]); }, error: function(err) { alert(err + "err"); } }); //禁用按钮的提交 return false; }); });   运行结果:    5、操作xml XMLtest.xml: <?xml version="1.0" encoding="utf-8" ?> <data> <item> <id>1</id> <name>qwe</name> </item> <item> <id>2</id> <name>asd</name> </item> </data>   JQuery code: $(function() { $("#btnOK").click(function() { $.ajax({ url: "XMLtest.xml", dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了 success: function(xml) { //清空list $("#list").html(""); //查找xml元素 $(xml).find("data>item").each(function() { $("#list").append("<li>id:" + $(this).find("id").text() +"</li>"); $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>"); }) }, error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 alert(status); } }); //禁用按钮的提交 return false; }); });   运行结果:

ASP.Net, JQuery

ArtDialog配置弹出框

20. 二月 2013
配置弹出框的按钮的文字 $.dialog(init._.extend({ content: "<iframe src='http://www.baidu.com' height='100%' width='100%'></iframe>", title: HfBustip.attr('alt'), button: [ { name: '确认', callback: function () { return this.close(); } }, { name: '现在就去绑定', callback: function () { alert("asddsdsad"); return false; //return window.location = "/MyAssets/bindphone"; } } ] }, init.ld_dialog_config)); 撒的都是

JQuery

artDialog弹出层插件详细教程

20. 二月 2013
转自:http://www.phpddt.com/dhtml/280.html 大家经常在网上看到弹出层,不仅效果很炫而且用户体验度很好!artDialog就是实现弹出框功能的一款国产的优秀插件,基于js编写的。 先来看下面几个弹出层效果: 怎么样,效果不错吧! artDialog下载地址为:http://code.google.com/p/artdialog/downloads/list,已经到5.0版本了。 artDialog开发者博客:www.planeart.cn(本人看了,很干净的一个博客,不愧是搞前端的人!) artDialog界面友好,并且兼容各个浏览器,自身功能非常强大。可以不需要jquery库就能应用。 下载的文件里面包含使用教程,那就来看看是怎么应用这款插件的吧! js教程如下: (1).首先当然是引入样式和脚本文件了,   <link href="./artDialog/skins/chrome.css" rel="stylesheet" />   <script src="./artDialog/artDialog.min.js"></script> (2).进行调用。 (I)使用参数调用 art.dialog(content, [ok], [cancel]) js代码:   art.dialog('这是php点点通的教程',function(){alert('你点击确定了')},function(){alert('你点击取消了');});   以上js实例运行结果: (II)字面量进行传值。 art.dialog(Object) js代码:   <html> <head> <title> jquery </title> <metacharset="utf-8"> <linkhref="./artDialog/skins/chrome.css"rel="stylesheet"/> <scriptsrc="./artDialog/artDialog.min.js"></script> <script> function test(){ art.dialog({ width:300, height:100, id:'shake-demo', title:'用户注册', content:'帐号:<input type="text" value="" /><br />' +'密码:<input id="login-pw" type="text" value="" />', lock:true, fixed:true, ok:function(){ var pw = document.getElementById('login-pw'); pw.select(); pw.focus(); returnfalse; }, okValue:'提交', cancelValue:'取消', cancel:function(){ alert('取消注册'); } }); } </script> </head> <body> <inputtype="button"value="注册"onclick="test()"> </div> </body> </html>   以上js实例运行结果: artDialog参数说明: 内容设置: title是弹出层的标题, content是弹出层的内容 按钮设置: ok,cancel 回调函数 this 指向 art.dialog 对象,执行完毕默认关闭对话框 okValue确定按钮文本 cancelValue取消按钮文本 button(自定义按钮) {按钮参数:value按钮显示文本 callback(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象,执行完毕默认关闭对话框,若返回 false 则阻止关闭 focus(默认值: true) 是否聚焦 width(可选) 设置按钮 CSS width 值 disabled(默认值: false) 是否禁用 id(默认值: 与 value 一致) 唯一标识} 尺寸设置: width:对话框的宽度 height:对话框的高度 位置设置: fixed:固定定位,不受滚动条的影响 follow:让对话框在指定元素附近 视觉设置: lock:是否锁屏遮罩 padding:置消息内容与消息容器的填充边距 其他高级设置: id设定对话框唯一标识。 initialize对话框初始化完成后执行的函数 beforeunload对话框关闭前执行的函数 visible(默认值: true) 是否显示对话框 time设置对话框显示时间,超过时间自动关闭 (单位:毫秒) esc(默认值: false) 是否允许用户按 Esc 键关闭对话框 focus(默认值: true) 是否支持对话框按钮自动聚焦 接口 art.dialog.get(id)根据 id 获取 art.dialog 对象。注意:这是一个静态方法 closed对话框是否已经关闭。注意:这是一个属性,对话框若关闭其值为 true close()关闭对话框 visible()把隐藏的对话框显示 hidden()隐藏对话框 title(value)设置对话框标题 content(value)设置消息内容 button(button, [button], ..)添加或者修改一个或者多个按钮 follow(element)让对话框依附在指定元素附近 size(width, height)指定对话框内容尺寸 lock()开启锁屏遮罩 unlock()关闭锁屏遮罩 time(value)设置对话框显示时间,超过时间自动关闭 (单位:毫秒)   基本就这么多了,详细用法可以参考教程!

JQuery

【JQuery】利用JQuery动画制作滑动菜单项效果

7. 二月 2013
 效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字上移从而替换掉原有的文字。 原理其实不难无非就是css的控制加之jquery的代码对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除),使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子。核心代码如下: $(function () { var webNav = { val: { target: 0 }, init: function () { $(".gnb ul li").on("hover", webNav.hover); }, hover: function (e) { if ($(this).index() == webNav.val.target) { return }; if (e.type == "mouseenter") { $(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300); } else if (e.type == "mouseleave") { $(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300); } } }; webNav.init(); }); Demo下载:http://www.cfxixi.com/showtopic-528.aspx

JQuery

jquery paging Plugin(分页插件)

15. 十一月 2012
http://archive.plugins.jquery.com/project/pagination http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

JQuery

jquey 搜索 自动生成的 下拉列表

14. 十一月 2012
示例: http://ilarikajaste.fi/dist/quickselect-problem/

JQuery

jquey 搜索 自动生成的 下拉列表

14. 十一月 2012
示例: http://ilarikajaste.fi/dist/quickselect-problem/

JQuery

jquey 搜索 自动生成的 下拉列表

14. 十一月 2012
示例: http://ilarikajaste.fi/dist/quickselect-problem/

JQuery

jquery如何修改拥有两个class的div

9. 十一月 2012
诸如<div class="activity-Main noCheck"> 可以先用find找寻第一个class确定dom元素位置,这样就可以调用removeClass和addClass添加或移除样式了。 示例:  $(this).find('.activity-Main').removeClass('noCheck').addClass('hasCheck');

JQuery

一个取代jquery find()方法获取子dom元素的优化方法

9. 十一月 2012
用find()方法会循环tag影响性能,因此我们可以考虑这张的写法: 将$(this).find('p')修改为$('p',$(this)),得到的效果相同但是性能更优,大家不妨试试。 举例: var typeName=$('p',$(this)).html();

JQuery

jquery如何让input焦点消失(键盘消失方法)

20. 九月 2012
 $("#userName").blur();

JQuery

jQuery 如何对元素绑定和取消事件

23. 八月 2012
原文:http://www.lvtaostudio.com/2010/0113/444.html $("#testButton").unbind(); $("#testButton").bind("click", function(){ alert("dsfdsfds"); });  

JQuery

JQuery如何排除某元素绑定事件

21. 八月 2012
  $("#scrollerBrandList li").not(".LetterHeader").each(function(i){ $(this).bind("click",function(){ alert("ok"); }) });

JQuery

jquery中如何在一个list中对每个item绑定点击事件

17. 八月 2012
<ul id="scrollerCategoryList"> <li id="brandAll"> <div class="Category" > 全部 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 服装 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 美容 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 餐饮 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 数码 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 娱乐 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 测试 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 游戏 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 电影 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 吃饭 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 喝酒 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 中国 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 美国 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 英国 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> <li> <div class="Category"> 加拿大 </div> <div class="CategoryCount"> <span class="count">176</span> <span class="arrow">></span> </div> </li> 尝试选中ul这个dom 然后绑定所有下面的li元素 click事件 $('#scrollerCategoryList li').click(function(){ var me=this; console.log($(me).attr("id")); });

JQuery

JQuery lazyload插件介绍

15. 八月 2012
JQuery lazyload插件可以在你图片未载入的情况下,预先载入一张自己设置的图片。 官方网址:http://www.appelsiini.net/projects/lazyload 下载地址: https://github.com/tuupola/jquery_lazyload

JQuery

Jquery中使用jsonp方法跨域获取服务器端数据

14. 八月 2012
Jquery中使用jsonp方法跨域获取服务器端数据(亲测过): $.ajax({ url: 'http://xxx.cfxixi.com/aaa.svc/ccc?weigh=2.00', dataType: 'jsonp', success: function( jsonData ) { alert(jsonData); console.log(jsonData); }, error: function( XMLHttpRequest, textStatus, errorThrown ) { /renderErrorMessage( 'Fehler', textStatus ); alert("error"); } });

JQuery

Jquery显示通知信息的一个插件( jQuery Gritter notification plugin)

30. 七月 2012
 jQuery Gritter notification plugin http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/

JQuery

jquery制作3d画廊功能

6. 七月 2012
Demo示例:http://3dgallery.sinaapp.com/#   lz我加了一个刷的功能用的是harmer.js 其中核心代码: 1.在$.Gallery.prototype的init函数中定义变量:   this.hammer=new Hammer(this.$el.find(".dg-wrapper").get(0));   2.在_loadEvents函数中定义事件: this.hammer.onswipe=function(event){ //alert(event.direction); if(event.direction=="left"){ if( _self.options.autoplay ) { clearTimeout( _self.slideshow ); _self.options.autoplay = false; } _self._navigate('next'); return false; }else if(event.direction=="right"){ if( _self.options.autoplay ) { clearTimeout( _self.slideshow ); _self.options.autoplay = false; } _self._navigate('prev'); return false; } }  

Html5, JQuery

jquery动态添加Div

20. 三月 2012
原文我的csdn博客:http://blog.csdn.net/xiaoguang44/article/details/6895101     html页面中的代码 <div id="filterDiv"> <div id="div1"> <input id="inputPropertyName1" value="MetricName" /> <input id="inputOperation1" value="contains" /> <input id="filterValue1" /> </div> </div> <button id="filter">Filter</button> <button id="add">Add</button> <button id="reset">Reset</button>   jqury代码 $("#filter").click(function () { for (var i = 1; i <= filterNum; i++) { if ($("#filterValue" + i).val() == null || $("#filterValue" + i).val() == "") { alert($("#filterValue" + i).val()); continue; } else { if ($("#inputPropertyName" + i).val() == "MetricId") { dataSource.filter({ field: $("#inputPropertyName" + i).val(), operator: $("#inputOperation" + i).val(), value: parseInt($("#filterValue" + i).val()) }); } else { dataSource.filter({ field: $("#inputPropertyName" + i).val(), operator: $("#inputOperation" + i).val(), value: $("#filterValue" + i).val() }); } } } }); $("#add").click(function () { filterNum++; var newDiv = document.createElement('div'); var str = "<input id='inputPropertyName" + filterNum + "' value='MetricName' /><input id='inputOperation" + filterNum + "' value='contains' /><input id='filterValue" + filterNum + "' /><input id='delItem'" + filterNum + " onclick='delItem(" + filterNum + ");' value='删除此项' type='button' />"; newDiv.innerHTML = str; newDiv.setAttribute("Id", "div" + filterNum); $("#filterDiv").append(newDiv); }); $("#reset").click(function () { dataSource.filter({ field: "MetricName", operator: "contains", value: "" }); }); 删除的jquery function delItem(i) { $("#div" + i).remove(); }

JQuery

MVC2的框架下,使用ColorBox弹出的几种用法

11. 三月 2012
原文出自我的csdn博客:http://blog.csdn.net/xiaoguang44/article/details/6618253 0.需加载colorbox的库文件与样式 <script src="/Content/scripts/jquery/jquery.colorbox-min.js" type="text/javascript"></script> <link href="/content/appoint/colorbox.css" rel="stylesheet" type="text/css" media="screen" />     一.1.内置对象colorbox弹出(写在同一个页面里面),这是一个预先隐藏的页面,当触发事件后,利用colorbox插件将其嵌套并显示出来。   <div style='display: none'> <div id='inline_comment' style='padding: 10px; background: #fff'> <ul class="comment-box"> <a name="ques-btn"></a> <li> <p> <strong> 您的评论:</strong></p> <textarea id="commentBody" class="comment-input" name="content" cols="" rows=""></textarea></li> <li><a href="javascript:submitComment();" style="width: 108px; margin-top: 8px; height: 26px; display: block; border: none; cursor: pointer;"> <img src="/Content/images/button/btn-forum-comment.jpg" alt="" /></a> </li> </ul> <br /> </div> </div>   2.通过SCRIPT触发事件,点击页面上的按钮(绑定一个函数,当函数触发时弹出colorbox)   function jumpComment() { $("#makeComment").colorbox({ width: "45%", inline: true, href: "#inline_comment" }); $("#makeComment").click(); }     二.1.点击页面后弹出colorbox,这是网页页面上的代码。 <td id="seeDetail1"><a href="/bbb/aaa?Id=<%=item.Id %>" id="seeDetail2" >查看详情</a> <a href="/bbbr/nnn?Id=<%=item.Id %>">立即支付</a><br /> <a href="/eee/CancelOrder?customId=<%= item.CustomId %>">取消订单</a></td>     2.script中绑定触发函数 <script type="text/javascript"> $(document).ready(function () { $("#seeDetail1 #seeDetail2").colorbox({ iframe: true, innerWidth: 740, innerHeight: 360 }); }); </script>       3.定义Controller,触发函数后,系统会经由controller中定义的action一路执行代码逻辑。 public ActionResult OrderDetail(string Id) { if (!String.IsNullOrEmpty(Id)) { string itemId = Id; long orderId = Convert.ToInt64(itemId); Order orderDetail = OrderQueryService.FindOrderById(orderId); ViewData["orderDetail"] = orderDetail; } return View(); }       4.定义弹出的页面 如是,以上是常用的2种弹出方法。

.Net MVC, JQuery

使用jquery当页面打开时,将修改样式的点击事件绑定到Dom

11. 三月 2012
操作步骤: 1.声明指定样式类的类名 2.修改其中的样式 3.加载时即设定click事件。 举例: $(document).ready(function () { document.getElementById('comment').className = ".ui-tabs .ui-tabs-hide"; document.getElementById('comment').style.cssText = "display:block"; document.getElementById('question').className = ".ui-tabs .ui-tabs-hide"; document.getElementById('question').style.cssText = "display:block"; $("#biaoshi").click(function () { document.getElementById('comment').className = ".ui-tabs .ui-tabs-hide"; document.getElementById('comment').style.cssText = "display:block"; document.getElementById('question').className = ".ui-tabs .ui-tabs-hide"; document.getElementById('question').style.cssText = "display:block"; }) })  

JQuery

jquery如何对多个对象绑定同一事件

11. 三月 2012
用jquey循环三个元素对象,其中首先利用jquery的选择器选取id为edit的包装集,利用jquery内置的each方法枚举每个对象 同时在对象的事件上绑定函数至,本例使用了点击事件,当事件触发时将屏幕弹出一个简单的窗口。 例子: $("a[id='edit']").each(function (index) { $(this).click(function(){alert('sfsafasdf');}); }); $("a[id='add']").each(function (index) { $(this).click(function(){alert('sfsafasdf');}); });

JQuery

关于ColorBox使用的一个简单例子

3. 三月 2012
关于ColorBox使用的一个简单例子 [更多...]

JQuery