Home > front end >  JavaScript jQuery based on the use and style
JavaScript jQuery based on the use and style

Time:12-27

//1.1 jQuery is what?
/*
JQuery is a JavaScript function library,
JQuery is a lightweight "write less, do more" JavaScript libraries,
The jQuery library contains the following functions:
The HTML element to select
The HTML element operation
CSS operation
HTML event functions
JavaScript effects and animation
The HTML DOM traversal and modify
AJAX
Utilities,
Tip: in addition to this, the jQuery also provides lots of plugins
*/
//how to use the jQuery 1.2
/*
JQuery is a JavaScript library, do not need special to install, only need us among the page tag, through & lt; script> Label is introduced into the jQuery library can
JQuery download address: https://jquery.com/download/
*/
//1.3 jQuery syntax
/*
JQuery syntax is through select HTML element, and the selection of elements to perform certain operations
Basic syntax: $(selector). The action ();
- $$symbol definition jQuery
- the selector selectors should find elements to support css1 ~ the mainstream selector in CSS 3
- the action () to the operation of the element
For example:
$(" p "). Hide ();//hide all & lt; P> The element
*/

//1.0 jQuery selector
/*
Any operation needs the support of the node of the page, how fast and efficient developers find specified node was one of the front-end development focus,
JQuery provides a series of selector to help developers to achieve this goal, let developers can choose less complex process and performance optimization, more focus on business logic written,
JQuery support mainstream css1 almost ~ the range selector method and we start from the simplest and most commonly used in English:
*/
//1.1 ID selector $(" # ID ");
/*
Id selector is also the basic selector, jQuery internal use JavaScript function document. The getElementById () to handle id,
Native syntax support is always very efficient, so on the operation of the DOM, if can use id always consider using the selector
Note: the id is unique, each id value can be used only once in a page, if multiple elements are assigned the same id,
Will match the id only choice set first DOM elements, but this should not happen; Have more than one element of the page using the same id is invalid
*/
//by ID selector for element

//1.0 the basic screening of jQuery selector selector
/*
Many times we can't directly through basic selector and element level selector to find what we want,
For jQuery provides a series of screening option is used to more quickly find the DOM element,
Screening selector is not a lot of CSS specification, but the jQuery selector for the convenience of developers extend out
*/
//screen selector USES similar to pseudo elements in the CSS, choose for colon ":" the beginning, the description of the basic filter to see jQuery API documentation: */
/*
The selector
$(" : the first ") for the first matched elements such as: $(' li: first);
$(" : the last ") for the end of the match elements such as: $(' li: the last);
$(" : not selector () ") to remove all with a given selector of the matched elements such as: $(" input: not (checked) ")
$(", even ") to match all index value is an even number of elements, starting from 0, for example: $(" li: even ")
: $(" odd ") to match all index value is an odd number of elements, starting from 0, for example: $(" li: odd ")
$(" : eq (index) ") to match a given index value elements, starting from 0, for example: $(" li: eq (1) ")
$(" : gt (index) ") all index greater than a given value of the matched elements, starting from 0, for example: $(" li: gt (0))
$(" : lt (index) ") to match all elements of index of less than a given value, starting from 0, for example: $(" li: gt (2) ")
: $(" header ") match such as h1, h2, h3, such as the title of the elements such as: $(" : the header "). The CSS (" background ", "# EEE");
$(" : the animated ") match all executing animated elements (only to not perform the animation effects elements perform an animation effects)
For example: $(" : the header "). The CSS (" background ", "# EEE");
: $(" focus ") to match the current focus element,
$(" root ") select the document root element, in HTML, the root element of the document, and $(" root ") selected element, is always & lt; html> Element,
Example: set & lt; html> Background color for yellow
$(" root "). The CSS (" background - color ", "yellow");
  • Related