JavaScript jQuery based on the use and style article
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: Peng Qiwang
Writing time: on April 30, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
1 what is a jQuery?
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
1.2 how to use jQuery
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 the grammar of the jQuery
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
2. The difference between the DOM object and jQuery object
- DOM object is obtained through native js objects, methods and properties of DOM object can only use js
- the jQuery object through the DOM object of jQuery packaging after the creation of objects, it is unique to the jQuery
- a jQuery method that can be used on the surface of the jQuery library but cannot use js methods in the
1. Window of javascript. onl oad
For example: the document getbyelement (" box ");//DOM object
Window. The onl oad=function () {
Var box=document. GetElementById (" box ");//js the DOM object
}
2. The page load event in the jQuery
For example: $(document). Ready (function () {
Var $box=$(" # jqbox ");//in the jQuery object
})
Chain writing: $(" # jqbox "). The CSS (" width ", "400 px"). The HTML (" this is a jqurey object ")
//js object can only be called js provides methods and properties, you can't use jQuery methods and properties of the
//jQuery object can only use jQuery methods and properties, cannot use methods and properties of js
Through a standard JavaScript DOM with jQuery DOM operation operation, it is not hard to find:
Pass the jQuery method after packaging, is a kind of array object, it is totally different from the DOM object, the only similarity is that they are able to operate the DOM,
Through jQuery DOM processing operations, can let developers more focus on the development of the business logic,
Instead we need to know which specific DOM node with those methods,
Don't need to care about different browser compatibility issues,
We through the jQuery API development, the code will also be more JingDuan,

1.3 the DOM object and the conversion between the jQuery object//JS object contains the DOM object
-- the jQuery library essence or JavaScript code, it's just to packaging the JavaScript language, in order to provide better, more convenient and quick DOM processing and is often used in the development of function, we use the jQuery also mixed with JavaScript native code can be used, in many scenarios, we need the jQuery and DOM can mutual transformation, they are all can operate on the DOM element, jQuery is an array of class objects, and the DOM object is a single DOM element,
- compare jQuery into the DOM, is more in the development of a DOM object into the jQuery object, $(parameters) is a multifunctional method,
By passing in different parameters and produce different effect, if passed to the $(DOM) is a DOM object function of the parameters, the jQuery method will give the DOM object to packaged into a new jQuery object,
- by $(dom) method to turn ordinary dom object after the jQuery object, we can call the jQuery method
1. The DOM object into a jQuery object
Var box=document. GetElementById (" box ");//DOM object
$(box);//the jQuery object
2. The jQuery object into a DOM object
Var $divs=$(" div ");//the jQuery object divs all $divs elements contained in the
Var div=$divs [0].//div for DOM object
//use the get () method in jQuery, only need to provide an index can
Var div=$divs. Get (0);//$divs index of 0 element in the object into a DOM object

3. Basic jQuery selector
# id selector, the class selector, element selectors, wildcard selector all page elements, hierarchical principle is
1.0 the 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 the 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
Var box=$(" # box ");
The class selector is $1.2 (" classname ");
Class selectors, id selectors relatively, the efficiency is relatively low, but the advantage is that you can choose more, the same jQuery on the implementation, for class selectors, if the browser supports, the jQuery JavaScript native getElementsByClassName () function to achieve
- with a class selector for element
Var wrap=$(" wrap ");
Element element selector is $1.3 (" label name ");
Element selectors, choose all of the elements according to a given HTML tag name, specify the element tag name search all the nodes, this is a collection operation, as well as with native method getElementsByTagName () function support
- according to the name of the div tags for all the div element
Var divs=$(" div ");
The selector $1.4 (" * ")
The selector, i.e., * selector
In CSS, often in the first row to write such a style
* {padding: 0; margin: 0; }
Wildcard * means to set default margins, all of the elements in the jQuery we can by passing * selector to select the elements in the document page
- output all page elements
Var allElement=$(" * ");
1.5 level selector
Between all nodes in the document are relationship of one sort or another, we can put the relationship between the nodes can be used to describe the traditional family relations, as a tree, the document tree nodes and between nodes will exist a father and son, brothers, in the relationship between the two generations, the selector level selector is used to deal with the relationship between
Child elements offspring element sibling elements adjacent element
Through a list, the difference between contrast level selector
Selector description
$(" ancestor descendant ") descendant selectors: choose a given ancestor element of all descendant elements, the offspring of an element may be a child of the element, the son, the son of
$(" parent & gt; The child ") child selectors: direct child elements of the parent
$(" prev + next ") adjacent brother selector: match all immediately after prev elements of the next element
$(" prev ~ siblings ") general brothers selector: after prev elements all the siblings of the matched elements
$(" body div ");//select all the div elements in the body
The console. The log ($(" body div "));
$(" body> Div ");//select the body direct child elements div
The console. The log ($(" body> Div "));
$(" # box + div ");//select div # box follow behind an element
The console. The log ($(" # box + div "));
$(" # box to div ");//select div # box element sibling elements
The console. The log ($(" # box to div "));
4. The action attribute in the jQuery method
1 the addClass () for each of the matched elements to add the specified class name
(2) removeClass () from all of the matched elements to delete all or the specified class
(3) toggleClass () if there is to remove a class/add a class if there is no
1.0 jQuery attribute dynamic operations class
1. $(element). The addClass ();//for each of the matched elements to increase by one or more of the style name
- method does not replace a style class name, it simply add a style class name to the element
2. $(element). RemoveClass ();//remove every matched element of one or more separated by a space style name
3. $(element). ToggleClass ();
On each element in the set of matched elements to add or remove one or more of the style class, depending on whether the style classes exist or switch value attributes, namely: if there is (no) is removed (add) a class
JavaScript in dynamic operating through the className attribute class class
5. Action attribute method in jQuery
(1) the HTML () to obtain the HTML content of the first matched element
(2) the text () to get the text contents of all matched elements
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull