jQuery代码优化可能吗?
我正在使用jQuery自定义默认选择框的样式。除了隐藏它并覆盖一个div元素之外,我还添加了一个hover函数。虽然我还没有在所有主流浏览器中测试过它,但它基本上是可以工作的,我可能需要为IE6构建一个后备版本(谁还在使用它?) 由于我只是一个初学者,我想知道这段代码是否可以以任何方式进行优化。谢谢jQuery代码优化可能吗?,jquery,optimization,Jquery,Optimization,我正在使用jQuery自定义默认选择框的样式。除了隐藏它并覆盖一个div元素之外,我还添加了一个hover函数。虽然我还没有在所有主流浏览器中测试过它,但它基本上是可以工作的,我可能需要为IE6构建一个后备版本(谁还在使用它?) 由于我只是一个初学者,我想知道这段代码是否可以以任何方式进行优化。谢谢 $("select").each(function(){ $(this).wrap('<div class="sbox"/>'); $(this).after("<sp
$("select").each(function(){
$(this).wrap('<div class="sbox"/>');
$(this).after("<span class='sboxtext'></span><span class='sboxarrow'></span>");
$(".sbox").hover( function (e) {
$(this).toggleClass('sbox-over');
$(this).find("span.sboxarrow").toggleClass('sboxarrow-over');
});
var val = $(this).children("option:selected").text();
$(this).next(".sboxtext").text(val);
$(this).change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".sboxtext").text(val);
});
});
$(“选择”)。每个(函数(){
$(此).wrap(“”);
$(此)。在(“”)之后;
$(“.sbox”).hover(函数(e){
$(this.toggleClass('sbox-over');
$(this.find(“span.sboxarrow”).toggleClass(“sboxarrow-over”);
});
var val=$(this).children(“选项:选定”).text();
$(this.next(“.sboxtext”).text(val);
$(this).change(function(){
var val=$(this).children(“选项:选定”).text();
$(this.next(“.sboxtext”).text(val);
});
});
dom操作在循环中非常昂贵,因此必须分离元素
var selectbox = $("select").detach();
并在selectbox上执行操作。无需使用
每个
方法,jQuery在幕后迭代选定的元素。如果您使用的是jQuery 1.9-,那么您的代码也适用于旧版本的IE
$("select").wrap('<div class="sbox"/>')
.after("<span class='sboxtext'></span><span class='sboxarrow'></span>")
.parent()
.hover(function() {
$(this).toggleClass('sbox-over')
.find(".sboxarrow")
.toggleClass('sboxarrow-over');
}).end()
.change(function() {
var $this = $(this),
val = $this.children("option:selected").text();
$this.next().text(val);
}).change();
$(“选择”).wrap(“”)
.在(“”)之后
.parent()
.hover(函数(){
$(this.toggleClass('sbox-over'))
.find(“.sboxarrow”)
.toggleClass('sboxarrow-over');
})(完)
.change(函数(){
变量$this=$(this),
val=$this.children(“选项:选定”).text();
$this.next().text(val);
}).change();
- 缓存对象
- 使用jQuery提供的链接能力