jQuery tips and tricks

下载贤集网APP入驻自媒体

1. How to judge element is visible ?
    if($(".nav").is(":visible")) {
        // This element is visible
    }
This filter is very power, for example:
    

    
This element is hidden.
    
    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:
    

        
menu 1

        
menu 2

        
menu 3

    
    // 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
    

        Go to Google
    
    $("#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;
    });