jquery Basics (Style articles, Dom objects, selectors, property styles)

1. $ (document). The role of ready is to wait until the nodes in the document of the page are loaded, and then execute the subsequent code, because we may depend on one element of the page when executing the code.    We want to make sure that this element is actually loaded before it can be used correctly. $ (document). Ready (function () {content}); 1.jQuery objects and Dom objects  jquery objects are not the same as DOM objects normal processing, handled by standard javascript:var p = document.getElementById (' Imooc ');p. InnerHTML = ' Hello! Learning jquery through the Web is the best way to ';p. Style.color = ' red '; the processing of jquery:var $p = $ (' #imooc ');
$p. html (' Hello! Learning jquery through the Web is the best way to '). CSS (' Color ', ' red ');

A $p jquery object is obtained through the $ (' #imooc ') method, $p is a class array object. This object contains the DOM object information, and then encapsulates a lot of operation methods, call their own method HTML and CSS, the result is consistent with the standard JavaScript processing results. 2. How do I turn a jquery object into a DOM object?  var $div = $ (' div ')//jquery object
var div = $div [0]//Convert to DOM object div.style.color = ' red '//Manipulate DOM object properties   3.Dom object converted to jquery object var div = document.getelementsbytagname (' div '); Dom Object
var $div = $ (div); jquery Object
var $first = $div. First (); Find the first DIV element $first.css (' Color ', ' red '); Set the color of the first element 4. JThe ID selector "$ (" #id ") of the query selector 5. JSelector $ (". Class") 6.jQuery selector element selector $ ("element") 7.jQuery selector full selector (* selector) $ ("*") 8.jQuery selector level selector ("*")

Basic Filter selector for the 9.jQuery selector

Content Filter selector for the 10.jQuery selector  

  One by one .The Visibility filter selector for the jquery selector

12.jQuery Selector's attribute filter selector  

  Special selector of the 13.jQuery selector this  Change to jquery: $ (' P '). Click (function () {
Convert p elements into jquery objects
var $this = $ (This)
$this. CSS (' Color ', ' Red ')}) This indicates that the current context object is an HTML object that can invoke properties and methods owned by the HTML object.
$ (this), which represents the context object that is a jquery context object that can invoke the methods and property values of jquery.   .The attributes and styles of jquery. attr () and. Removeattr () attr () has 4 expressions  -attr (incoming property name): Gets the value of the property-attr (property name, property value): Sets the value of the property-attr (property name, function value): Sets the function value of the property-attr (attributes): Sets multiple property values for the specified element, that is: {property name one: "Property value One", Property name two: "Attribute value two", ...} removeattr () Delete method. Removeattr (AttributeName): Removes an attribute (attribute) for each element in the matching element collection 15.jQuery attributes and styles of HTML () and. Text () . HTML () methodGets the HTML content of the first matching element in the collection or sets the HTML content of each matching element, in 3 ways:-. HTML () does not pass in a value, which is the HTML content of the first matching element in the collection-. HTML (htmlstring) Sets the HTML content of each matching element-the. HTML (function (index, oldhtml)) is used to return a function that sets the HTML content The . Text () methodGets the text content of each element in the matching element collection, including their descendants, or sets the text content of each element in the matching element collection to the specified text content. , there are 3 ways to use:-. Text () Gets the merged text of each element in the matching element collection, including their descendants-. Text (TextString) used to set the content of the matching element-the. Text (function (index, text)) used to return the set text A function of the content   the properties and styles of the 16.jQuery. Val ()  One of the. Val () methods in jquery is primarily used to manipulate the values of form elements, such as input, select, and textarea.  -. HTML (),. Text (),. Val () can use the return value of the callback function to dynamically change the contents of multiple elements. The . Val () method-. Val () No parameter, gets the current value of the first element in the collection of matching elements-. Val (value), sets the value of each element in the matching element collection-. val (function), which is used to return the set value. Precautions :-Through. Val () processes the Select element, when no selection is selected, it returns the null-. Val () method is used to set the value of the field of the form-if the SELECT element has a multiple (multi-Select) attribute, and at least one selection is selected,. val () method returns an array that contains the values of each selected selection the style and style of the 17.jQuery properties are added. addclass ()   . AddClass (className) method-. AddClass (ClassName): One or more style names to add for each matching element-. addclass (function (index, currentclass)): This function returns one or more style names separated by spaces Precautions :The. AddClass () method does not replace a style class name. It simply adds a style class name to the element   .The properties of jquery and the style of the delete style. Removeclass () . Removeclass () method-. Removeclass ([ClassName]): One or more space-delimited style names removed by each matching element-. Removeclass (function (Index, Class)): One of the functions that returns one or more style names that will be removed the toggle style of the properties and styles of the 19.jQuery. Toggleclass ()   . Toggleclass () Method: Adds or removes one or more style classes on each element of the matching element collection, depending on whether the style class exists or the value toggle property. That is, delete (add) A class if it exists (does not exist)-. Toggleclass (ClassName): one or more (separated by spaces) style class names that are used to toggle on each element of the matching element collection-. Toggleclass (className, switch): A Boolean value that Used to determine if a style should be added or removed-. Toggleclass ([switch]): A Boolean value to determine whether a style class is added or removed-. Toggleclass (function (Index, class, switch) [, switch] ): A function that returns the name of the style class used to toggle on each element in the matching element collection. Receives the index position of the element and the element's old style class as a parameter Precautions :-Toggleclass is a mutually exclusive logic, that is, by determining whether the corresponding element on the existence of the specified class name, if there is a delete, if not increase-Toggleclass will retain the original class name after the new, separated by a space   .The properties and styles of jquery manipulate the style. CSS () . CSS () method: Gets the calculated value of the element style property or sets the CSS property of the element Get:-. CSS (PropertyName): Gets the computed value of the style property of the first element in the matching element collection-. CSS (propertynames): passes a set of arrays, returning an object result   Settings:-. CSS (propertyname, value): Set css-. CSS (propertyname, function): You can pass in a callback function, return to the corresponding value for processing-. CSS (properties): You can pass an object, the same When setting multiple styles   Precautions :-browser properties are obtained in different ways, in the acquisition of certain values, jquery uses a unified processing, such as color using RBG, the size of px-. CSS () method to support hump writing and case mixing, the internal fault-tolerant processing-when a number is only as a value, jquery converts it to a string and adds PX at the end of the string, such as. css ("width", 50}) like. css ("width", "50px"})//merge settings, set multiple styles by Object pass $ ('. Seventh ') ). css ({' font-size ': "15px", "Background-color": "#40E0D0", "Border": "1px solid RE D "}) . JThe difference between the properties of the query and the style of the. css () and the. addclass () Setting style maintainability:The essence of the. addclass () is to add one or more classes to an element by defining a style rule for the class. CSS methods are made by using a lot of JavaScript code to change the style of the elements. addclass () We can batch to the same elements set uniform rules, change is more convenient, can be unified to modify the deletion. If you pass the. css () method, you need to specify that each element is a one by one modification, and later maintenance will have to be modified one by one, rather troublesome Flexibility:Using the. CSS () method makes it easy to dynamically change the properties of a style without having to go through the tedious definition of a class-class rule. In general, in the uncertain start layout rules, through the dynamically generated HTML code structure, are handled by the. CSS () method. Style values:The. addclass () essence is simply an addition to the class of classes that cannot get the value of the property to the specified style, and the. css () can get to the specified style value. priority of the style:CSS styles are prioritized, with the same style rules applied to the same element as the external style, inner style, and inline style, with the following precedence external Style < Inner style < inline style-The. AddClass () method is done by adding the class name, then the style is defined in the external file or internal style, and is appended to the element when needed-through the. css () method, the inline style is handled directly through the element's style property attached to the element's style attributes that are set by the. CSS method are prioritized higher than the. AddClass method Summary:. AddClass and. CSS methods have pros and cons, generally static structure, have determined the layout of the rules, you can use the AddClass method, to increase the uniform class rules
If it is a dynamic HTML structure, in the case of uncertain rules, or often changes, it is generally much more considered. css () mode 22.jQuery attributes and style elements of the data store the storage interface provided by jquery Jquery.data (element, key, value)//static interface, storage data Jquery.data (element, key)//static interface, fetching data . Data (key, value)//instance interface, memory . Data (key)//instance interface, memory2 methods used on the access are all through an interface, passing elements, key value data. In the official jquery documentation, the. Data () method is recommended instead. We can think of the DOM as an object, then we can have the basic type, reference type of data on the object, but this raises a problem, there may be a circular reference to the memory leak risk through the data interface provided by jquery, it is good to deal with this problem, We do not need to care about how it is implemented at the bottom, just need to follow the corresponding data method to use the same also provides 2 corresponding delete interface, the use of the data method is actually consistent, but one is to add a delete is jquery.removedata (element [ , name]). Removedata ([name])

jquery Basics (Style articles, Dom objects, selectors, property styles)