First knowledge of jquery

What 1.Jquery can do

Accessing and manipulating DOM elements (registering events, setting styles)

L Control Page Styles

Handling Page Events

Extend the new jquery plugin (advanced content)

Perfect combination with Ajax technology (S2 finally easy to buy web Ajax)

The advantages of 2.Jquery are small, only about 100KB powerful selector after compression

Excellent DOM encapsulation

Reliable event-handling mechanism

Excellent browser compatibility

Simplifying programming with implicit iterations

Rich plug-in support

3.Jquery major three versions

Compressed: Compact version: use min when publishing

Uncompressed: Non-compressed version

Vsdoc: Annotated version: During the development phase

4. About window.onload and $ (function () {}) Differences

1th: Timing of implementation

Parsing: Window.onload waits for all resources on the page (HTML tags, css,img,js) to be executed before they are loaded, including (text footage, images, js,css)

$ (function () {}): Wait for the label on the page to finish loading and start execution

2nd: Number of executions

Window.onload can only be called once

$ (function () {}) can be called multiple times

5. Setting styles with jquery

1. Through $ ("selector"). CSS ("Property name", "attribute value");

The property name of the writing here is consistent with the writing in the CSS.

2.$ ("selector"). HTML (): Gets the HTML code between two tags

3.$ ("selector"). addclass ("attribute value")

The DOM document structure can be changed dynamically. The style is then set.

jquery syntax structure

The jquery statement consists of three major parts: $ (), doucment and Ready ().

These three parts are called factory functions, selectors, and methods, respectively, in jquery.

$ () =jquery ()

When the parameter of $ () is a DOM object, the object does not need to wrap with double quotes, and if it gets the Doucment object, it writes $ (doucment).

$ (function () {            $ ("li"). MouseMove (function () {                $(This ). CSS ("background","red");            }). Mouseout (function () {                $ (this). CSS ("background", "" " );            })        }) Automatic Iteration

Dom objects and jquery object transformations

onload = function () {            var $dom = $ ("#myid");             var dom = $dom [0];             = function () {                if(DOM.checked= =true) {                    alert ( " Success " );                }            }        }

You can convert a DOM object to a jquery object to use the rich functionality provided by jquery, or you can convert a jquery object to a DOM object, using the functionality provided by members unique to the DOM object.

jquery Selector

Basic Selector

Mainly include: Tag Selector, class selector, ID selector, and set selector, intersection selector and global selector.

$ ("P"). Click (function () {$ ("span"). CSS (" Background ","#FF6")});

Hierarchy selector:

Descendant selectors, child selectors, adjacent selectors, and peer selectors.

$ ("h2"). Click (function () {$ ("#menu span"). CSS (" Background ","#FF6");});

The ability to add a background color of #ff6 to the span element under #menu when you click the H2 element

$ ("h2"). Click (function () {$ ("body span"). CSS (" Background ","#FF6"); $ ("body>span"). CSS ("Background","#FF7");});

Property Selector

$ ("h2"). Click (function () {$ ("H2[title]"). CSS (" Background ","#FF6");});

When you click the H2 element, the feature that contains the background color of #ff6 is added to the H2 element with the property name title.

Basic Filter Selector

: First selects Element one

: Last element selected

: Even selects all elements with an even number (index starting from 0)

: Odd Selection index is an odd number of all elements (index starting from 0)

: GT (Index) selects an element with an index greater than index (index starting from 0)

: EQ (index) selects an element that is equal to index (index starts at 0)

: LT (index) selects an element with an index less than index (index starting from 0)

: Header selects all header elements, such as H1-h6

: Focus selects the element that currently takes focus

$ ("Tr:even"). CSS ("Background-color", "#F63");

Visibility Filter Selector

: Visible selection of all visible elements

: Hidden selects all hidden elements

First knowledge of jquery