常用jquery代码应用总结

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%"});


你可能感兴趣的:(JavaScript,jquery)