jquery Style article

jquery Gets the element:

The time to get the element node in JavaScript is by Document.getelementsbyid (""), which is equivalent to $ ("") in jquery;

There are three ways to get element nodes and JavaScript in jquery.

ID Selector $ ("#id");

Class Selector $ (". Class");

Element selector $ (""); These are equivalent to the methods in the corresponding JavaScript

One level selector in jquery is 1: Looking for a child node or descendant node 2 under the limits of a parent node: Looking for adjacent sibling nodes under a known node but requiring the parent nodes of these nodes to be the same.

$ ("Parent>child"); This is the child node under the parent node the child is required to be subnodes, not the grandson node, and so on.

$ ("parent descendant") This is the descendant node under the parent node is the descendant node of the parent that can

$ ("prev+ Next") This is the next node tightly attached to the Prev node. This node is just the first useful

$ ("prev~siblings") all adjacent to the Prev node are siblings nodes

$ (": First") to match one element

$ (": Last") matches the final element

$ (": Not ()") filters out elements within ()

$ (": EQ (Index)") Select an element that has index value to index

$ (": GT (Index)") Select an element with an index value larger than index

$ (": LT (Index)") Select an element with an index value smaller than index

$ (": even") Select all elements with an even number of index values

$ (": Odd") Select all elements with an odd index value

$ (": Header") Select all heading elements

$ (": Root") Select the root element

$ (": Contains (text)") Select all elements containing the specified text

$ (":p arents") Select all elements that have child elements or text elements

$ (": Empty") Select all elements that have no child elements (including text nodes)

$ (": Has (selected)") Select all elements that contain the specified selector

$ (": Visible") Select all displayed elements

$ (": Hidden") Select all hidden elements

The condition of hiding elements is to satisfy one of them;

1. The value of CSS display is none.
2. Type= the form element for "hidden".
3. Both width and height are explicitly set to 0.
4. An ancestor element is hidden and the element is not displayed on the page
5. The value of CSS visibility is hidden
6. The value of CSS opacity is 0

$ (": First-child") The first child element under a parent element

$ (": Last-child") The last child element under the parent element

$ (": Nth-child (Index)") The number of child elements under the parent element the first few child elements index is just a few

$ (": Nth-last-child (Index)") The number of sub-elements under the parent element is the number of sub-elements index is the first

$ (": Only-child") If this element is the only child element of the parent element then it will be selected

$ (": input") matches all input form elements (text password button, etc.)

$ (": Text") matches all text boxes

$ (":p Assword") matches all password boxes

$ (": Radio") matches all the radio boxes

$ (": checkbox") matches all check boxes

$ (": Button") matches all buttons

$ (": Reset") matches all reset boxes

$ (": Submit") matches all the submit buttons

$ (": Image") matches all image fields

$ (": File") matches all file domains

$ (": Enable") Select all available form elements

$ (":d isable") Select all form elements that are not available

$ (": Checked") Select all selected input elements (multi box)

$ (": Selected") Select All selected option elements (radio box)

$ ("This") wraps this as a jquery object

Gets or sets the property value:

attr ("Property name", "Property value/Function value")

Just passing in the property name is getting the property value.

Passing in the property name and property value/function value is the setting of the new property value

If you set multiple attribute values for an element, put each pair of property names and attribute values together attr ("{attribute name 1: ' Property value 1 ', Property Name 2: ' Property value 2 '}")

Removeattr ("attribute name"); Remove attributes from matching elements

The. html () and. Text () methods

The. HTML () method is to get and set the HTML content of the first element in the collection without passing in the parameter is to get the HTML content passed in parameter is the HTML content inside the SET element

The. Text () method is to get and set the text content of each element in the collection without passing in the parameter is to get the text content passed in parameter is the text content of the set element

Two methods can be passed into the function. The HTML () method can be used only for HTML files that are available for XML and HTML files

Example: <p> How are you <a> new students <a>?<p>

$ ("P '). html (); Get the result is Hello <a> new classmate <a>?

$ ("P"). text (); You got a good result, new classmate?

The text () method only gets and sets the textual content and does not add a label

The. Val () method is used to manipulate the value of a collection of elements in a form

. Val () does not pass in the parameter is to get the value of the first element in the matching element by passing in the parameter to set the value of each element in the matching element

Caveats: Val to return the Selec element if no selected element returns null

Val returns an array of arrays containing all the selected items when the multiple element is returned

. Val (). The difference between the HTML (). Text () Method:

HTML () text () cannot be used on the form Val () can only be used on the form

The HTML () and Val () methods only work on the first element in the matching element and the text will act on each descendant

. HTML (),. Text (),. Val () can use the return value of the callback function to dynamically change the contents of multiple elements.

. addclass (ClassName) adds one or more class names to the matching element simply by adding the class name without replacing the class name

. Removeclass (ClassName) removes one or more class names for the matching element

. Toggleclass () method This is a mutually exclusive method to add or remove a class name from each element in the matching element collection if the incoming class name exists, it is added if it does not exist.

. Toggleclass ("ClassName", switch) switch (optional parameter) to determine whether the style is to add or remove true (add) False (delete)

The. css () method adds a CSS style to the first element of a matching element

The. CSS (propertyname) returns the value of a propertyname. CSS (PropertyNames) returns an object

. css ({"PropertyName": "Value", "PropertyName": "Value"})

The difference and use of the. css and. AddClass methods:

AddClass () is generally a class of elements to be unified to change the name of the style required to write in advance in a class

CSS () is typically handled for a particular style

The precedence of CSS is higher than the priority of addclass () because. css () input inline

It is generally better to use addclass for static HTML code

Dynamic HTML code is generally used. CSS is good because I'm not sure what style to add

jquery Style article