MicroLPS


A personal website

Search

Site friends

Investworkflow.com 茶马股道 
PMP exam guilde referece 
PMI  IBM SAP

Catalog categories

UML [1]
Web technology and tools [13]
Javascript HTML XML CSS etc.
Lotus Domino [0]

Login form

Statistics


Total online: 1
Guests: 1
Users: 0

Our poll

Rate my site
Total of answers: 6
Monday, 2017-10-23, 7:07 AM
Welcome Guest
Main | Registration | Login | RSS

Publisher

Main » Articles » Software/Web Design and Development » Web technology and tools

50个jquery代码片段_2


29. 如何为函数创建一个基本的测试
1
2
3
4
5
6
7
8
9
//把测试单独放在模块中
module("Module B");
test("some other test", function() {
    //指明测试内部预期有多少要运行的断言
    expect(2);
    //一个比较断言,相当于JUnit的assertEquals
    equals( true, false, "failing test" );
    equals( true, true, "passing test" );
});

30. 如何在jQuery中克隆一个元素:

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

31. 在jQuery中如何测试某个元素是否可见

1
2
3
if($(element).is(':visible') == 'true') {
    //该元素是可见的
}

32. 如何把一个元素放在屏幕的中心位置:

1
2
3
4
5
6
7
8
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();

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

1
2
3
4
var arrInputValues = new Array();
$("input[name='table[]']").each(function(){
    arrInputValues.push($(this).val());
});

34. 如何从元素中除去html

1
2
3
4
5
6
7
8
9
10
11
(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html( $(this).html().replace(regexp,”") );
        });
        return $(this);
    }
})(jQuery);
//用法:
$('p').stripHtml();

35. 如何使用closest来取得父元素:

1
$('#searchBox').closest('div');

36. 如何使用Firebug和Firefox来记录jQuery事件日志:

1
2
3
4
5
6
7
8
9
// 允许链式日志记录
// 用法:
$('#someDiv').hide().log('div hidden').addClass('someClass');
jQuery.log = jQuery.fn.log = function (msg) {
    if (console){
        console.log("%s: %o", msg, this);
    }
    return this;
};

37. 如何强制在弹出窗口中打开链接:

1
2
3
4
5
6
7
jQuery('a.popup').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) {
        newwindow.focus();
    }
    return false;
});

38. 如何强制在新的选项卡中打开链接:
1
2
3
4
5
jQuery('a.newTab').live('click', function(){
    newwindow=window.open($(this).href);
    jQuery(this).target = "_blank";
    return false;
});

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

1
2
3
4
5
6
7
8
9
// 不这样做
$('#nav li').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});
//替代做法是
$('#nav li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

40. 如何切换页面上的所有复选框:

1
2
3
4
5
6
var tog = false;
// 或者为true,如果它们在加载时为被选中状态的话
$('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});

41. 如何基于一些输入文本来过滤一个元素列表:

1
2
3
4
5
//如果元素的值和输入的文本相匹配的话
//该元素将被返回
$('.someClass').filter(function() {
    return $(this).attr('value') == $('input#someId').val();
})

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

1
2
3
4
5
$(document).ready(function() {
    $(document).mousemove(function(e){
        $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
    });
});

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

1
2
3
4
$("ul li").click(function(){
  window.location=$(this).find("a").attr("href");
  return false;
});
1
2
3
4
5
6
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

44. 如何使用jQuery来解析XML(基本的例子):

1
2
3
4
5
6
function parseXml(xml) {
    //找到每个Tutorial并打印出author
    $(xml).find("Tutorial").each(function() {
        $("#output").append($(this).attr("author") + "");
    });
}

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

1
2
3
$('#theImage').attr('src', 'image.jpg').load(function() {
    alert('This Image Has Been Loaded');
});

46. 如何使用jQuery来为事件指定命名空间:

1
2
3
4
5
6
//事件可以这样绑定命名空间
$('input').bind('blur.validation', function(e){
// ...
});
//data方法也接受命名空间
$('input').data('validation.isValid', true);

47. 如何检查cookie是否启用

1
2
3
4
5
6
7
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
}

48. 如何让cookie过期:

1
2
3
var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

49. 如何使用一个可点击的链接来替换页面中任何的URL

 

1
2
3
4
5
6
7
8
9
10
11
$.fn.replaceUrl = function() {
    var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
    this.each(function() {
        $(this).html(
            $(this).html().replace(regexp,'<a href="$1">$1</a>‘)
        );
    });
    return $(this);
}
//用法 
$('p').replaceUrl();


Source:
Category: Web technology and tools | Added by: microlps (2012-09-26)
Views: 750 | Rating: 0.0/0 |
Total comments: 0

Only registered users can add comments.
[ Registration | Login ]