23. jquery延时加载功能
want to delay something?
$(document).ready(function() { window.settimeout(function() { // do something }, 1000);});
24. 移除单词功能
want to remove a certain word(s)?
$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, ));});
25. 验证元素是否存在于jquery对象集合中
simply test with the .length property if the element exists.
$(document).ready(function() { if ($('#id').length) { // do something }});
26. 使整个div可点击
want to make the complete div clickable?
$(document).ready(function() { $(div).click(function(){ //get the url from href attribute and launch the url window.location=$(this).find(a).attr(href); return false; });// how to usehome
});
27. id与class之间转换
当改变window大小时,在id与class之间切换
$(document).ready(function() { function checkwindowsize() { if ( $(window).width() > 1200 ) { $('body').addclass('large'); } else { $('body').removeclass('large'); } }$(window).resize(checkwindowsize);});
28. 克隆对象
clone a div or an other element.
$(document).ready(function() { var cloned = $('#id').clone();// how to use
});
29. 使元素居屏幕中间位置
center an element in the center of your screen.
$(document).ready(function() { jquery.fn.center = function () { this.css(position,absolute); this.css(top, ( $(window).height() - this.height() ) / 2+$(window).scrolltop() + px); this.css(left, ( $(window).width() - this.width() ) / 2+$(window).scrollleft() + px); return this; } $(#id).center();});
30. 写自己的选择器
write your own selectors.
$(document).ready(function() { $.extend($.expr[':'], { morethen1000px: function(a) { return $(a).width() > 1000; } }); $('.box:morethen1000px').click(function() { // creating a simple js alert box alert('the element that you have clicked is over 1000 pixels wide'); });});
31. 统计元素个数
count an element.
$(document).ready(function() { $(p).size();});
32. 使用自己的bullets
want to use your own bullets instead of using the standard or images bullets?
$(document).ready(function() { $(ul).addclass(replaced); $(ul > li).prepend(‒ ); // how to use ul.replaced { list-style : none; }});
33. 引用google主机上的jquery类库
let google host the jquery script for you. this can be done in 2 ways.
//example 1 // example 2:(the best and fastest way)
34. 禁用jquery(动画)效果
disable all jquery effects
$(document).ready(function() { jquery.fx.off = true;});
35. 与其他javascript类库冲突解决方案
to avoid conflict other libraries on your website, you can use this jquery method, and assign a different variable name instead of the dollar sign.
$(document).ready(function() { var $jq = jquery.noconflict(); $jq('#id').show();});
以上就是所有关于jquery实用技巧的全部内容,希望对大家的学习有所帮助。
