Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
jQuery代码优化可能吗?_Jquery_Optimization - Fatal编程技术网

jQuery代码优化可能吗?

jQuery代码优化可能吗?,jquery,optimization,Jquery,Optimization,我正在使用jQuery自定义默认选择框的样式。除了隐藏它并覆盖一个div元素之外,我还添加了一个hover函数。虽然我还没有在所有主流浏览器中测试过它,但它基本上是可以工作的,我可能需要为IE6构建一个后备版本(谁还在使用它?) 由于我只是一个初学者,我想知道这段代码是否可以以任何方式进行优化。谢谢 $("select").each(function(){ $(this).wrap('<div class="sbox"/>'); $(this).after("<sp

我正在使用jQuery自定义默认选择框的样式。除了隐藏它并覆盖一个div元素之外,我还添加了一个hover函数。虽然我还没有在所有主流浏览器中测试过它,但它基本上是可以工作的,我可能需要为IE6构建一个后备版本(谁还在使用它?)

由于我只是一个初学者,我想知道这段代码是否可以以任何方式进行优化。谢谢

$("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提供的链接能力

这正是我想要的。非常感谢你!现在还没有投票的名声,但在我的书中它值得+10:)谢谢你的指点,我需要深入研究一下。“detach()”已添加书签。