jquery first knowledge, common selectors, Ajax

jquery is a fast, concise JavaScript framework. The purpose of jquery design is "write Less,do more", which advocates writing less code and doing more things. It encapsulates

JavaScript's common feature Code provides a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction. The core features of jquery are:

with a unique chain syntax and a short clear multi-function interface, with efficient and flexible extensible CSS selector, with convenient plug-in extension mechanism and rich plug-ins.

This article mainly records several large CSS selectors and other commonly used selectors as well as Ajax.

start by importing jquery packets and referencing them in the <script></script> tab

eg.

1. #id:

matches an element according to the given ID.

using any metacharacters as the text part of the name, it must be escaped by two backslashes.

EG1.

<div id= "Notme" ><p>id= "Notme" </p></div>
<div id= "mydiv" >id= "mydiv" </div>

$ ("#myDiv");

results; [<div id= "mydiv" >id= "mydiv" </div>]

EG2.

<span id= "Foo:bar" ></span>
<span id= "Foo[bar" ></span>
<span id= "Foo.bar" ></span>

#foo \\[bar\\]

results: [<span id= "Foo[bar]" ></SPAN>]

2.element

Matches all elements according to the given element tag name

eg.

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

$ ("div");

results: [<div>div1</div>, <div>DIV2</div>]

3..class

Matches the element according to the given CSS class name.

eg.

<div class= "Notme" >div class= "Notme" </div>
<div class= "MyClass" >div class= "MyClass" </div>
<span class= "MyClass" >span class= "MyClass" </span>

$ (". MyClass");

result: [<div class= "MyClass" >div class= "MyClass" </DIV> <span class= "MyClass" >span class= "MyClass "</span>"

4.*

Match all elements

eg.

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

$("*");

results: [<div>div</div><span>span</span><p>p</p>]

5. Selector1,selector2,selectorn

The elements that match each selector are merged and returned together. You can specify any number of selectors and merge the matched elements into one result.

eg.

<div>div</div>
<p class= "MyClass" >p class= "MyClass" </p>
<span>span</span>
<p class= "Notmyclass" >p class= "Notmyclass" </p>
$ ("Div,span,p.myclass");

results; [<div>div</div>, <p class= "MyClass" >p class= "MyClass" </P>, <span>span</span>]

6.ancestor descendant

Matches all descendant elements (descendants) under a given ancestor element.

eg.

<form>
<label>Name:</label>
<input name= "Name"/>
<fieldset>
<label>Newsletter:</label>
<input name= "Newsletter"/>
</fieldset>
</form>
<input name= "None"/>

$ ("form input");

result: [<input name= "name"/>, <input name= "newsletter"/>]

7.parent > Child

Matches all child elements under the given parent element (not descendants, only the next level child element).

eg.

<form>
<label>Name:</label>
<input name= "Name"/>
<fieldset>
<label>Newsletter:</label>
<input name= "Newsletter"/>
</fieldset>
</form>
<input name= "None"/>

$ ("form > Input");

result: [<input name= "name"/>]

8.prev + Next

Matches all next elements immediately following the Prev element. (Note that the preceding cannot be checked out).

eg.

<form>
<label>Name:</label>
<input name= "Name"/>
<fieldset>
<label>Newsletter:</label>
<input name= "Newsletter"/>
</fieldset>
</form>
<input name= "None"/>

$ ("form + input");

results; [<input name= "name"/>, <input name= "newsletter"/>]

9. prev ~ siblings

Matches all siblings elements after the Prev element.

eg.

Form>
<label>Name:</label>
<input name= "Name"/>
<fieldset>
<label>Newsletter:</label>
<input name= "Newsletter"/>
</fieldset>
</form>
<input name= "None"/>

$ ("form ~ input");

results; [<input name= "name"/>]

Ajax:

Asynchronous JavaScript and XML (English: Asynchronous JavaScript and XML abbreviation AJAX). AJAX is the art of exchanging data with a server, without overloading all pages

in the case, the implementation of the update on some of the pages is a JavaScript-based and HTTP request (HTTP requests), widely used in browser web development techniques. Ajax is a comprehensive application of many technologies.

eg.

Code:

Effect: