微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery 常见小例汇总

1

rush:js;"> //这段代码展示了在用户未输入值时, //如何在文本类型的input域中保留 //一个认值 wap_val = []; $(".swap").each(function(i){ wap_val[i] = $(this).val(); $(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]); }});});

2

rush:js;"> var el = $('#id'); el.html(el.html().replace(/word/ig,''));

3

rush:js;"> $('button.someClass').live('click',someFunction); //注意,在jQuery 1.4.2中,delegate和undelegate选项 //被引入代替live,因为它们提供了更好的上下文支持 //例如,就table来说,以前你会用 //.live() $("table").each(function(){ $("td",this).live("hover",function(){ $(this).toggleClass("hover"); }); }); //现在用 $("table").delegate("td","hover",function(){ $(this).toggleClass("hover"); });

4.如何把已创建的元素动态地添加到DOM中:

rush:js;"> var newDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body');

5

var cloned = $('#somediv').clone();

6

rush:js;"> if($(element).is(':visible') == 'true') { //该元素是可见的 }

7.JQ中定位

rush:js;"> jQuery.fn.center = function () { this.css('position','absolute'); this.css('top',( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); this.css('left',( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px'); return this; } //这样来使用上面的函数: $(element).center();

8.如何把有着某个特定名称的所有元素的值都放到一个数组中:

rush:js;"> var arrInputValues = new Array(); $("input[name='table[]']").each(function(){ arrInputValues.push($(this).val()); });

9.在jQuery中如何使用.siblings()来选择同辈元素

rush:js;"> $('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active'); }); //替代做法是 $('#nav li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); });

10.正反选

rush:js;"> var tog = false; $('a').click(function() { $("input[type=checkBox]").attr("checked",!tog); tog = !tog; });

11.如何获得鼠标垫光标位置x和y

rush:js;"> $(document).ready(function() { $(document).mousemove(function(e){ $('#XY').html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY); }); });

12.如何把整个的列表元素(List Element,LI)变成可点击的

rush:js;"> $("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

13.如何检查图像是否已经被完全加载进来

rush:js;"> $('#theImage').attr('src','image.jpg').load(function() { alert('This Image Has Been Loaded'); });

14.如何检查cookie是否启用

rush:js;"> var dt = new Date(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1; expires=" + dt.toGMTString(); var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) { //没有启用cookie }

15.如何让cookie过期:

rush:js;"> var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie('example','foo',{ expires: date });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐