当前位置: 首页 > 工具软件 > JQuery Tips > 使用案例 >

jQuery tips and tricks - 2

魏熠彤
2023-12-01

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;
});
 类似资料: