记住,永远不要让相同的选择器在你的代码里出现多次.注:(1)为了区分普通的JavaScript对象和jQuery对象,可以在变量首字母前加上$符号。(2)上面代码可以使用jQuery的链式操作加以改善。如下所示:
var $active_light = $("#traffic_light input.on");
$active_light.bind("click",function(){})
.css("border","1px dashed yellow")
.css("background-color","orange")
.fadeIn("slow");
4.如果你打算在其他函数中使用jQuery对象,那么你必须把它们缓存到全局环境中。
如下代码所示:
// 在全局范围定义一个对象(例如:window对象)
window.$my = {
head:$("head"),
trafficLight:$("#trafficLight"),
trafficButton:$("#trafficButton")
};
function doSomething(){
// 现在你可以引用存储的结果并操作它们
var script=document.createElement("script");
$my.head.append(script);
// 当你在函数内部操作是,可以继续将查询存入全局对象中去.
$my.coolResults=$("#some_ul li");
$my.otherResults=$("#some_table td");
// 将全局函数作为一个普通的jquery对象去使用.
$my.otherResults.css("border-color","red");
$my.trafficLight.css("border-color","green");
}
// 你也可以在其他函数中使用它.
这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。这并不是一个jQuery***实践,但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。例如,你想动态的创建一组列表元素,千万不要这样做,如下所示:对直接的DOM操作进行限制。
var top_100_list = [];// 假设这里是100个独一无二的字符串
var $mylist = $("#mylist");// jQuery选择到<ul>元素