Jquery is undoubtedly one of the popular JS development libraries and plays a major role in web development, especially server component development. In addition, during interviews with some companies, I asked about JS
Just ask, have you used jquery? No, it seems that you are inferior. To put it bluntly, you can still learn excellent things, whether it is for the company or not during project creation.
We do not need to use this as a whole. It is worth studying.
$ (HTML)
Function: Creates a DOM element based on the HTML parameter.
Return: jquery object
Parameter: HTML
Example: Add HTML to the body
$ (" < Div > < P > Hello </ P > </ Div > "). Appendto (" body ")
$ (Elems)
Function: encapsulate one or more DOM elements in jquery. This function also accepts the XML document element or window object as valid parameters, not even DOM elements.
Return: jquery object
Parameter: Dom element or DOM element array
Example:
Set the background color of the page
Certificate (document.body).css ("background", "black ");
Hides the input element in a specified form.
$ (Myform. Elements). Hide ()
$ (FN)
Function: $ (document). Ready () is a shortcut that allows you to bind a function to the page for execution when loading.
Return: jquery object
Parameter: function to be executed after Dom ready
Example:
$ (Function (){
// Document is ready
});
$ (Expr, context)
Function: searches for elements based on CSS or basic XPath selectors.
Return: jquery object
Parameters:
Expr (string): The expression to be searched
Context (element | jquery): (optional) Dom element, document or jquery object, used as the selected Context
Example:
Jquery code
$ ("Div> P ")
Before
< P > One </ P > < Div > < P > Two </ P > </ Div > < P > Three </ P >
Result:
[ < P > Two </ P > ]
Example
Searches for all inputs of type radio within the first form in the document
Jquery code
$ ("Input: Radio", document. Forms [0])
$. Extend (PROP)
Function: extends jquery and adds functions to the jquery namespace or plug-in method.
Return: Object
Parameters:
Example:
Adds two plugin methods.
Jquery code
Jquery. FN. Extend ({
Check: function (){
Return this. Each (function () {This. Checked = true ;});
},
Uncheck: function (){
Return this. Each (function () {This. Checked = false ;});
}
});
$ ("Input [@ type = checkbox]"). Check ();
$ ("Input [@ type = radio]"). Uncheck ();
Adds two functions into the jquery namespace
Jquery code
Jquery. Extend ({
Min: function (a, B) {return<B? A: B ;},
MAX: function (a, B) {return>B? A: B ;}
});
Each (FN)
Function: traverses elements and adds response functions.
Return: jquery object
Parameter: FN (function): a function to execute
Example:
Iterates over two images and sets their SRC Property
Jquery code
$ ("IMG"). Each (function (I ){
This. src = "test" + I + ". jpg ";
});
Before
<IMG/> <IMG/>
Result:
<IMGSRC= "Test0.jpg"/> <IMGSRC= "Test1.jpg"/>
Eq (POS)
Function: returns an element at the specified position. The position refers to the position of the matched element from 0 to length-1.
Return: jquery object
Parameter: pos (number): The index of the element that you want to limit.
Example:
Jquery code
$ ("P"). eq (1)
Before
< P > This is just a test. </ P > < P > So is this </ P >
Result:
[ < P > So is this </ P > ]
Get ()
Function: returns all matched DOM elements.
Return: element array
Parameters:
Example:
Selects all images in the document and returns the DOM elements as an array
Jquery code
$ ("IMG"). Get ();
Before
< IMG SRC = "Test1.jpg" /> < IMG SRC = "Test2.jpg" />
Result:
[ < IMG SRC = "Test1.jpg" /> < IMG SRC = "Test2.jpg" /> ]
Get (Num)
Function: returns the DOM element at the specified index position.
Back: Dom Element
Parameter: num (number): Access the element in the nth position.
Example:
Selects all images in the document and returns the first one
Jquery code
$ ("IMG"). Get (0 );
Before
<IMGSRC= "Test1.jpg"/> <IMGSRC= "Test2.jpg"/>
Result:
<IMGSRC= "Test1.jpg"/>
GT (POS)
Function: returns an element after a specified position.
Return: jquery object
Parameter: pos (number): reduce the set to all elements after this position.
Example:
Jquery code
$ ("P"). gt (0)
Before
< P > This is just a test. </ P > < P > So is this </ P >
Result:
[ < P > So is this </ P > ]
LT (POS)
Function: returns elements before a specified position.
Return: jquery object
Parameter: pos (number): reduce the set to all elements below this position.
Example:
Jquery code
$ ("P"). LT (1)
Before
< P > This is just a test. </ P > < P > So is this </ P >
Result:
[ < P > This is just a test. </ P > ]
Size ()
Function: Number of matching elements
Return Value:
Parameters:
Example:
Jquery code
$ ("IMG"). Size ();
Before
< IMG SRC = "Test1.jpg" /> < IMG SRC = "Test2.jpg" />
Result:
2
Length
Function: matches the number of elements, which is the same as the size function.
Return Value:
Parameters:
Example:
Jquery code
$ ("IMG"). length;
Before
< IMG SRC = "Test1.jpg" /> < IMG SRC = "Test2.jpg" />
Result:
2
Index (subject)
Function: searches for all matching elements and returns the index value.
Return Value:
Parameter: subject (element): object to search
Example:
Returns the index for the element with ID foobar
Jquery code
$ ("*"). Index ($ ('# foobar') [0])
Before
<DivID= "Foobar"> <B> </B> <SpanID= "Foo"> </Span> </Div>
Result:
0
Returns the index for the element with ID Foo within another element
Jquery code
$ ("*"). Index ($ ('# foo') [0])
Before
<DivID= "Foobar"> <B> </B> <SpanID= "Foo"> </Span> </Div>
Result:
2
Returns-1, as there is no element with ID bar
Jquery code
$ ("*"). Index ($ ('# bar') [0])
Before
<DivID= "Foobar"> <B> </B> <SpanID= "Foo"> </Span> </Div>
Result:
-1
$. Noconflict ()
Function: avoids conflicts with the previously migrated jquery library.
Return: Undefined
Parameters:
Example:
Maps the original object that was referenced by $ back to $
Jquery code
Jquery. noconflict ();
// Do something with jquery
Jquery ("Div P"). Hide ();
// Do something with another library's $ ()
$ ("Content"). style. Display = 'none ';
Jquery. noconflict ();
(Function ($ ){
$ (Function (){
// More code using $ as alias to jquery
});
}) (Jquery );
// Other code using $ as an alias to the other library
