jquery Summary Knowledge Point one

# jquery Summary One #

----------

* * Learn jquery**

*jquery is another excellent JavaScript library following prototype. It is a lightweight JS library, it is compatible with CSS3, also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) *

* * NOTE: * *

*jquery2.0 and subsequent versions will no longer support IE6/7/8 browser *

* * Advantages: * *

1. Lightweight-can look at the jquery file
2. Powerful selector, CSS some he has, CSS no he also has//selector more, the more simple development
3. A large number of packaged DOM operations, we do not need to write the trouble of Dom code, directly call
4. Reliable event-handling mechanism
5. Perfect Ajax---support Ajax
6. Excellent browser compatibility
7. (personally think the best) chain operation
8. Rich plug-ins: things good to use more people, with more people than others have written code we can borrow
9. Complete documentation to help you learn and inquire faster
10. Open source-The sources of code visible, anyone can freely use and propose changes

----------

Use of **jquery * *

* Introduction of jquery documentation *

<script src= "Jquery-1.7.min.js" ></script>

* * Experimental INTRODUCTION Success NO * *

$ (document). Ready (function () {
Alert ("Hello World");
})//This method is equivalent to the previous window.onload ()

--There's a very funny thing in here.

Window.onload=function () {
Alert ("Hello")
} x2---Notice how many times it will be executed?

* * Difference 1:**

Window.onload---When all classes in a Web page are loaded, including pictures
jquery way: When the DOM structure in the Web page is finished, it starts executing, possibly the DOM element associated with something that does not load complete
But it's too much trouble to write, we usually shorthand.

$ (function () {
Alert ("Hello World")
})

----------

**jquery objects and DOM objects * *

* What is a DOM object *

The DOM tree in the Document Object model, where each element node on the DOM tree is a DOM object

var Obj=document.getelementbyid ("id")-----This thing is getting DOM objects

----------

**jquery Object * *

*jquery Object---Refers to the object that is produced after jquery wraps a DOM object *

$ ("#message")---get an object with ID of message

* * Case: * *

$ ("#message"). HTML ("Nihao")
Equivalent to
document.getElementById ("message"). Innerhtml= "Nihao"

* If you don't need jquery, try not to mix it with the original Eco JS. *

----------

* * Note from the top you can see that jquery objects and JS objects are not exactly a thing
So later we write code in this style * *

var $temp =$ ("#temp")//jquery object
var Temp=document.getelementbyid ("temp")//dom object

----------

* * Convert each other * *

*jquery provides two ways to convert *

1. jquery object is an array object that can get DOM objects by [index] Way

var $p =$ ("#message")
var p= $p [0]
P.innerhtml= "Hello World"

2. jquery itself provides a get (index) to get

var $p =$ ("#message")
var p= $p. Get (0)
P.innerhtml= "Hello World"

*dom object converted into jquery object *

This very simple utility a $ () package up on it

var P1=document.getelementbyid ("message");
var $p 1=$ (p1);
$p 1.text ("Hello world2")

----------

Use of the **jquery selector * *

* Selectors we've been using for a long time, and using selectors to quickly find the DOM on the page and manipulate them

jquery completely inherits the CSS in the selector style and is more powerful, providing a handy help in writing our code *

----------

* * Common Selector * *

1. ID Selector----$ (' #ipt ')
2. Class Selector----$ ('. IPT ')
3. Element selector----$ (' input ')
4. Group---Collection element selector----$ (' Input, #bt1,. Bt2 ')
5. Descendant selector $ (' div span ')//Select all the spans inside the Div
6. Select Direct descendants----$ (' parent>child ')
7. Select the next <div> sibling element of class one----$ ('. One+div ')
8. Select the <div> element----$ (' #two ~div ') behind the element with ID.

----------

* * Filter Selector * *

1. $ (' div:first ')----Select the first DIV element in all DIV elements
2. $ (' div:last ')----Select the last div element in all DIV elements
3. $ (' Div:not (. Mini) ')----Select an element that is not a mini
4. $ (' div:even ')----The index of an element with an even number of Div indexes starting from 0
5. $ (' div:odd ')----The index of an element with an odd div index value starting from 0
6. $ (' Div:eq (2) ')----Specifies a value index of 2 for the Div index starting from 0
7. $ (' Div:gt (2) ')----Specify an element index greater than 2 for the index starting from 0
8. $ (' Div:lt (2) ')----Specify an element index that is greater than index less than 2 starts from 0
9. $ (' Div:contains (DV) ')----Find the element in the class containing DV--it will contain its parent element--but not the child element
$ (' div:empty ')----elements with empty class capacity do not affect parent elements
$ (' Div:has (. Mini) ')----div contains the element class Mini
$ (' div:parent ')----elements with child elements or class contents
$ (' Div:hidden ')----Select all the invisible elements of the DIV
$ (' div:visible ')----Select div all visible

----------

* * Attribute Filter Selector * *

1. $ (' div[title] ')----the element with the title attribute in the DIV
2. $ (' div[title=test] ')----the element with the title attribute in the div and the =test element
3. $ (' div[title!=test] ')----div The!=test element of the title property includes the
4. $ (' div[title^=te] ')----div with the title attribute starting with TE element
5. $ (' div[title$=ts] ')----The value of the title property in the div with a TS-terminated element
6. $ (' div[title*=es] ')----The value of the title property in the div contains the elements of ES
7. $ (' div[id][title*=es] ')----DIV has an id attribute and the Title property value contains an element of ES

----------

* * child element Filter Selector * *---* * IMPORTANT * *

1. $ (' Div. one:nth-child (2) ')----Select the second child element of class one in div below the table index starting from 1
2. $ (' Div:nth-child (odd) ')----select odd in div
3. $ (' div.one:first-child ')----Select the first child element in a div block of class one
4. $ (' div.one:last-child ')----Select the last child element in the DIV block of class one
5. $ (' div.one:only-child ')----only one child element

----------

* * Form Object Properties * *

1.: Enabled Select available elements
2.:d isabled Select an unavailable element
3.: checked--Multi Box selected
4.: Selected--The drop-down list is selected

----------

# detailed selector view jquery API #

JQuery Summary Knowledge Point one