A little jquery tutorial

No nonsense, first of all to explain our purpose. We know that the focus style of the text box of the contemporary browser (modern browsers) can be set by the pseudo-class of CSS: Focus. Let's say we have a code like this:

Name:

Password:

Textarea:

Then our CSS will be able to handle the focus style:

Input[type= "Text"]:focus, input[type= "password"]:focus, Textarea:focus {border:1px solid #f00; background: #fcc;}

Simple, right? You can test with any contemporary browser (Firefox, Safari, IE7): http://realazy.org/lab/jquery/tut/form_hover_step1.html. IE6? Oh, this is the purpose of this tutorial, yes, since IE does not support: Focus, we can only use the DOM Scripting to Plug the Holes in CSS, but we are using jquery to achieve. Health.120hrb.com

Let's look at how jquery works. jquery uses the dollar sign $ to return a jquery object, and then we can use the API (interface) provided by jquery. A lot of it is practical, and it's easy to refer to visual JQuery.

We do not know the procedure, yes, I suppose you and I, just understand some of the most basic grammar (sorry prawn, master not self-flat identity). Since we do not understand, we use the CSS way to think.

First we want to get type= "text" from DOM, type= "password" of input and textarea. Yes, our great dollar came out, oh, it's the dollars sign. Referring to http://proj.jquery.com/docs/Base/Expression/CSS/, we know that we can choose this to them:

$ ("input[@type = ' text '], input[@type = ' password '], textarea")

When you select them, we're going to have to deal with events. : The event that the focus corresponds to is onfocus, but jquery hates on, so it's focus, so much the better (see http://proj.jquery.com/docs/EventModule/). So we know we should do this:

$ ("input[@type = ' text '], input[@type = ' password '), textarea"). focus ();

Hey, we've taken a big step! We're going to go ahead and tell focus what to do. In jquery, we usually need some anonymous function to help us do something, do not understand matter, let us continue:

$ ("input[@type = ' text '], input[@type = ' password '), textarea"). focus (function () {});

What is our purpose? Yes, it's a style for the focused text box. jquery has a CSS (prop) API, referring to the previous CSS, we can write:

CSS ({background: "#fcc", border: "1px solid #f00"})

Bingo! is only a step away from success. I assume you know that the return object itself uses this. In jquery, the return itself is also this, but the object that needs to be returned is still the jquery object, and 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! And then how do we execute this code? We know that there is a body onload= "" can be used, but also know that there is a window.onload can be used, but jquery provides a better solution, allowing us to further separate structure and interaction.

$ (document). Ready (function () {

Your code here ...

}); rl.hljmlyfcyy.com

So all we need to do is put our code in there:

$ (document). Ready (function () {

$ ("input[@type = ' text '], input[@type = ' password '), textarea"). focus (function () {$ (this). CSS ({background: "#fcc", border: "1px solid #f00"});

});

Oh...... Seems to have succeeded. Wait, we want to send the Buddha to the west, the good man to the bottom ... In the above interaction, only the focus of the situation, then the loss of focus? Well, let's not take it for granted, lose focus? So the focus of the style is automatically clear out of the ~ no, unless we explicitly tell it. According to gourd painting:

$ (this). blur (The function () {$ (this). CSS ({background: "Transparent", border: "1px solid #ccc"}))

Well, when it comes to the power of jquery, the jquery object can accept countless function callbacks/messages/methods (which is the right word, please expert advice), the legendary chainability. That means we don't have to write in two lines, one go:

$ (document). Ready (function () {

$ ("input[@type = ' text '], input[@type = ' password '), textarea"). focus (function () {$ (this). CSS ({background: "#fcc", border: "1px solid #f00"}). blur (function () {$ (this). CSS ({background: "Transparent", border: "1px solid #ccc"}));

})

Ah, again seemingly finished ... And wait, we only need to target IE ah, other browsers can use CSS to achieve, why should we use JS to reduce their processing efficiency, so, we use the jquery comes with the definition:

$ (document). Ready (function () {

if ($.browser.msie) {

$ ("input[@type = ' text '], input[@type = ' password '), textarea"). focus (function () {$ (this). CSS ({background: "#fcc", border: "1px solid #f00 ″})}). blur (function () {$ (this). CSS ({background:" Transparent ", border:" 1px solid #ccc "}));

}

}) health.hljmlyfcyy.com

Yes, we did it! Well, what about the browser version? It seems that jquery is not available, but you can look at this jquery plugin (plugin): Jqbrowser. Well, I seem to have forgotten to tell you that jquery has a lot of super plugins! There is time for me to tidy up a few to dedicate to everyone.

Yes, look at the results of our step: http://realazy.org/lab/jquery/tut/form_hover_step2.html, be sure to check with IE6.

Seems to have finished again (Khan, the front is not to say that we really finished it), no! Do you remember what I do when you see it? Yes, yes, it's a Web Standard! What does web standards advocate? structure, performance, cross-separation ah, we put the style into the JS inside, I believe this is not a good thing. It's hard not to pour our jquery! We have a different idea, we define the style in a class, and when the focus is added to this class,blur, it is OK to remove this class? Smart ... The corresponding API for jquery is AddClass and Removeclass. The process is not burdensome, otherwise the space will have to increase by half (I have to sleep, tomorrow to work, poor office workers), the code is as follows:

$ (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 have to admit, it's a bit of a pervert to name this class Ie_focus. Well, further, although our code is not very small, we also separate out a separate file. This is our final step of the demo: Http://realazy.org/lab/jquery/tut/form_hover_step3.html, remember to look at the source Oh.

It's simple, right? jquery is more powerful than that, and there is a need for more cool and stronger features left to you, and, me, to explore together.

P.S. jquery's code is beautiful too, isn't it? This functional style of programming I am personally very fond of, but curly braces, parentheses hit my hand hurts ... All I'm deeply in love with the Ruby,orz that basically can't see the parentheses ... Amen, Good night ...

A little jquery tutorial