Jquery learning summary (super detailed)
- 2020-03-30 03:51:57
- OfStack
| window.onload | $(document).ready() | |
|---|---|---|
| Execution time | You must wait for all the content in the page (including the images) to load before you can execute | All on the web DOM Execute after the structure is drawn, maybe DOM Elements associated with things are not loaded |
| Write the number | Unable to write more than one code at a time, the following code cannot be executed correctly: window.onload =function({alert("test1");}window.onload = function(){alert("test2");} The result is just output "test2" | Can write more than one at a time |
| Simplify the writing | There is no | $(document).ready(function(){}); I could just write it as $(function(){}); |
One, select web elements
The basic design and usage of jQuery is "select a web element and do something with it." This is what distinguishes it from other libraries.
The first step in using jQuery is often to put a selection expression into the constructor jQuery() (short for $) and get the selected element.
The selection expression can be a CSS selector:
$(document)// select the entire document object & PI;
$('#myId')// select the web element with ID myId
$(' div.myclass ')// div element
$('input[name=first]')
It can also be a jquery-specific expression:
$('a:first')// select the first a element
$('tr:odd')// select the odd row of the form
$('#myForm :input')// select the input element
$('div:visible') // select the visible div element
$('div:gt(2)')// selects all div elements except the first three
$('div:animated')// select the div element that is currently animated;
Change the result set
If multiple elements are selected, jQuery provides filters to shrink the result set:
* $(' div.) from the (" p "); // select the div element that contains the p element;
* $(' div.) not (' myClass '); // choose the div element that class is not equal to myClass
* $(' div '). The filter (' myClass '); // select the div element class = myClass;
* $(' div '). The first (); // select the first div element
* $(' div '). Eq (5); // select the sixth div element
Sometimes we need to move from the result set to the relevant elements nearby. JQuery also provides a way to move around the DOM tree:
$(' div '). Next (" p "); // select the first p element after the div element
$(' div '). The parent (); // selects the parent element of the div element
$(' div '). The closest (' form '); // select the form parent element closest to the div & cake;
$(' div '). The children (); // selects all the child elements of div
$(' div '). Siblings (); // selects the sibling element of div
Chain operation
When a web element is selected, you can do something with it.
JQuery allows all operations to be linked together and written in a chain, such as:
$(' div '). The find (' h3). Eq. (2) the HTML (" Hello ");
Broken down, it looks like this:
1. $(' div ') // find the div element & cake;
2.. find (' h3) // select the h3 element
3. Eq. (2) // choose the third h3 element
4. HTML (' Hello '); // change its content to Hello ;
This is the most commendable and convenient feature of jQuery. The idea is that each jQuery operation returns a jQuery object, so the different operations can be linked together.
JQuery also provides the. End () method, which allows the result set to take a step back:
1. $(' div ')
2.. find (' h3)
3. Eq. (2)
4.. HTML (' Hello ')
5.. End ()// back to the step where all the h3 elements are selected
Eq (0)// select the first h3 element & cake;
7.. HTML (" World "); // change its content to World ;
.end() : back to the last "destructive" operation. If there is no previous destructive operation, an empty set is returned. Destructiveness is anything that changes the matching jQuery element.
The sample
Description: select all p elements, find and select the span child element, and then go back to select the p element
HTML code :
<p><span>Hello</span>,how are you?</p>
jQuery code :
$("p").find("span").end()
The results of :
<p><span>Hello</span> how are you?</p>
- four, the operation of elements: value and assignment
The most common requirement for manipulating web elements is to get their values or to assign them.
JQuery USES the same function to perform both the getter and the setter. Whether to evaluate or assign depends on the parameters of the function.
$(' h1). The HTML (); // HTML () has no arguments, indicating that the value of h1 is fetched
$(' h1). The HTML (" Hello "); // HTML () has the parameter Hello, which means to assign value & PI to h1;
The common value and assignment functions are as follows:
1.. HTML () returns or sets the content of the selected element (inner HTML)
2.. Text () takes out or sets the text & cake;
Attr () takes out or sets the value of an attribute & PI;
4.. Width () takes or sets the width & width of an element;
5.. Height () takes out or sets the height of an element.
Val () takes out or sets the HTML content takes out the value & PI of a form element;
Note that if the result set contains more than one element, all of them will be assigned values. When evaluated, it takes out the value of only the first element (.text(), which takes out the text contents of all elements).
Five, element operation: move
.insertafter (), move the div element after the p element:
$(' div '). InsertAfter (" p ");
.after(), put the p element before the div element:
$(" p "). After (' div ');
There are four pairs of operations using this pattern
1.. InsertAfter () and. After() : on the outside of the existing element, insert the element from behind
2. InsertBefore () and. Before() : on the outside of the existing element, insert the element from the front
3. AppendTo () and. Append () : inside an existing element, insert the element & PI from the back;
4.. prependTo () and the prepend () : inside an existing element, insert the element from the front
1. After () :
Description:
Insert a jQuery object (similar to an array of DOM elements) after all the paragraphs.
HTML code :
<b>Hello</b><p>I would like to say: </p>
jQuery code :
$("p").after( $("b") );
The results of :
<p>I would like to say: </p><b>Hello</b>
2. InsertAfter () :
Description:
Insert all paragraphs after an element. With $(" # foo ".) after (" p ") is the same
HTML code :
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery code :
$("p").insertAfter("#foo");
The results of :
<div id="foo">Hello</div><p>I would like to say: </p>
3. Before () :
Description:
Insert a jQuery object (similar to an array of DOM elements) before all paragraphs.
HTML code :
<p>I would like to say: </p><b>Hello</b>
jQuery code :
$("p").before( $("b") );
The results of :
<b>Hello</b><p>I would like to say: </p>
4. Append () :
Description: appends HTML tags to all paragraphs.
HTML code :
<p>I would like to say: </p>
jQuery code :
$("p").append("<b>Hello</b>");
The results of :
<p>I would like to say: <b>Hello</b></p>
5. AppendTo ()
Description: new paragraph with div and a class
HTML code :
<div></div><div></div>
jQuery code :
$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
The results of :
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>
6. The prepend ()
Description: prefixes a jQuery object (similar to an array of DOM elements) to all paragraphs.
HTML code :
<p>I would like to say: </p><b>Hello</b>
jQuery code :
$("p").prepend( $("b") );
The results of :
<p><b>Hello</b>I would like to say: </p>
7. PrependTo ()
Description: appends all paragraphs to an element with an ID value of foo.
HTML code :
<p>I would like to say: </p><div id="foo"></div>
jQuery code :
$("p").prependTo("#foo");
The results of :
<div id="foo"><p>I would like to say: </p></div>
** six **, element operations: copy, delete and create
Copy the element using.clone()
Remove () and.detach(). The difference between the two is that the former does not retain the event of the deleted element, while the latter does, facilitating the use of the reinserted document.
Empty the element (but not delete it) using.empty().
Creating a new element is as simple as passing the new element directly into jQuery's constructor:
* $('<p>Hello</p>');
* $('<li class="new">new list item</li>');
* $('ul').append('<li>list item</li>');
Seven, tools and methods
In addition to working with selected elements, jQuery provides utility methods that can be used without selecting an element.
Common tools and methods are as follows:
Eight, event operation
JQuery can bind events to web elements. Depending on the event, run the corresponding function.
$('p').click(function(){
alert('Hello');
});
.blur() form elements lose focus.
. Change () the value of the form element changes
Click () click
. Dblclick ()
. Focus () form element gets focus
. Focusin () gets focus
. Focusout () child element loses focus
Hover () specifies both the mouseenter and mouseleave events handler
Keydown () press the keyboard (for a long time, only one event is returned)
. Keypress () pressing the keyboard (a long press returns multiple events)
. Keyup () releases the keyboard
The.load() element is loaded
. Mousedown () mousedown()
. Mouseenter () mouseenter(entry child does not trigger)
. Mouseleave () mouseleave() mouseleave() mouseleave() mouseleave() mouseleave() mouseleave() mouseleave()
. Mousemove () mouse moves inside the element & sponge;
. Mouseout () mouseout() mouseout() mouseout();
. Mouseover () mouseover() mouseover() mouseover()
. Mouseup () releases the mouse & cake;
Ready () DOM is loaded & released;
. Resize () browser window size changes
The position of the scroll() bar changes
Select () user selects the text box
Submit () user submits form
. Toggle () runs several functions & PI according to the number of mouse clicks;
Unload ()
User leaves page
All of these events are inside jQuery, a convenient way to bind(). Using.bind() gives you more flexibility in controlling events, such as binding the same function to multiple events:
$('input').bind(
'click change' . //Bind both the click and change events
function(){
alert('Hello');
}
);
Sometimes you only 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:
The horizontal distance of the mouse from the top left corner of the page when the event.pagex event occurs
When the event.pagey event occurs, the mouse is perpendicular to the top left corner of the page
Type of event.type event (such as click)
Which key was pressed by event.which
Event.data binds the data on the event object and passes in the event handler
The page element for which the event.target event is directed
Event.preventdefault () prevents the default behavior of events (such as clicking a link to automatically open a new page)
The event.stoppropagation () stop event bubbles to the upper element
In the event handler, you can use this keyword to return the DOM element for which the event is directed:
$('a').click(function(){
if ($(this).attr('href').match('evil')){//If confirmed as a harmful link
e.preventDefault(); //Stop to open
$(this).addClass('evil'); //Plus the harmful class
}
});
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');
Special effects
JQuery allows objects to render certain special effects.
$(' h1). The show (); // displays an h1 heading
The usual special effects are as follows:
Fade in fadeIn ()
The fadeOut () out
.fadeto () adjusts transparency
.hide() hides the element
.show() displays the element
. SlideDown ()
SlideUp () slideUp
. SlideToggle () expands or rolls up an element in turn
.toggle() shows or hides an element in turn
With the exception of.show() and.hide(), all other effects have a default execution time of 400ms(ms), but you can change this setting.
* $(' h1). FadeIn (300); // fade in within 300 milliseconds
* $(' h1). FadeOut (" missile "); // slowly fade out
After the effect is over, you can specify that a function be executed.
$('p').fadeOut(300, function(){$(this).remove(); });
For more complex effects, use. Animate () to customize.
$('div').animate(
{
left : "+=50" . //Constantly moves to the right
opacity : 0.25 //Specified transparency
},
300,//The duration of the
function(){ alert('done!'); }//The callback function
);
.stop() and.delay() are used to stop or delay the execution of a special effect.
If set to true, turn off all web effects.
Several common filter selectors:
Filter () : filters out the collection of elements that match the specified expression. This method is used to narrow the range of matches. Separate multiple expressions with commas
Description: reserve the elements that do not contain ol in the child elements.
HTML code:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>JQuery code:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
Results:
<p>How are you?</p> Silce () : selects a matching subset
Description: select the first p element
HTML code:
<p>Hello</p><p>cruel</p><p>World</p>JQuery code:
$("p").slice(0, 1).wrapInner("<b></b>");Results:
<p><b>Hello</b></p>
Subsequent updates...
How to use JQuery CDN? It is recommended to use the official CDN node with the following code:
<script src="//code.jquery.com/jquery-1.11.0.min.js"> </script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>