jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!
1. jQuery平滑回到顶端效果
1. $(document).ready(function() {
2.
3. $("a.topLink").click(function() {
4. $("html, body").animate({
5. scrollTop: $($(this).attr("href")).offset().top + "px"
6. }, {
7. duration: 500,
8. easing: "swing"
9. });
10. return false;
11. });
12.
13. });
/*offset()用于获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。*/
2. jQuery处理图片尺寸
3.
[javascript] view plaincopyprint?
1. $(window).bind("load", function() {
2. // 图片修改大小
3. $('#imglist img').each(function() {
4. var maxWidth = 120;
5. var maxHeight = 120;
6. var ratio = 0;
7. var width = $(this).width();
8. var height = $(this).height();
9.
10. if(width > maxWidth){
11. ratio = maxWidth / width;
12. $(this).css("width", maxWidth);
13. $(this).css("height", height * ratio);
14. height = height * ratio;
15. }
16.
17. if(height > maxHeight){
18. ratio = maxHeight / height;
19. $(this).css("height", maxHeight);
20. $(this).css("width", width * ratio);
21. width = width * ratio;
22. }
23. });
24.
25. });
3. jQuery实现的滚动自动加载代码
[javascript] view plaincopyprint?
1. var loading = false;
2. $(window).scroll(function(){
3. if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
4. if(loading == false){
5. loading = true;
6. $('#loadingbar').css("display","block");
7. $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
8. $('body').append(loaded);
9. $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
10. $('#loadingbar').css("display","none");
11. loading = false;
12. });
13. }
14. }
15. });
16.
17. $(document).ready(function() {
18. $('#loaded_max').val(50);
19. });
4. jQuery测试密码强度
[javascript] view plaincopyprint?
1. $('#pass').keyup(function(e) {
2. var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
3. var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
4. var enoughRegex = new RegExp("(?=.{6,}).*", "g");
5. if (false == enoughRegex.test($(this).val())) {
6. $('#passstrength').html('More Characters');
7. } else if (strongRegex.test($(this).val())) {
8. $('#passstrength').className = 'ok';
9. $('#passstrength').html('Strong!');
10. } else if (mediumRegex.test($(this).val())) {
11. $('#passstrength').className = 'alert';
12. $('#passstrength').html('Medium!');
13. } else {
14. $('#passstrength').className = 'error';
15. $('#passstrength').html('Weak!');
16. }
17. return true;
18. });
5. jQuery实现的DIv高度保持一致
[javascript] view plaincopyprint?
1. var maxHeight = 0;
2.
3. $("div").each(function(){
4. if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
5. });
6.
7. $("div").height(maxHeight);
6. 简单处理IE6上PNG格式文件 (背景:png格式图片在ie6下不支持)
[javascript] view plaincopyprint?
1. $('.pngfix').each( function() {
2. $(this).attr('writing-mode', 'tb-rl');
3. $(this).css('background-image', 'none');
4. $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
5. });
将class=pngfix添加到需要处理的对象即可。
7. jQuery处理JSON
[javascript] view plaincopyprint?
1. function parseJson(){
2. //Start by calling the json object, I will be using a
3. //file from my own site for the tutorial
4. //Then we declare a callback function to process the data
5. $.getJSON('hcj.json',getPosts);
6.
7. //The process function, I am going to get the title,
8. //url and excerpt for 5 latest posts
9. function getPosts(data){
10.
11. //Start a for loop with a limit of 5
12. for(var i = 0; i < 5; i++){
13. //Build a template string of
14. //the post title, url and excerpt
15. var strPost = '<h2>'
16. + data.posts[i].title
17. + '</h2>'
18. + '<p>'
19. + data.posts[i].excerpt
20. + '</p>'
21. + '<a href="'
22. + data.posts[i].url
23. + '" title="Read '
24. + data.posts[i].title
25. + '">Read ></a>';
26.
27. //Append the body with the string
28. $('body').append(strPost);
29.
30. }
31. }
32.
33. }
34.
35. //Fire off the function in your document ready
36. $(document).ready(function(){
37. parseJson();
38. });
8. jQuery实现让整个div可以被点击
[javascript] view plaincopyprint?
1. $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
9. jQuery实现的Facebook风格的图片预加载效果
[javascript] view plaincopyprint?
1. var nextimage = "http://www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";
2. $(document).ready(function(){
3. window.setTimeout(function(){
4. var img = $("<img>").attr("src", nextimage).load(function(){
5. $('div').append(img);
6. });
7. }, 100);
8. });
9.
10. [url=http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm]在线调试[/url]