1.测试jQuery包装集是否包含某些元素
如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在:
if($(selector)[0]){...}
// 或者这样
if($(selector).length){...}
2.在FireBug控制台记录jQuery
FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于 记录你的JavaScript代码 也得到支持。
写入FireBug控制台的最简单方式如下:
console.log("hello world")
你也可以按照你希望的方式写一些参数:
console.log(2,4,6,8,"foo",bar)
你也可以编写一个小扩展来记录jQuery对象到控制台:
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
对于这个扩展,你可以直接使用.log()方法来记录当前对象到控制台。
$('#some_div').find('li.source > input:checkbox')
.log("sources to uncheck")
.removeAttr("checked");
3.预加载图片
通常使用JavaScript来预加载图片是个相当不错的方法:
//定义预加载图片列表的函数(有参数)
jQuery.preloadImages = function(){
//遍历图片
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
}
// 你可以这样使用预加载函数
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");
4.jQuery实现全选与反选
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function ck(v,s,n){
if(v){
$("input[@name='"+n+"[]']").each(function() {
$(this).attr("checked", true);
});
}else{
$("input[@name='"+n+"[]']").each(function() {
$(this).attr("checked", false);
});
}
}
</script>
</head>
<body>
<input type='checkbox' id='idn1' name='idn[]' value='n1' onclick="ck(this.checked,'idn1','idn1')"/>value1
<input type='checkbox' id='idn1_1' name='idn1[]' value='1' />value1_1
<input type='checkbox' id='idn1_2' name='idn1[]' value='2' />value1_2
<input type='checkbox' id='idn1_3' name='idn1[]' value='3' />value1_3
</body>
</html>