Dom:
Attribute:
$("p").addClass(style type defined in css); Add style to an element
$("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 settings for an element Content
$("Element Name").removeAttr("Attribute Name") Delete the specified attribute and the value of the attribute from an element
$("Element Name").removeClass("class") Give it to an element The element deletes the specified style
$("Element Name").text(); Gets the text of the element
$("Element Name").text(value); Sets 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 input The value of the element
$("input element name").val(value); sets the value of the input element to value
Manipulation:
$("element name").after(content); in matching Add content after the element
$("Element Name").append(content); Insert content as the content of the element after the element
$("Element Name").appendTo(content); In content Followed by element
$("Element Name").before(content); Contrary to the after method
$("Element Name").clone(Boolean expression) When the Boolean expression is true, clone the element (If there is no parameter, it will be treated as true)
$("Element Name").empty() Set the content of the element to empty
$("Element Name").insertAfter(content); Set the content of the element to empty Insert the element after content
$("element name").insertBefore(content); Insert the element before content
$("element").prepend(content); Make content a part of the element , put it at the front of the element
$("element").prependTo(content); Treat this element as part of the content, put it at the front of the content
$("element").remove(); Delete all specified elements
$("element").remove("exp"); Delete all elements containing exp
$("element").wrap("html"); Surround the element with html 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(){……..}); Execute a function
$("div > p").css("border", "1px solid gray"); Find the child nodes p of all divs, Add style
$("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 current HTML DOM elements in the 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 There is no onload event in the body, otherwise the function cannot be executed. In each page,
many functions can be loaded and executed, and they 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: A function without parameters, its 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 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 in a "sliding"
manner.
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 the specified The set of elements matched by the expression can be separated by "," 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 the p elements among them, and add the border class attribute.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 all elements with the specified name
$ (".myClass") matches all elements with this class style value
$("*") matches all elements
$("div,span,p.myClass") unites all matching selectors
Cascading selector
$("form input") Descendant selector, selects all descendant nodes of ancestor
$("#main > *") Child selector, selects all child nodes of parent
$ ("label input") Proximity selector, selects the next proximal node of prev
$ ("#prev ~ div") Sibling selector, selects all sibling nodes of prev
Basic filter selector
$ ("tr:first") matches the first selected element
$("tr:last") matches the last selected element
$("input:not(:checked) span") from the original element Filter out all elements in the collection that match the selector (there is a temporary selector here)
$("tr:even") Match 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 containing the specified text
$("td:empty") matches all empty elements (elements containing only text are not counted as empty elements)
$("div:has(p)") Match all elements containing at least one selector from the original element set again
$("td:parent") Match 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 Elements with 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 parent The only child element of the 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
$( ":checkbox") matches all input elements of type checkbox
$(":submit") matches all input elements of type submit
$(":image") matches all input elements of type image
$(":reset") matches all input elements of reset type
$(":button") matches all input elements of button type
$(":file") matches all input elements of type file The input element
$(":hidden") matches all input elements of type hidden or hidden fields of the form
Form element filter selector
$(":enabled") matches all operable forms Element
$(":disabled") matches all inoperable form elements
$(":checked") matches all selected elements
$("select option:selected") matches all selected elements Selected Elements
JQuery CSS Method Description
css( name ) Access the style properties of the first matching 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)
