常用jquery代码应用总结

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/flowers1987/blog/190945

文章标签：

#javascript #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

1、切换样式（删除/添加）

经常性的实现方式：

$( "td" ).hover(
	  function() {
	    $( this ).addClass( "hover" );
	  }, function() {
	    $( this ).removeClass( "hover" );
});

可以简化：

$("#toggle").hover(function(){
	$(this).toggleClass('hoverTextSel');
});

切换（toggle）类允许你根据某个类的

是否存在来添加或是删除该类。

2、使用字面量创建元素，这样可能可读性和可维护性会更好一些

var obj = $("", { href: "#", class: "className", title: "..." });

3、事件处理，之前项目的开发中用过live为动态添加的页面元素绑定事件，当时知道这个消耗很大

在jQuery 1.4.2中，delegate和undelegate选项被引入代替live，因为它们提供了更好的上下文支持例如：

 $("table").each(function(){
         $("td", this).live("hover", function(){
              $(this).toggleClass("hover");
         });
     });

现在用：

$("table").delegate("td", "hover", function(){
  $(this).toggleClass("hover");
});

4、检查一个元素是否存在

if ($('#someDiv').length)

5、输入框提示信息

var $text = $("#text");
var val = $text.val();
    $text.focusin(function(){
        if ($(this).val() == val) {
            $(this).val("");
        }
    }).focusout(function(){
        if ($.trim($(this).val()) == "") {
            $(this).val(val);
        }
    });

6、切换菜单选中状态

我们常常需要把当前选中状态清掉，然后再将选中的菜单添加选中状态：

$('#nav li').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
});

更好的写法：

$('#nav li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

7、批量设置样式

.css({"background-color":"yellow","font-size":"200%"});

转载于:https://my.oschina.net/flowers1987/blog/190945