为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery tips and tricks

1. How to judge element is visible ?

    if($(".nav").is(":visible")) {
        // This element is visible
    }

This filter is very power, for example:

    <div >
    <div id="test">This element is hidden.
    </div>
    if ($("#test").is(":hidden")) {
        alert("this element is hidden"); // execute
    }

Inside the jQuery, it use offsetWidth and offsetHeight to judge whether an element
is visible, not through CSS properties visibility or display:

    Sizzle.selectors.filters.visible = function(elem){
	    return elem.offsetWidth > 0 || elem.offsetHeight > 0;
    };

2. Scroll to an element

    // This example doesn't work properly
    var eleTop = $("#p2").offset().top;
    $("body").scrollTop(eleTop);

OK, it’s a trick that we must set selecter to “html, body”:

    // Works well
    var eleTop = $("#p2").offset().top;
    $("html, body").scrollTop(eleTop);

Add some animations:

    var eleTop = $("#p2").offset().top;
    $("html, body").animate({
        "scrollTop": eleTop
    }, "slow");

3. Another way to find the index of an element within a set

In the previous
article, I use the jQuery index method to achieve this.

Below are some other ways:

    <ul class="menu">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
    </ul>
    // Previous method
    var lis = $("ul.menu li").click(function() {
        lis.index(this); // "menu 3" -> 2
    });
    // Method 1
    var lis = $("ul.menu li").click(function() {
        alert($(this).prevAll().length); // "menu 3" -> 2
    });
    // Method 2
    var lis = $("ul.menu li").click(function() {
        alert(lis.length - $(this).nextAll().length - 1);
    });
    // Method 3
    var lis = $("ul.menu li").click(function() {
        alert($.inArray(this, lis));
    });

4. Loop in a graceful way - $.each

We may loop through object or array like this:

    var obj = {
        "name": "zhangsan",
        "sex": "man",
        "age": 21
    };
    for (var i in obj) {
        console.log("key:" + i + " value:" + obj[i]);
    } 

    var arr = ["zhangsan", "lisi", "wanger"];
    for (var i = 0; i < arr.length; i++) {
        console.log("index:" + i + " value:" + arr[i]);
    }

Now, with jQuery:

    // key:name value:zhangsan
    // key:sex value:man
    // key:age value:21
    $.each(obj, function(i, item) {
        console.log("key:" + i + " value:" + item);
    }); 

    // index:0 value:zhangsan
    // index:1 value:lisi
    // index:2 value:wanger
    $.each(arr, function(i, item) {
        console.log("index:" + i + " value:" + item);
    });

4. Return false to prevent default and stop propagation

    <div id="link2">
        <a href="http://www.google.com/" mce_href="http://www.google.com/">Go to Google</a>
    </div>
    $("#link1").click(function(event) {
        alert("click link1.");
    });
    // 1. Only prevent default action of hyperlink, the alert dialog is showing.
    $("#link1 a").click(function(event) {
        event.preventDefault();
    });
    // 2. No alert dialog shows
    $("#link1 a").click(function(event) {
        event.preventDefault();
        event.stopPropagation();
    });
    // 3. This is the same as previous code
    $("#link1 a").click(function(event) {
        return false;
    });
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消