JQuery practice tree (2) and jquery practice tree

JQuery practice tree (2) and jquery practice tree

The previous practice focuses on the ready events of jquery. In this example, jQuery is used to change the background image of a page.
You can try the effect first: http://hovertree.com/texiao/jquerytree/2/

When you open the page, you will see a flash of snow.
This is not the result of jQuery, but the background image is set as a dynamic graph with CSS.
In this practice, we will use jquery to change the background image of the page.

The Code is as follows:

1 <! DOCTYPE html> 2 
$ (Document). ready () indicates that the specified function is executed after the page is loaded, see: http://hovertree.com/h/bjae/9ofotfdj.htm

In the code, $ ("# backHoverTree1") is the jquery selector, indicating that the element whose id is backHoverTree1 is selected, that is
<A href = "javascript:;" id = "backHoverTree1" target = "_ self"> background image 1 </a>
The id of this link is backHoverTree1, Which is case sensitive.

JQuery # selector is also called id Selector
# Select an element with a unique specified id.
Id references the id attribute of the HTML element.
The same id value can only be used once in the document.
Syntax
$ ("# Id ")

The id is required. Specifies the id of the element to be selected.
The id selector uses the id attribute of the HTML element.

Do not use the ID name starting with a number! Some browsers may have problems.

After selecting an element, you can operate on the element. The on () function in the Code adds a function to process the specified event.
See http://keleyi.com/a/bjac/4013kn5s.htm

$ ("# BackHoverTree1"). on ("click", function (){});
Click indicates a click, indicating that the code in the function is executed when the click id is a backHoverTree1 element.
The above code is actually
$ ("Body" ).css ("background-image", "url (http://hovertree.com/texiao/jquerytree/2/images/flower.jpg )")
This statement indicates setting the background image of the body as a http://hovertree.com/texiao/jquerytree/2/images/flower.jpg

$ ("Body") indicates selecting the body element. This is a tag selector.

See http://hovertree.com/menu/jqueryselect/


After the selection, it is to set the style of the body element, that is, to perform css () operations on the body element, css () method to return or set one or more style attributes of the matching element.

1. Return the CSS property value
Returns the CSS attribute value of the First Matching Element.
Note: CSS attributes such as "background" and "border" cannot be abbreviated when a value is returned ").
((Selector).css (name)
The name is required. Specifies the name of the CSS attribute. This parameter can contain any CSS attribute. For example, "color ".

Ii. Set CSS attributes
Set the specified CSS attribute of all matching elements.
((Selector).css (name, value)
The name is required. Specifies the name of the CSS attribute. This parameter can contain any CSS attribute, such as "color ".

Value is optional. Specifies the value of the CSS attribute. This parameter can contain any CSS property value, such as "red ".
If an empty string value is set, the specified attribute is deleted from the element.
Download this sample code: http://hovertree.com/h/bjae/5n2tvrlb.htm
Web Front-end: http://www.cnblogs.com/jihua/p/webfront.html