jquery base Dom and CSS operations

$ (' #box '). html ();//Get HTML content
$ (' #box '). text ();//Get textual content and automatically clean up HTML tags
$ (' #box '). html (' <em>www.li.cc</em> ');//Set HTML content
$ (' #box '). Text (' <em>www.li.cc</em> ');//Set the textual content and automatically escape HTML tags
$ (' #box '). HTML ($ (' #box '). html () + ' <em>www.li.cc</em> ');//Append Data
$ (' input '). val ();//Get form Contents
$ (' input '). Val (' www.li.cc ');//Set form contents
$ ("input"). Val (["Check1", "Check2", "Radio1"]);//value values are those that will be selected
$ (' div '). attr (' type ');//Gets the attribute value of the property
$ (' div '). attr (' type ', ' button ');//Set properties and property values
$ (' div '). attr (' title ', function () {//Return property value via anonymous function
Return ' I am a domain name ';
});
$ (' div '). attr (' title ', function (index, value) {//can accept two parameters
return value + (index+1) + ', I am the domain name ';
});
$ (' div '). Removeattr (' title '); Deletes the specified property
$ (' div '). css (' color ');//Gets the color of the element's inline CSS style
$ (' div '). css (' Color ', ' red ');//set element inline CSS style color is red
var box = $ (' div '). css ([' Color ', ' height ', ' width ']);//Get multiple CSS style array objects
$ (' div '). addclass (' red ');//Add a CSS class
$ (' div '). addclass (' Red BG ');//Add multiple CSS classes
$ (' div '). Removeclass (' BG ');//delete a CSS class
$ (' div '). Removeclass (' Red BG ');//Delete multiple CSS classes
$ (' div '). width ();//Gets the length of the element, the returned type is number
$ (' div '). Width (500);//Set element length, direct value, default plus px
$ (' div '). Width (' 500pt ');//Ibid., Set PT units
$ (' div '). Width (function (index, value) {//index is an index, value is the original value
return value-500; No adjustment type, direct calculation
});
$ (' div '). Height ();//Gets the height of the element, the returned type is number
$ (' div '). Height (500);//Set element height, direct value, default plus px
$ (' div '). Height (' 500pt ');//Ibid., Set PT units
$ (' div '). Height (function (index, value) {//index is an index, value is the original value
return value-1; No adjustment type, direct calculation
});
Alert ($ (' div '). width ());//Does not contain
Alert ($ (' div '). innerwidth ());//Includes padding padding
Alert ($ (' div '). Outerwidth ());//contains inner margin padding+ border border
Alert ($ (' div '). Outerwidth (True));//contains padding padding+ border border+ margin margins
$ (' strong '). Offset (). left;//with respect to viewport
$ (' strong '). Position (). left;//offset relative to parent element
$ (window). scrolltop ();//Gets the position of the current scroll bar
$ (window). scrolltop (300);//Set the position of the current scroll bar

A Introduction to DOM
Since the course is based on JavaScript, we don't go into detail about what the DOM really is.
There are only a few basic concepts to know:
1.D represents a page document, an O representing an object, a set of data sets with independent attributes, an M
Represents the model, which is the element nodes and text nodes on the page.
The 2.DOM has three forms, the standard DOM, the HTML DOM, and the CSS DOM, most of which have a series of
Encapsulation, there is no need for a deep understanding of it in jQuery.
3. The tree structure is used to represent the DOM, which is very appropriate, most operations are element node operations, and there are few
Points are text node operations.

Two Setting elements and Content
We get the elements we want to manipulate through the various selectors and filters we've learned earlier. This time, I
We can perform DOM operations on these elements. The most common operation, then, is to get and modify the content of the element.

In a regular DOM element, we can use the HTML () and text () methods to get internal data. HTML () method
You can get or set the HTML content, and text () can get or set the textual content.
$ (' #box '). html ();//Get HTML content
$ (' #box '). text ();//Get textual content and automatically clean up HTML tags
$ (' #box '). html (' <em>www.li.cc</em> ');//Set HTML content
$ (' #box '). Text (' <em>www.li.cc</em> ');//Set the textual content and automatically escape HTML tags

Note: When we use HTML () or text () to set the contents of an element, the original data is emptied. and our period
If you want to append the data, you need to get the original data first.
$ (' #box '). HTML ($ (' #box '). html () + ' <em>www.li.cc</em> ');//Append Data
If the element is a form, JQuery provides the Val () method to get or set the internal text data.
$ (' input '). val ();//Get form Contents
$ (' input '). Val (' www.li.cc ');//Set form contents
If you want to set the selected state of multiple options, such as a drop-down list, a radio check box, and so on, you can pass the operation through an array.
$ ("input"). Val (["Check1", "Check2", "Radio1"]);//value values are those that will be selected

Three Element Property Manipulation
In addition to setting and getting the element content, JQuery can also manipulate the attributes of the element itself, the package
Property values for the property, setting the property value, and deleting the property.

$ (' div '). attr (' title ');//Get the property value of the property
$ (' div '). attr (' title ', ' I am a domain name ');//Set properties and property values
$ (' div '). attr (' title ', function () {//Return property value via anonymous function
Return ' I am a domain name ';
});
$ (' div '). attr (' title ', function (index, value) {//can accept two parameters
return value + (index+1) + ', I am the domain name ';
});

Note: the function () {} in the attr () method can be passed without arguments. You can pass only one parameter, index, to indicate the current
The index of the element (starting at 0). You can also pass two parameters index, value, and the second parameter represents the original value of the property.
Note: Many methods in JQuery can use function () {} to return a string, such as HTML (), text (),
Val () and the Is (), filter () method just learned in the previous chapter. And if more than one element collection is involved, you can also pass
The index parameter to get the indexed value, and the second parameter value can be used (not all methods are appropriate and interested
You can try it yourself).
$ (' div '). html (function (index) {//assigns a value through an anonymous function and passes the index
Return ' I am ' + (index+1) + ' div ';
});
$ (' div '). html (function (index, value) {//) can also implement append content
Return ' I am ' + (index+1) + ' div: ' +value;
});
Note: We can also use attr () to create ID attributes, but we strongly do not recommend this. This can result in an entire
A confusing page structure. Of course, you can create a class attribute, but there is a better way to replace attr () later.
method, so it is not recommended.
Deleting the specified property does not allow the method to use anonymous functions, and passing index and value are invalid.
$ (' div '). Removeattr (' title '); Deletes the specified property

Four Element style manipulation
Element style operations include setting CSS styles directly, adding CSS categories, category switching, and deleting categories.
Operation method. In the whole jQuery usage frequency, the CSS style operation is also very high, so we need to focus
Master.

$ (' div '). css (' color ');//Gets the color of the element's inline CSS style
$ (' div '). css (' Color ', ' red ');//set element inline CSS style color is red
In CSS fetching, we can also get multiple CSS styles, and get an array of objects, if
Parsing in the traditional way requires a for-in traversal.
var box = $ (' div '). css ([' Color ', ' height ', ' width ']);//Get multiple CSS style array objects
for (var i in box) {//Traversal one by one
Alert (i + ': ' + box[i]);
}
JQuery provides a traversal tool specifically designed to handle this array of objects, the $.each () method, which can be lightly
An array of traversed objects.
$.each (box, function (attr, value) {//Traversal JavaScript Primitive Object array
Alert (attr + ': ' + value);
});
Use $.each () to iterate through an array of native JavaScript objects, and if it is an array of JQuery objects how to make
With the. each () method?
$ (' div '). each (function (index, Element) {//index is an index, element is the DOM
Alert (index + ': ' + Element);
});
When you need to set multiple styles, we can pass multiple CSS style key-value pairs.
$ (' div '). css ({
' Background-color ': ' #ccc ',
' Color ': ' Red ',
' Font-size ': ' 20px '
});
If you want to set the value of a CSS style for an element, but this value needs to be calculated we can pass an anonymous function.
$ (' div '). css (' width ', function (index, value) {
Return (parseint (value)-+) + ' px ';
});
In addition to inline CSS settings, we can add CSS classes directly to elements, add single or multiple, and
You can also delete it.
$ (' div '). addclass (' red ');//Add a CSS class
$ (' div '). addclass (' Red BG ');//Add multiple CSS classes
$ (' div '). Removeclass (' BG ');//delete a CSS class
$ (' div '). Removeclass (' Red BG ');//Delete multiple CSS classes
We can also combine events to implement the CSS class style switching function.
$ (' div '). Click (function () {////when clicked
$ (this). Toggleclass (' red Size ');//single style multiple styles can be
});
The second parameter of the. Toggleclass () method can pass in a Boolean value that is true to switch to the class class, False
To execute the default class class (the default is empty Class), using this feature, we can set the frequency of switching.
var count = 0;
$ (' div '). Click (function () {//two times per click to switch red
$ (this). Toggleclass (' Red ', count++% 3 = = 0);
});
The default CSS class toggle can only be a toggle between no style and a specified style, if you want to implement style 1 and style 2
Switching between them must also write some logic on their own.
$ (' div '). Click (function () {
$ (this). Toggleclass (' red Size ');//start switching to style 2
if ($ (this). Hasclass (' red ')) {//Judgment style 2 exists after
$ (this). Removeclass (' Blue '); Delete Style 1
} else {
$ (this). Toggleclass (' Blue '); Add Style 1, this can also be addclass
}
});

The method above is cumbersome, and the. Toggleclass () method provides a way to pass an anonymous function to set what you need
The rule to toggle.
$ (' div '). Click (function () {
$ (this). Toggleclass (function () {
Pass an anonymous function that returns the style you want to toggle
return $ (this). Hasclass (' Red ')? ' Blue ': ' Red size ';
});
});
Note: Although the above is a sentence to achieve this function, but there are some minor flaws, because the original class is not
have been removed, but have been replaced. So, it needs rewriting.
$ (' div '). Click (function () {
$ (this). Toggleclass (function () {
if ($ (this). Hasclass (' red ')) {
$ (this). Removeclass (' red ');
return ' green ';
} else {
$ (this). Removeclass (' green ');
return ' red ';
}
});
});
We can also add a second frequency parameter in the mode of passing the anonymous function.
var count = 0;
$ (' div '). Click (function () {
$ (this). Toggleclass (function () {
return $ (this). Hasclass (' Red ')? ' Blue ': ' Red size ';
},count++% 3 = = 0);
Increase the frequency
});
For the. Toggleclass () method of passing in an anonymous function, you can also pass the index index, class two parameters, and
Frequency Boolean value, you can get the current index, class name and frequency Boolean value.
var count = 0;
$ (' div '). Click (function () {
$ (this). Toggleclass (function (index, className, Switchbool) {
Alert (index + ': ' + className + ': ' + switchbool);
Get Current value
return $ (this). Hasclass (' Red ')? ' Blue ': ' Red size ';
},count++% 3 = = 0);
});

Five CSS methods
JQuery not only provides the core operating methods of CSS, such as. css (),. addclass (), and so on. Also encapsulates a number of special
function of the CSS method of operation, we have to understand each.

$ (' div '). width ();//Gets the length of the element, the returned type is number
$ (' div '). Width (500);//Set element length, direct value, default plus px
$ (' div '). Width (' 500pt ');//Ibid., Set PT units
$ (' div '). Width (function (index, value) {//index is an index, value is the original value
return value-500; No adjustment type, direct calculation
});

$ (' div '). Height ();//Gets the height of the element, the returned type is number
$ (' div '). Height (500);//Set element height, direct value, default plus px
$ (' div '). Height (' 500pt ');//Ibid., Set PT units
$ (' div '). Height (function (index, value) {//index is an index, value is the original value
return value-1; No adjustment type, direct calculation
});

Alert ($ (' div '). width ());//Does not contain
Alert ($ (' div '). innerwidth ());//Includes padding padding
Alert ($ (' div '). Outerwidth ());//contains inner margin padding+ border border
Alert ($ (' div '). Outerwidth (True));//contains padding padding+ border border+ margin margins

$ (' strong '). Offset (). left;//with respect to viewport
$ (' strong '). Position (). left;//offset relative to parent element
$ (window). scrolltop ();//Gets the position of the current scroll bar
$ (window). scrolltop (300);//Set the position of the current scroll bar

jquery base Dom and CSS operations