Jquery处理输入框的获取焦点与失去焦点

在w3school里查到的jquery获取焦点的方法，当输入框获得焦点时，改变它的背景色：

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

同站点里查到的jquery失去焦点的方法，当输入域失去焦点 (blur) 时改变其颜色：

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

因为后期版本推荐用on()方法来绑定事件，所以尝试写成了这样：

$('#s').on('focus',function(){
$('#searchsubmit').addClass('focus');
})
$('#s').on('blur',function(){
if($('#s').val()==='')$('#searchsubmit').removeClass('focus');
});

实际上，直接写成如下格式，程序也可以正常执行，很神奇的链式调用：

$('#s').on('focus',function(){
$('#searchsubmit').addClass('focus');
}).on('blur',function(){
if($('#s').val()==='')$('#searchsubmit').removeClass('focus');
});

尝试在button元素里插入了一个div:

<button id="aaa"><div id="bbb">1111111111111111</div></button>

通过链式调用为“aaa”元素绑定一个动作，并为其第一个子元素“bbb”添加一个类：

$('#aaa').on('click',function(){$('#aaa').toggleClass('eee')}).children(0).addClass('ddd')

程序完美执行。