1. How to judge element is visible ?
if($(".nav").is(":visible")) {
// This element is visible
}
This filter is very power, for example:
<div style="display: none;">
<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;
});