DEMO code of jQueryfocus () blur () instance

Let's explain our purpose first. We know that the focus style of the text box of the contemporary browser (modernbrowsers) can be set through the pseudo class: focus of CSS. Suppose we have such a piece of code: formdldtName: dtddinputtypetext // dddtPassword: dtddinputtypepassword // dddtT

Let's explain our purpose first. We know that the focus style of the text box of the contemporary browser (modernbrowsers) can be set through the pseudo class: focus of CSS. Suppose we have such a piece of code:

In this way, we can solve the focus style with CSS:

Input [type = "text"]: focus, input [type = "password"]: focus, textarea: focus {border: 1px solid # f00; background: # fcc ;}
Simple, right? You can use any contemporary browser for testing (Firefox, Safari, IE7): http://realazy.org/lab/jquery/tut/form_hover_step1.html. IE6? This is the purpose of this tutorial. Yes, since IE does not support focus, we can only use Using DOM Scripting to Plugthe Holes in CSS, but we use jQuery to implement it.

Let's take a look at how jQuery works. JQuery uses the $ symbol to return a jQuery object, and then we can use the API (Interface) provided by jQuery. A lot of them are very practical. Please refer to visual jquery for more information.

We do not understand the program. Yes, I suppose you and I are just familiar with some of the most basic syntaxes (sorry, I'm sorry, you should not be self-flat ). Since we don't understand it, we will use CSS to think about it.

First, we need to obtain the input and textarea of type = "text", type = "password" from the DOM. Yes, our great dollar is on the stage. Oh, it's the dollar sign. For more information, see http://proj.jquery.com/docs/base/expression/css:

$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea ")
After selecting them? We have to deal with events. : The Event corresponding to focus is onfocus, but jQuery hates on, so it is focus. (Reference http://proj.jquery.com/docs/EventModule ). So we know we should do this:

$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea"). focus ();
Hey, we have taken a big step! We will continue to tell focus what to do. In jQuery, we usually need some anonymous functions to help us do some things. If we don't understand them, we can continue:

$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea"). focus (function (){});
What is our purpose? Yes. Add a style to the highlighted text box. JQuery has a css (prop) API. For more information, see the preceding CSS. we can write it like this:

Css ({background: "# fcc", border: "1px solid # f00 "})
Bingo! It is only one step away from success. I suppose you know that the returned object uses this. In jQuery, returning itself is also this. However, the returned object is still a jQuery object. We must also use the dollar sign. So it is $ (this ). So:

$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea "). focus (function () {$ (this ). css ({background: "# fcc", border: "1px solid # f00 ″})});
That's it! How can we execute this code? We know that a body can be used, and a window. onload can be used, but jQuery provides a better solution that allows us to further separate structures and interactions.

$ (Document). ready (function (){
   // Your codehere...
});
So we only need to put our code in it:

$ (Document). ready (function (){
    $ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea "). focus (function () {detail (this).css ({background: "# fcc", border: "1px solid # f00 "})});
});
Haha ...... It seems to have succeeded. Wait, we want to send the Buddha to westday, and the good guys will do it ...... In the above interaction, there is only focus. What happens when focal loss occurs? Well, don't let us take it for granted, defocus? Then the focus style is automatically cleared ~ No, unless we explicitly tell it. IHO:

Certificate (this).blur(function(){((this).css ({background: "transparent", border: "1px solid # ccc "})})
Well, when it comes to the power of jQuery, jQuery objects can accept countless function callbacks/messages/methods (which is the correct statement, please advise), that is, the legendary Chainability. That is to say, we do not need to write data in two rows in one breath:

$ (Document). ready (function (){
    $ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea" ).focus(function(symbol symbol (this%.css ({background: "# fcc", border: "1px solid # f00" has been installed successfully. blur(function({{}(this}.css ({background: "transparent", border: "1px solid # ccc "})});
})
Ah, again, it seems like it's done ...... Wait a moment. We only need to address IE. other browsers can use CSS. Why should we use JS to reduce their processing efficiency, we use the built-in jQuery definition:

$ (Document). ready (function (){
If ($. browser. msie ){
  Callback ({background: "# fcc", border: "1px solid0000f00000000000000000000000000.blur(function(000000000000(this0000.css ({background:" transparent ", border:" 1px solid # ccc "})});
  }
})

Yeah! We have done it! Well, you need to determine the browser version? It seems that jQuery is not provided, but you can look at this jQuery plug-in (plugin): jQBrowser. Well, it seems that I forgot to tell you that jQuery also has many powerful plug-ins! I have time to sort out a few articles and give them to everyone.

Right. Let's take a look at the results of this step: http://realazy.org/lab/jquery/tut/form_hover_step2.html, and use ie6.pdf.

It seems that we have completed it again (Khan, didn't you say we have completed it?), no! Do you still remember what I do when you see it well? Right. It's a Web standard! What do Web standards advocate? Structure, performance, and interaction are separated. We write the style into JS. I believe this is not a good thing. It's hard to find jQuery! In another way, we define the style in a class. If we add this class to the focus and remove this class from the blur, isn't it OK? Smart ...... The corresponding APIs of jQuery are addClass and removeClass. The process is not cumbersome, otherwise the length will be increased by half (I want to go to bed, I want to go to work tomorrow, poor office workers ),

$ (Document). ready (function (){
If ($. browser. msie ){
  $ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea "). focus (function () {$ (this ). addClass ("ie_focus ")}). blur (function () {$ (this ). removeClass ("ie_focus ")});
}
})

I must admit that it is abnormal to name this class ie_focus. Well, further, although our code is not big, we can separate an independent file. This is the demonstration of our final step: http://realazy.org/lab/jquery/tut/form_hover_step3.html. Remember the source code.

Very simple, right? JQuery has more power than that, and requires more cool and stronger functions. You, And, I, can explore together.

P.S. jQuery's code is also elegant, right? I personally like this functional programming style, but the braces and parentheses hurt my hands ...... I fell in love with Ruby, Orz, which basically cannot see the brackets... Amen, good night ......