Classic summary of common Jquery methods
Attribute:
$("p").addClass(style type defined in css); Add to an element Style
$("img").attr({src:"test.jpg",alt:"test Image"}); Add attributes/values to an element, the parameter is map
$("img ").attr("src","test.jpg"); Add attributes/values to an element
$("img").attr("title", function() { return this.src }) ; Add attributes/values to an element
$("Element Name").html(); Get the content (element, text, etc.) within the element
$("Element Name").html("
new stuff"); Set content for an element
$("Element Name").removeAttr("Attribute Name") Remove the specified attribute and the value of the attribute from an element
$ ("Element Name").removeClass("class") Remove the specified style from an element
$("Element Name").text(); Get the text of the element
$("Element Name") .text(value); Set the text value of the element to value
$("element name").toggleClass(class) Cancel when the element exists in the style in the parameter. If it does not exist, set this style
$("input element name").val(); Get the value of the input element
$("input element name").val(value); Set the value of the input element to value
Manipulation: $("Element Name").after(content); Add content after the matching element
$("Element Name").append(content); Insert content as the content of the element into the After the element
$("element name").appendTo(content); After the content, the element
$("element name").before(content); is opposite to the after method
$(" Element name").clone(Boolean expression) When the Boolean expression is true, clone the element (when there is no parameter, it is treated as true)
$("Element name").empty() Change the content of the element Set to empty
$("Element name").insertAfter(content); Insert the element after content
$("Element name").insertBefore(content); Insert the element before content
$("Element").prepend(content); Use content as part of the element and put it at the front of the element
$("Element").prependTo(content); Use this element as part of content Part, put at the front of the content
$("element").remove(); Remove all specified elements
$("element").remove("exp"); Remove all elements containing exp
$("element").wrap("html"); Use html to surround the element
$("element").wrap(element); Use element to surround the element
Traversing : add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter( expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems )
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core: $(html) .appendTo("body") is equivalent to writing a piece of html code in the body
$(elems) to get an element on the DOM
$(function(){……..}); to execute a function
$("div > p").css("border", "1px solid gray"); Find the child nodes p of all divs and add styles
$("input:radio", document.forms[ 0]) Find all radio buttons in the first form of the current page
$.extend(prop) prop is a jquery object,
example:
jQuery.extend({
min : function(a, b) { return a max: function(a, b) { return a > b ? a : b; }
});
jQuery(expression, [context]) —$(expression, [context]); By default, $() queries the DOM elements in the current HTML document.
each( callback ) uses each matched element as the context to execute a function
Example: 1
$("span").click(function){
$("li ").each(function(){
$(this).toggleClass("example");
});
});
Example: 2
$("button" ).click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" index);
return false;
}
});
});
jQuery Event: ready(fn); $(document ).ready() Note that there is no onload event in the body, otherwise the function cannot be executed. In each page, there can be
many functions loaded and executed, which are executed in the order of fn.
bind( type, [data], fn ) binds one or more event handler functions to a specific event (like click) of each matching element. Possible event attributes are: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) Bind one or more event handler functions to a specific event (like click) of each matching element. This event handler will only be executed once on each
object. Other rules are the same as bind() function.
trigger( type, [data] ) triggers a certain type of event on each matching element.
triggerHandler( type, [data] ) This specific method will trigger a specific event on an element (specify an event type) and cancel the browser's default action for this event.
unbind( [type], [ data] ) unbinding, removing the bound event from each matching element.
$("p").unbind() removes all bound events on all paragraphs
$("p").unbind( "click" ) removes click events on all paragraphs
hover(over, out) Over and out are both methods. When the mouse moves over a matching element, the first specified function will be triggered. When the mouse moves out of this element, the specified second function will be triggered.
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);
toggle( fn, fn ) If a matching element is clicked, the specified first function is triggered. When the same element is clicked again element, the specified second function is triggered.
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);
Element event list description Note: The parameters of a function without parameters are optional fn. jQuery does not support the reset event of the form element.
Event description supports elements or objects
blur( ) The element loses focus a, input, textarea, button, select, label, map, area
change( ) The user changes the content of the field input, textarea, select
click( ) The mouse clicks on almost all elements of an object
dblclick( ) The mouse double-clicks on almost all elements of an object
error( ) When an error occurs when loading a document or image window, img
focus ( ) The element gets focus a, input, textarea, button, select, label, map, area
keydown( ) A certain keyboard key is pressed Almost all elements
keypress( ) A certain keyboard key is pressed Press or hold down almost all elements
keyup( ) A certain keyboard key is released Almost all elements
load( fn ) A certain page or image is loaded window, img
mousedown( fn ) Some The mouse button is pressed on almost all elements
mousemove(fn) The mouse is moved on almost all elements
mouseout(fn) The mouse is moved from an element on almost all elements
mouseover(fn) The mouse is moved on Almost all elements above the element
mouseup( fn ) A mouse button is released Almost all elements
resize( fn ) The window or frame is resized window, iframe, frame
scroll( fn ) Scroll the document When the visible part is window
select( ) the text is selected document, input, textarea
submit( ) the submit button is clicked form
unload( fn ) the user exits the page window
JQuery Ajax method description: load( url, [data], [callback] ) loads a remote HTML content into a DOM node.
$("#feeds").load("feeds.html"); Load the feeds.html file into the div with the id of feeds
$("#feeds").load("feeds. php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get( url, [data], [callback] ) Use GET to request a page.
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " data);
}) ;
jQuery.getJSON( url, [data], [callback] ) Use GET to request JSON data.
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " json.users[3].name );
});
jQuery.getScript( url, [callback] ) Use GET to request a javascript file and execute it.
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) Use POST to request a page.
ajaxComplete( callback ) Execute a function when an AJAX request ends. This is an Ajax event
$("#msg").ajaxComplete(function(request, settings){
$(this).append("
Request Complete.");
});
ajaxError( callback ) When an AJAX request fails, execute a function. This is an Ajax event
$("#msg").ajaxError(function(request, settings){
$(this).append("
Error requesting page " settings.url " ");
});
ajaxSend( callback ) Execute a function when an AJAX request is sent. This is an Ajax event
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("
"});
ajaxStart( callback ) Execute a function when an AJAX request starts but has not yet been activated. This is an Ajax event
Display loading information when the AJAX request is started (and not yet activated)
$("#loading").ajaxStart(function(){
$(this).show() ;
});
ajaxStop( callback ) Execute a function when all AJAX stops. This is an Ajax event
Hide loading information when all AJAX requests are stopped.
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) When an AJAX request is successful Once completed, execute a function. This is an Ajax event
Display information when an AJAX request completes successfully.
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("
Successful Request!");
}) ;
jQuery.ajaxSetup( options ) Make global settings for all AJAX requests. See the $.ajax function to get all option information.
Set default global AJAX request options.
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”
});
$.ajax({ data: myData });
serialize( ) concatenates a set of input elements by name and value. Implemented the correct sequence of form elements
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
serializeArray( ) concatenates all forms and form elements (similar to the .serialize() method), but returns a JSON data format.
Get a set of values from the form and display them
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
JQuery Effects method description show() Shows hidden matching elements.
show(speed, [callback]) displays all matching elements in an elegant animation and optionally triggers a callback function when the display is complete.
hide( ) hides all matching elements.
hide( speed, [callback] ) Hides all matching elements with elegant animation and optionally triggers a callback function after display is completed
toggle( ) Toggles the visible state of the element. If the element is visible, switch it to hidden; if the element is hidden,
switches it to visible.
slideDown( speed, [callback] ) dynamically displays all matching elements through height changes (increasing downward), and optionally triggers a callback function
after the display is completed. This animation effect only adjusts the height of the element, allowing the matching elements to be displayed in a
"sliding" manner.
slideUp( speed, [callback] ) dynamically hides all matching elements by changing their height (decreasing upward), optionally
triggering a callback function after hiding is complete. This animation effect only adjusts the height of the element, allowing the matching element to be hidden by "sliding"
.
slideToggle( speed, [callback] ) toggle the visibility of all matching elements via a height change, and optionally triggers a callback function when the toggle is complete. This animation effect only adjusts the height of the element, allowing the matching element to be hidden or displayed in a "sliding" manner.
fadeIn( speed, [callback] ) fades in all matching elements by changing the opacity, and optionally triggers a callback function after the animation is completed. This animation only adjusts the opacity of the element, which means that the
height and width of all matching elements will not change.
fadeOut( speed, [callback] ) fades out all matching elements by changing the opacity, and optionally triggers a callback function after the animation is completed. This animation only adjusts the opacity of the element, which means that the
height and width of all matching elements will not change.
fadeTo( speed, opacity, [callback] ) progressively adjusts the opacity of all matching elements to the specified opacity, and optionally triggers a callback function after the animation completes
. This animation only adjusts the opacity of the element, which means that the height and width of all
matching elements will not change.
stop( ) stops the currently running animation of all matching elements. If there are animations queued, they will start immediately.
queue() Gets a reference to the animation sequence of the first matching element (returns an array whose content is a function)
queue(callback) Adds an executable function at the end of the event sequence of each matching element, as The event function of this element
queue( queue ) replaces the original animation sequence of all matching elements with a new animation sequence
dequeue( ) executes and removes the animation at the front of the animation sequence
animate( params, [duration ], [easing], [callback] ) Functions for creating custom animations.
animate( params, options ) Another way to create custom animations. The function is the same as above.
JQuery Traversing method description
eq(index) Gets an element at a specified position from the matched element collection, index starts from 0
filter(expr) Returns a match with the specified expression For a collection of elements, you can use "," to separate multiple expr, which is used to implement multiple condition filtering
filter( fn ) uses a special function as a filtering condition to remove unmatched elements in the set.
is(expr) uses an expression to check the currently selected set of elements and returns true if at least one element matches the given
expression.
map(callback) uses the callback method to convert a set of elements in the jQuery object to their values, and then adds them to a jQuery array.
not(expr) Removes elements matching the specified expression from the set of matched elements.
slice(start, [end]) Gets a subset from the set of matching elements, the same as the built-in slice method of the array.
add(expr) adds elements matching the expression to the jQuery object.
children( [expr] ) Gets an element set containing all child elements of each element in the matched element set. The optional filter
will cause this method to match only matching elements (only element nodes, not text nodes).
contents( ) obtains a set containing all descendant nodes of each element in the matching element set (only element nodes are included, excluding
text nodes). If the element is an iframe, obtain the document element
find(expr) searches for all elements matching the specified expression.
next( [expr] ) Gets an element set containing the immediately following sibling elements of each element in the matched element set.
nextAll( [expr] ) Gets an element set that contains all subsequent sibling elements of each element in the matched element set
parent( [expr] ) Gets an element that contains the unique parent element of all matching elements gather.
parents( [expr] ) Gets a set of elements containing the unique ancestor elements of all matching elements (excluding the root element).
prev([expr]) Gets an element set containing the immediately preceding sibling element of each element in the matched element set.
prevAll( [expr] ) Gets an element set containing all previous sibling elements of each element in the matched element set.
siblings( [expr] ) Gets an element set containing all sibling elements of each element in the matching element set.
andSelf() Add the previous matching element set to the current set
Get all div elements and p elements among them, and add border class attributes.Get the p element in all div elements,
Add background class attribute
$("div").find("p").andSelf().addClass("border");
$(" div").find("p").addClass("background");
end( ) ends the current operation and returns to the previous operation of the current operation
to find the set of span elements among all p elements. Then return the p element collection and add the css attribute
$("p").find("span").end().css("border", “2px red solid”);
JQuery Selectors method description
Basic selector $("#myDiv") matches the only element with this id value
$("div") matches the specified name All elements
$(".myClass") Matches all elements with this class style value
$("*") Matches all elements
$("div,span,p.myClass") Union all Matching selector
Cascading selector
$("form input") Descendant selector, selects all descendant nodes of ancestor
$("#main > *") Child selector, selects all of parent Child node
$("label input") Proximity selector, selects the next proximal node of prev
$("#prev ~ div") Sibling selector, selects all sibling nodes of prev
Basic filtering The selector
$("tr:first") matches the first selected element
$("tr:last") matches the last selected element
$("input:not(:checked) span") filters out all elements matching the selector from the original element collection (here is a temporary selector)
$("tr:even") matches all elements at even positions in the collection (starting from 0)
$("tr:odd") Matches all elements at odd positions in the set (starting from 0)
$("td:eq(2)") Matches elements at the specified position in the set (starting from 0)
$("td:gt(4)") Matches all elements after the specified position in the set (starting from 0)
$("td:gl(4)") Matches all elements before the specified position in the set ( Starting from 0)
$(":header") matches all headers
$("div:animated") matches all elements with running animations
content filter selector
$("div :contains('John')") Matches all elements that contain the specified text
$("td:empty") Matches all empty elements (elements containing only text are not counted as empty elements)
$("div: has(p)") matches all elements containing at least one selector from the original element set again
$("td:parent") matches all elements that are not empty (elements containing text are also counted)
$("div:hidden") matches all hidden elements, including hidden fields of the form
$("div:visible") matches all visible elements
attribute filter selector
$("div [id]") matches all elements with the specified attribute
$("input[name='newsletter']") matches all elements with the specified attribute value
$("input[name!='newsletter' ]") Matches all elements that do not have the specified attribute value
$("input[name^='news']") Matches all elements with the specified attribute value starting with value
$("input[name$= 'letter']") Matches all elements whose specified attribute value ends with value
$("input[name*='man']") Matches all elements whose specified attribute value contains value character
$("input [id][name$='man']") matches all elements that match multiple selectors at the same time
Child element filter selector
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), matches the nth child element of the parent element
$("ul li:nth-child(3n 1)")
$ ("div span:first-child") matches the first child element of the parent element
$("div span:last-child") matches the last child element of the parent element
$("div button:only -child") matches the only child element of the parent element
form element selector
$(":input") matches all form input elements, including all types of input, textarea, select and button
$(":text") matches all input elements of type text
$(":password") matches all input elements of type password
$(":radio") matches all input elements of type radio Element
$(":checkbox") matches all input elements of type checkbox
$(":submit") matches all input elements of type submit
$(":image") matches all types For the input element of image
$(":reset") matches all input elements of type reset
$(":button") matches all input elements of type button
$(":file" ) Matches all input elements of type file
$(":hidden") Matches all input elements of type hidden or hidden fields of the form
Form element filter selector
$(":enabled") Matches all operable form elements
$(":disabled") Matches all inoperable form elements
$(":checked") Matches all clicked elements
$("select option: selected") matches all selected elements
JQuery CSS method description
css( name ) accesses the style attribute of the first matched element.
css( properties ) Sets a "name/value pair" object as the style property of all matching elements.
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “#0028f4”
}
$(this).css(cssObj) ;
});
css( name, value ) Sets the value of a style attribute on all matching elements.
offset( ) gets the position of the first matched element relative to the current visual window. The returned object has 2 attributes,
top and left, and the attribute values are integers. This function can only be used on visible elements.
var p = $("p:last");
var offset = p.offset();
p.html( “left: " offset.left ", top: " offset.top ) ;
width( ) gets the width value of the current first matching element,
width( val ) sets the specified width value for each matching element.
height( ) gets the height value of the current first matching element,
height( val ) sets the specified height value for each matching element.
JQuery Utilities method description
jQuery.browser
.msie means ie
jQuery.browser.version reads the version information of the user's browser
jQuery.boxModel detects the user's browser for Whether the display of the current page is based on the w3c CSS box model
jQuery.isFunction( obj ) checks whether the passed parameter is a function
function stub() { }
var objs = [
function () { },
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " i ")").text(isFunc);
});
jQuery.trim ( str ) Removes whitespace from both ends of a string. Use regular expressions to remove whitespace from both ends of a given character
jQuery.each( object, callback ) A general-purpose iterator that can be used to seamlessly iterate over objects and arrays
jQuery.extend( target, object1, [objectN] ) extends an object, modifies the original object and returns it. This is a powerful
tool for implementing inheritance. This inheritance is implemented by passing by value. Instead of the
prototype chain method in JavaScript.
Merge the settings and options objects and return the modified settings object
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
Merge the defaults and options objects, and the defaults object has not been modified. The value
in the options object is passed to empty instead of the value of the defaults object.
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" } ;
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) Use a filter function to remove items in the array
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj) Convert an array-like object into a real array
Convert the selected set of div elements into an array
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) Use a method to modify the items in an array and then return a new array
jQuery .inArray( value, array) Returns the position of value in the array. If not found, returns -1
jQuery.unique( array) Removes all duplicate elements in the array and returns the sorted array
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
