jQuery实用技巧必备(下)_jquery

WBOY
Release: 2016-05-16 15:33:47
Original
1202 people have browsed it

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下:
23. jQuery延时加载功能

  Want to delay something?

$(document).ready(function() { window.setTimeout(function() { // do something }, 1000); });
Copy after login

24. 移除单词功能

  Want to remove a certain word(s)?

$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")); });
Copy after login

25. 验证元素是否存在于jquery对象集合中

  Simply test with the .length property if the element exists.

$(document).ready(function() { if ($('#id').length) { // do something } });
Copy after login

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 use  });
Copy after login

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); });
Copy after login

28. 克隆对象

  Clone a div or an other element.

$(document).ready(function() { var cloned = $('#id').clone(); // how to use 
});
Copy after login

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(); });
Copy after login

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'); }); });
Copy after login

31. 统计元素个数

  Count an element.

$(document).ready(function() { $("p").size(); });
Copy after login

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; } });
Copy after login

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) 
Copy after login

34. 禁用Jquery(动画)效果

  Disable all jQuery effects

$(document).ready(function() { jQuery.fx.off = true; });
Copy after login

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(); });
Copy after login

以上就是所有关于jQuery实用技巧的全部内容,希望对大家的学习有所帮助。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!