Jquery
I. Introduction of jquery
1. jquery is a lightweight, browser-compatible JavaScript library
2. jquery makes it easier for users to work with HTML Document, Events, animate effects,
The convenience of Ajax interaction, which greatly simplifies JavaScript programming, is designed to:
Write less, does more.
Ii. jquery Objects
The jquery object is the object that is created after wrapping the DOM object through jquery, and the jquery object is the jquery unique
If an object is a jquery object, then it can use the method in jquery: For example, $ ("#il"). HTML ()
$ ("#il"). html () means: Gets the HTML code of an element with an ID value of I1, where HTML () is the method in jquery
Equivalent to: document.getElementById ("I1"). InnerHTML;
Although a jquery object is produced after wrapping a DOM object, the jquery object cannot use any of the DOM object's methods.
Similarly, DOM objects cannot use the methods in jquery.
A convention, when declaring a jquery object variable, precede the variable name with $:
var $variable = jquery Object
var variable = dom Object
$variable [0]//jquery object to DOM object
$ ("I1"). html (); jquery objects can use the jquery method
$ ("I1") [0].innerhtml; DOM objects using the DOM method
Iii. the basic syntax of jquery
$ (selector). Action ()
1. Find tags
Selector:
ID selector:
$ ("id")
Tag Selector:
$ ("TagName")
Class selector:
$ (". ClassName") in conjunction with $ ("div.c1")//Find div tags with c1.class class
All element selectors:
$("*")
Combo selector:
$ ("#id,. Classname,tagname")
Hierarchy selector:
X and y can be any selector
$ ("x y"); All descendants of X Y (descendants)
$ ("x > Y"); All sons of X Y (son)
$ ("x + y"); Find all the y immediately following the X
$ ("x ~ y"); X after all the brothers Y
Basic filters:
: First//One
: Last//FINAL
: EQ (Index)//index equals that element of index
: even//matches all elements with an even number of index values, counting from 0
: Odd//matches all elements with an odd index value, counting from 0
: GT (Index)//matches all elements greater than the given index value
: LT (index)//matches all elements less than the given index value
: not (element selector)//Remove all labels that meet not criteria
: Has (element selector)//Select all tags containing one or more tags (referring to the descendant elements)
Example:
$ ("Div:has (H1)")//Find div tags with h1 tags in all descendants
$ ("Div:has (. C1)")//Find DIV tags with C1 style classes in all descendants
$ ("Li:not (. C1)")//Find all Li tags that do not contain C1 style classes
$ ("Li:not (: Has (a)) ')//Find all descendants of the Li label that do not contain a tag
Form Common filters:
: Text
:p Assword
: File
: Radio
: checkbox
: Submit
: RESET
: button
Example:
$ (": checkbox")//Find All checkboxes
Form Object Properties:
: Enabled
:d isabled
: Checked
: Selected
Example:
<form>
<input name= "Email" disabled= "disabled"/>
<input name= "id"/>
</form>
$ ("input:enabled")//Find available Input tags
<select id= "S1" >
<option value= "Beijing" > Beijing </option>
<option value= "Shanghai" > Shanghai </option>
<option value= "Guagnzhou" > Guangzhou </option>
<option value= "Shenzhen" > Shenzhen </option>
</select>
Basic knowledge of jquery