Jquery --- basic tag, jquery --- tag

Jquery --- basic tag, jquery --- tag
You thinkJqueryWhat are the benefits?

• JQuery is a lightweight javascript framework.
• Powerful Selector
• Excellent DOM operation Encapsulation
• Reliable Event Processing Mechanism
• Comprehensive ajax Encapsulation
• Excellent browser compatibility
• Supports chain operations and implicit Iteration
• Supports a wide range of plug-ins
• Jquery documentation is also very rich

JqueryObject and DomHow to convert objects?

1. Convert jquery to DOM object:
A jQuery object is an array object. You can use [index] to obtain a DOM object and get a DOM object through get [index.
2. convert a DOM object to a jQuery object:
$ (DOM object)

The following describes the features:

1. Select webpage Elements

The basic design and usage of jQuery is to "select a webpage element and perform some operations on it ". This is the fundamental feature that distinguishes it from other function libraries.

The first step of using jQuery is to put a selection expression into the constructor jQuery () (abbreviated as $) and then get the selected element.

The selection expression can be a CSS selector:

$ (Document) // select the entire document object $ ('# myid') // select the webpage element whose ID is myId $ ('div. myclass') // select the div element $ ('input [name = first] ') whose class is myClass. // select the input element whose name attribute is equal to first.

It can also be a jQuery-specific expression:

$ ('A: first ') // select the first a element in the webpage $ ('tr: odd') // select an odd row of the table $ (' # myForm: input ') // select the input element $ ('div: visable') in the form // select the visible div element $ ('div: gt (2 )') // select all div elements, except the first three $ ('div: animate') // select the currently animated div Element

Ii. Change the result set

If multiple elements are selected, jQuery provides a filter to narrow down the result set:

$ ('Div '). has ('P'); // select the div element containing the p element $ ('div '). not ('. myclass'); // select a div element whose class is not equal to myClass $ ('div '). filter ('. myclass'); // select the div element whose class is equal to myClass $ ('div '). first (); // select the first 1st div elements $ ('div '). eq (5); // select 6th div elements

Sometimes, we need to start from the result set and move it to a nearby element. jQuery also provides the moving method on the DOM tree:

$ ('Div '). next ('P'); // select the first p element after the div element $ ('div '). parent (); // select the parent element of the div element $ ('div '). closest ('form'); // select the form parent element closest to the div $ ('div '). children (); // select all child elements of the div $ ('div '). siblings (); // select the same level element of the div

Iii. Chain Operations

After you select a webpage element, you can perform some operations on it.

JQuery allows all operations to be connected and written in the form of a chain. For example:

$('div').find('h3').eq(2).html('Hello');

It is as follows:

$ ('Div ') // locate the div element. find ('h3 ') // select the h3 element. eq (2) // select the 3rd h3element. html ('hello'); // change the content to "Hello ".

This is jQuery's most commendable and convenient feature. The principle is that each step of jQuery operations returns a jQuery object, so different operations can be connected together.

JQuery also provides the. end () method, so that the result set can be taken back one step:

Certificate ('div'0000.find('h3'0000.eq(2).html ('hello '). end () // return to the step of Selecting All h3 elements. eq (0) // select the first h3element .html ('World'); // change its content to World

Iv. Operation of elements: value and value assignment

The most common requirement for webpage elements is to obtain their values or assign values to them.

JQuery uses the same function to complete values (getter) and values (setter ). Whether it is a value or a value is determined by the function parameters.

Parameters ('h1'{.html (); // html(if there is no problem, obtain the h1value ('h1'{.html ('hello'); // html () has the parameter "Hello", indicating that h1 is assigned a value

Common values and value assignment functions are as follows:

. Html () retrieves or sets html content. extract or set text content. attr () retrieves or sets the value of an attribute. width () is used to retrieve or set the width of an element. height () retrieves or sets the height of an element. val () retrieves the value of a form element.

Note that if the result set contains multiple elements, all the elements in the result set are assigned values, only the value of the first element (. with the exception of text (), It extracts the text content of all elements ).

5. Element operations: Move

There are two methods to move the selected element: one is to move the element directly, and the other is to move other elements so that the target element can reach the desired position.

Suppose we have selected a div element, and we need to move it to the end of the p element.

The first method is to use. 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 two methods have the same effect. The only difference seems to be the difference in the operational perspective. But in fact, they have a major difference, that is, they return different elements. The first method returns the div element, and the second method returns the p element. You can select which method to use as needed.

There are four pairs of operations using this mode:

. InsertAfter () and. after (): inserts an element from the end of an existing element. insertBefore () and. before (): inserts an element from the front outside the existing element. appendTo () and. append (): inserts an element from the end of an existing element. prependTo () and. prepend (): inserts an element from the front of an existing element.

Vi. Operations on elements: copying, deleting, and creating

Use. clone () to copy elements ().

Use. remove () and. detach () to delete elements (). The difference between the two lies in that the former does not retain the event of the deleted element, and the latter retains it, which is useful for re-inserting documents.

Use. empty () to clear the element content (but not delete it ().

The method for creating a new element is very simple. Just pass 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

In addition to operations on selected elements, jQuery also provides some tool methods (utility) that can be directly used without selecting elements.

If you understand the inheritance principle of the Javascript language, you can understand the essence of the tool method. It is a method defined on the jQuery constructor, that is, jQuery. method (), so it can be used directly. The methods for operating elements are defined on the prototype object of the constructor, that is, jQuery. prototype. method (). Therefore, instances (I .e. selected elements) must be generated for use. If you don't understand the difference, there is no problem. You just need to understand the tool method as a method that can be directly used just like a javascript native function.

Common tool methods include:

$. Trim () removes spaces at both ends of the string. $. Each () traverses an array or object. $. InArray () returns the index position of a value in the array. If the value is not in the array,-1 is returned. $. Grep () returns elements that conform to a certain standard in the array. $. Extend () combines multiple objects into the first object. $. MakeArray () converts an object to an array. $. Type () determines the object category (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 null (excluding 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 the browser supports a certain feature.

　 8. Event operations

JQuery can bind events to webpage elements. Run corresponding functions based on different events.

$('p').click(function(){alert('Hello');});

Currently, jQuery mainly supports the following events:

. Blur () form elements lose focus .. The value of the change () form element changes. click () and click. double-click dblclick. focus () form elements get focus. the focusin () sub-element obtains the focus. the focusout () sub-element loses focus. hover () specifies the processing function for both the mouseenter and mouseleave events. keydown () press the keyboard (for a long time, only one event is returned ). keypress () press the keyboard (a long time key will return multiple events ). keyup () loosen the keyboard. load () element loaded. mousedown (): click the mouse. mouseenter () the mouse enters (entering the child element is not triggered ). mouseleave () move the mouse away (leaving the child element is not triggered ). mousemove () move the mouse inside the element. mouseout () move the mouse away (also triggered when the child element is left ). mouseover () the mouse enters (the sub-element is also triggered ). mouseup () loosen the mouse. ready () DOM loading is complete. the size of the resize () browser window is changed. the position of the scroll () scroll bar changes. select () content in the text box selected by the user. submit () User submission form. toggle () runs multiple functions in sequence based on the number of mouse clicks. unload () The user leaves the page

These events are within jQuery, and they are convenient. bind. You can use. bind () to control events more flexibly. For example, you can bind the same function to multiple events:

$ ('Input'). bind ('click change', // bind the click and change event function () {alert ('hello ');});

Sometimes, you only want to run the event once. You can use the. one () method.

$ ("P"). one ("click", function () {alert ("Hello"); // only run once, and will not run later });

. Unbind () is used to unbind events.

$('p').unbind('click');

All event processing functions can take an event object as a parameter, such as e in the following example:

$("p").click(function(e) {　　　　alert(e.type); // "click"});

This event object has some useful attributes and methods:

Event. when a pageX event occurs, the cursor is horizontally located at the upper left corner of the page. when a pageY event occurs, the cursor is perpendicular to the event in the upper left corner of the page. type event type (such as click) event. which key event is pressed by which. data is bound to the object, and then the event is uploaded to the webpage element event for processing the event.tar get event. preventDefault () blocks the default action of an event (for example, clicking a link will automatically open a new page) event. stopPropagation () Stop the event and bubble up the Layer Element

In the event processing function, you can use the this keyword to return the DOM elements targeted by the event.

$ ('A '). click (function () {if ($ (this ). attr ('href '). match ('evil ') {// if it is identified as harmful link e. preventDefault (); // block opening $ (this ). addClass ('evil '); // Add harmful class }});

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

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

9. Special Effects

JQuery allows objects to present certain special effects.

$('H1 '). show (); // displays an h1 title

Common special effects are as follows:

. FadeIn () fades in. fadeOut () fade out. fadeTo () adjusts transparency. hide () hides elements. show () display element. slideDown () to expand down. slideUp () is rolled up. slideToggle () expands or rolls up an element in sequence. toggle () displays or hides an element in sequence.

Except for. show () and. hide (), the default execution time of all other effects is 400 ms (ms), but you can change this setting.

$('H1 '). fadeIn (300); // fade in within 300 milliseconds $ ('h1'). fadeOut ('low'); // fade out slowly

After the special effect ends, you can specify to execute a function.

$('p').fadeOut(300, function() { $(this).remove(); });

You can use. animate () to customize more complex effects.

$ ('Div '). animate ({left: "+ = 50", // shift right continuously opacity: 0.25 // specify transparency}, 300, // duration function () {alert ('done! ');} // Callback function );

. Stop () and. delay () are used to stop or delay the execution of special effects.

$. Fx. off if set to true, disable all webpage effects.