jquery Design Ideas

jquery Design Ideas

Original URL: http://jqfundamentals.com/book/

Nanyi Translation Finishing

Directory

First, select the page element

Second, change the result set

Three, chain-operated

Iv. operation of elements: value and Assignment

V. Manipulation of elements: moving

Vi. operations of elements: copying, deleting, and creating

Vii. Tools and methods

Eight, event operation

IX. Special Effects

Body

First, select the page element

The basic design idea and main usage of jquery is to "select a page element and then do something about it." This is the fundamental feature that distinguishes it from other JavaScript libraries.

The first step in using jquery is to put a selection expression into the constructor jquery () ($), and then get the selected element.

The selection expression can be a CSS selector:

$ (document)//Select Entire Documents Object

$ (' #myId ')//select page element with ID myId

$ (' div.myclass ')//select div element with class MyClass

$ (' input[name=first] ')//Select the name attribute equals first INPUT element

It can also be a jquery-specific expression:

$ (' A:first ')//Select First a element in Web page

$ (' tr:odd ')//select odd rows of the table

$ (' #myForm: Input ')//Select INPUT element from form

$ (' div:visible ')//select the visible div element

$ (' Div:gt (2) ')//Select all DIV elements except the first three

$ (' div:animated ')//Select a DIV element that is currently in the animated state

Second, change the result set

The second of jquery design ideas is to provide a variety of powerful filters to filter the result set and narrow down the selection results.

$ (' div '). has (' P '); Select the div element that contains the P element

$ (' div '). Not ('. MyClass '); Select a DIV element that is not equal to the MyClass class

$ (' div '). Filter ('. MyClass '); Select a DIV element with class equal to MyClass

$ (' div '). First (); Select a 1th div element

$ (' div '). EQ (5); Select a 6th div element

Sometimes we need to move from the result set to nearby related elements, and jquery also provides a way to move around the DOM tree:

$ (' div '). Next (' P '); Select the first P element after a DIV element

$ (' div '). parent (); Select the parent element of the DIV element

$ (' div '). Closest (' form '); Select the form parent element closest to Div

$ (' div '). Children (); Select all child elements of Div

$ (' div '). siblings (); Select sibling elements of Div

Three, chain-operated

The third of the jquery design idea is that after the page element is finally selected, it can be manipulated in a series of ways, and all operations can be connected and written in the form of a chain, such as:

$ (' div '). Find (' H3 '). EQ (2). html (' Hello ');

Break it down, that's the following:

$ (' div ')//Find DIV element

. Find (' H3 ')//Select one of the H3 elements

. EQ (2)//Select a 3rd h3 element

. html (' Hello '); Change its contents to Hello

This is the most admirable and convenient feature of jquery. Its principle is that each step of the jquery operation, the return is a jquery object, so the different operations can be linked together.

jquery also provides the. End () method, which allows the result set to step back:

$ (' div ')

. Find (' H3 ')

. EQ (2)

. html (' Hello ')

. End ()//return to the step of selecting all H3 elements

. EQ (0)//Select the first H3 element

. HTML (' World '); Change its contents to the world

Iv. operation of elements: value and Assignment

The most common requirement for manipulating page elements is to get their values or to assign them.

The idea of jquery design is to use the same function to complete the value (getter) and assignment (setter), that is, the "accessor" and "evaluator" in one. Whether it is a value or an assignment is determined by the parameters of the function.

$ (' H1 '). html (); HTML () has no parameters, which means that the value of H1 is removed

$ (' H1 '). html (' Hello '); HTML () has parameter Hello, which means to assign a value to the H1

The common values and assignment functions are as follows:

. HTML () to remove or set HTML content

. Text () to remove or set text content

. attr () to remove or set the value of a property

. width () to remove or set the width of an element

. Height () to remove or set the height of an element

. Val () takes out the value of a FORM element

It is important to note that if the result set contains more than one element, all of the elements will be assigned a value, and when the value is taken, it is only the value of the first element (. Text () exception, which takes out the text content of all elements).

V. Manipulation of elements: moving

The five of jquery design idea is to provide two sets of methods to manipulate the position of elements in a Web page. One set of methods is to move the element directly, and the other is to move the other elements so that the target element reaches the position we want.

Suppose we select a DIV element and we need to move it behind the P element.

The first method is to use the. InsertAfter () to move the DIV element behind the P element:

$ (' div '). InsertAfter ($ (' P '));

The second method is to use. After () to add the P element to the front of the DIV element:

$ (' P '). After ($ (' div '));

On the surface, the effect of the two approaches is the same, and the only difference seems to be the difference in operating perspective. But in fact, they have a big difference, that is, the elements returned are different. The first method returns the DIV element, and the second method returns the P element. You can choose which method to use, depending on your needs.

There are four pairs of operations that use this mode:

. InsertAfter () and. After (): Inserts an element from behind an existing element

. InsertBefore () and. Before (): Outside the existing element, insert the element from the front

. AppendTo () and. Append (): Inserts an element from behind within an existing element

. Prependto () and. Prepend (): Inside the existing element, insert the element from the front

Vi. operations of elements: copying, deleting, and creating

In addition to the position movement of elements, jquery provides several other important ways to manipulate elements.

The copy element uses. Clone ().

The delete element uses. Remove () and. Detach (). The difference between the two is that the former does not retain the event of the deleted element, which is reserved for use when re-inserting the document.

Empty the element content (but not delete the element) using. Empty ().

The way to create a new element is as simple as passing the new element directly into the jquery constructor:

$ (' <p>Hello</p> ');

$ (' <li class= "new" >new list item</li> ');

$ (' ul '). Append (' <li>list item</li> ');

Vii. Tools and methods

jquery Design Idea VI: In addition to manipulating the selected elements, there are some tool methods (utility) that are not related to the element. You can use these methods directly without having to select the elements.

If you understand the principles of how JavaScript is inherited, you can understand the nature of tool methods. It is a method defined on the jquery constructor, i.e. Jquery.method (), so it can be used directly. The methods that manipulate elements are those that define the prototype object on the constructor, that is, JQuery.prototype.method (), so you must generate an instance (that is, select the element) to use. If you do not understand this difference, the problem is not very small, as long as the tool method is understood as a JavaScript native function, you can directly use the method is OK.

Common tool methods are as follows:

$.trim () removes spaces at both ends of the string.

$.each () iterates over an array or an object.

$.inarray () returns the index position of a value in the array. Returns 1 if the value is not in the array.

$.grep () returns an element in the array that conforms to a standard.

$.extend () merges multiple objects into the first object.

$.makearray () Converts the object to an array.

$.type () determines the category of the object (function object, Date object, array object, regular object, and so on).

$.isarray () Determines whether a parameter is an array.

$.isemptyobject () Determines whether an object is empty (does not contain any attributes).

$.isfunction () Determines whether a parameter is a function.

$.isplainobject () Determines whether a parameter is an object created with "{}" or "New object".

$.support () Determines whether a feature is supported by the browser.

Eight, event operation

The seven idea of jquery design is to bind events directly above the page elements.

$ (' P '). Click (function () {

Alert (' Hello ');

});

Currently, jquery supports the following events mainly:

. blur ()   form element loses focus.

. Change ()   The value of the form element changes

. Click ()   mouse clicks

. DblClick ()   Mouse double-click

. focus ()   The form element obtains the focus

. Focusin ()   child elements get focus

. Focusout ()   child element loses focus

. Hover ()   both MouseEnter and Mousel The Eave event specifies the handler function

. KeyDown ()   Press the keyboard (for a long time, return only one event)

. KeyPress ()   Press the keyboard (long-time keys will return multiple events)

. KeyUp ()   release keyboard

. Load ()   element loaded

. MouseDown ()   Press mouse

. MouseEnter ()   Mouse entry (no triggering of child elements)

. MouseLeave ()   Mouse away (leave child element not triggered)

. MouseMove ()   mouse move inside element

. mouseout ()   mouse away (also triggered by leaving child elements) /p>

. MouseOver ()   Mouse entry (enter child element also triggered)

. MouseUp ()   release mouse

. Ready ()  dom loading complete

. Resiz The size of the E ()   browser window changes

. Scroll ()   The position of the scrollbar changes

. Select ()   user selects the contents of the text box

. Submit ()   User Submit a form

. Toggle ()   Run multiple functions

According to the number of mouse clicks. Unload ()   user leaves page

These events are a handy way of. Bind () inside jquery. Using. Bind () gives you more flexibility in controlling events, such as binding the same function for multiple events:

$ (' input '). Bind (

' Click Change ',//bind both click and change events

function () {

Alert (' Hello ');

}

);

Sometimes you just want the event to run once, so you can use the. One () method.

$ ("P"). One ("click", Function () {

Alert ("Hello"); Run only once, and subsequent clicks will not run

});

. Unbind () is used to unbind events.

$ (' P '). Unbind (' click ');

All event handlers can accept an event object as an argument, such as E in the following example:

$ ("P"). Click (function (e) {

alert (E.type); "Click"

});

This event object has some useful properties and methods:

Event.pagex the horizontal distance of the mouse from the upper-left corner of the page when the event occurs

Event.pagey the vertical distance of the mouse from the upper-left corner of the page when the event occurs

The type of the Event.type event (for example, click)

Event.which which key was pressed

Event.data bind the data to the event object, and then pass in the event handler function

Page elements targeted by the Event.target event

Event.preventdefault () The default behavior of blocking events (such as clicking on a link that automatically opens a new page)

Event.stoppropagation () Stop event bubbles to the upper element

In the event handler, you can use the This keyword to return the DOM element that the event targets:

$ (' a '). Click (function (e) {

if ($ (this). attr (' href '). Match (' evil ')} {//If it is identified as a harmful link

E.preventdefault (); Block Open

$ (this). addclass (' evil '); Plus the class that represents the harmful

}

});

There are two ways to automatically trigger an event. One is to use the event function directly, and the other is to use. Trigger () or. Triggerhandler ().

$ (' a '). Click ();

$ (' a '). Trigger (' click ');

IX. Special Effects

Finally, jquery allows objects to render some special effects.

$ (' H1 '). Show (); Show a H1 title

The usual special effects are as follows:

. FadeIn () Fade in

. FadeOut () Fade out

. FadeTo () Adjust transparency

. Hide () hidden elements

. Show () display elements

. Slidedown () expand Down

. Slideup () Roll up

. Slidetoggle () Expand or roll up an element in turn

. Toggle () Show or hide an element in turn

Except for. Show () and. Hide (), the default execution time for all other effects is 400ms (milliseconds), but you can change this setting.

$ (' H1 '). FadeIn (300); Fade in 300 milliseconds

$ (' H1 '). FadeOut (' slow '); Slowly fade out

After the effect finishes, you can specify that a function be executed.

$ (' P '). FadeOut, Function () {$ (this). Remove ();});

More complex effects can be customized with. Animate ().

$ (' div '). Animate (

{

Left: "+=50",//Keep moving right

opacity:0.25//Specify Transparency

},

300,//Duration

function () {alert (' done! ');}//Callback function

);

. Stop () and. Delay () are used to stop or delay the execution of the effect.

$.fx.off if set to true, all page effects are turned off.

Finish