JQuery has 1.x, 2.x, 3. x three major versions, it is recommended to use the latest version of 1.x (compatibility change), this version is used for jquery-1.12.4.js
<!DOCTYPE html>S1.html
Convert jQuery to Dom:
> $('#i1')< [<div id="i1">James</div>]> document.getElementById('i1')< <div id="i1">James</div>>$('#i1')[0]< <div id="i1">James</div>
Convert Dom to jQuery:
> $('#i1')< [<div id="i1">James</div>]> d1 = document.getElementById('i1')< <div id="i1">James</div>> $(d1)< [<div id="i1">James</div>]
JQuery Selector
I. Basic Selector
①Id Selector
<div id="id">James</div>$('#id')
②Clss Selector
<div class="c1">James</div>$('.c1')
③Tag Selector
Find all a tags: <div id = "id"> James </div> <div class = "c1"> <a> f </a> </div> <div class = "c1"> <a> f </a> </div> $ ('A ')
④* Indicates all
$('*')
⑤Multi-query (selector1, selector2, selectorN)
<div id="id">James</div><div class="c1"> <a>f</a></div><div class="c1"> <a>f</a> <a>f</a></div>$('#id,.c1,a')
Ii. Hierarchical Selector
①Ancestor descendant(Find all contained items)
<div id="i1" class="c1"> <div> <a>a</a> </div> <a>b</a> <a>c</a></div>> $('#i1 a')< [<a>a</a>, <a>b</a>, <a>c</a>]
②Parent> child(Only search for all at the next level)
<div id="i1" class="c1"> <div> <a>a</a> </div> <a>b</a> <a>c</a></div>> $('#i1 > a')< [<a>b</a>, <a>c</a>]
③Prev + next(Find one adjacent to the same level)
<div id="i1" class="c1"> <div> <input name="name"/> <a>a</a> </div> <a>b</a> <input name="name"/> <a>c</a> <a>d</a></div>> $('input + a')< [<a>a</a>, <a>c</a>]
④Prev ~ Siblings(Search for all items under the same level)
<div id="i1" class="c1"> <div> <input name="name"/> <a>a</a> </div> <a>b</a> <input name="name"/> <a>c</a> <a>d</a></div>> $('input ~ a')< [<a>a</a>, <a>c</a>, <a>d</a>]
3. Basic Filter
Operate html files:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
①: First(Obtain the First Matching Element)
> $('ul li:first')< [<li>list item 1</li>]
②: Last(Obtain the last matched element)
> $('ul li:last')< [<li>list item 5</li>]
③: Eq(Match an element with a given index value)
> $('ul li:eq(1)')< [<li>list item 2</li>]
④: Gt(Match all elements greater than the given index value)
> $('ul li:gt(2)')< [<li>list item 4</li>, <li>list item 5</li>]
⑤: Lt(Match all elements smaller than the given index value)
> $('ul li:lt(2)')< [<li>list item 1</li>, <li>list item 2</li>]
⑥Others
: Not (selector) removes all elements that match the given selector: even matches all elements whose index values are even. Starting from 0: odd matches all elements whose index values are odd, counting from 0: lang (language) selects all the elements of the specified language: header matching title elements such as h1, h2, h3: animated matches all the elements in the animation being executed: focus matches the element currently obtaining the focus: root selects the root element of the document: targe selects the target element represented by the formatted identifier of the document URI
More...
Iv. Attribute Selector
①[Attribute](Match the element containing the given attribute)
<div class="c1"> <div James="123">123</div> <div James="456">456</div></div>> $('div[James]')< [<div james="123">123</div>, <div james="456">456</div>]
② [Attribute = value](Matching a given attribute is an element of a specific value)
<div class="c1"> <div James="123">123</div> <div James="456">456</div></div>> $('div[James="456"]')< [<div james="456">456</div>]
③Others
[Attribute! = Value] matches all attributes that do not contain the specified value, or the element [attribute ^ = value] With an attribute not equal to a specific value matches the given attribute with the element [attribute $ = value] starting with some values to match the given attribute with elements ending with some values. [attribute * = value] matching a given attribute is a composite attribute selector of an element [selector1] [selector2] [selectorN] containing some values, when multiple conditions must be met at the same time
More...
V. Form Selector
Operate html files:
<form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button></form>
Form.html
①: Input(Match all input, textarea, select, And button elements)
> $(':input')< [<input type="text">, <input type="checkbox">, <input type="radio">, <input type="image">, <input type="file">, <input type="submit">, <input type="reset">, <input type="password">, <input type="button">, <select>…</select>, <textarea></textarea>, <button></button>]
②: Text(Match all single row text boxes)
> $(':text')< [<input type="text">]
③: Password(Match all password boxes)
> $(':password')< [<input type="password">]
④: Radio(Match all radio buttons)
> $(':radio')< [<input type="radio">]
⑤: Checkbox(Match all check boxes)
> $(':checkbox')< [<input type="checkbox">]
⑥:Submit(Match all submit buttons)
> (':submit')< [<input type="submit">, <button></button>]
7.: Image(Match all image domains)
> $(':image')< [<input type="image">]
Bytes: Reset(Match all reset buttons)
> $(':reset')< [<input type="reset">]
Bytes: Button(Match all buttons)
(':button')[<input type="button">, <button></button>]
Bytes : File(Match all file domains)
> $(':file')< [<input type="file">]
6. Form Object Attributes
① : Enabled(Match all editable elements)
<form> <input name="email" disabled="disabled" /> <input name="id" /></form>> $("input:enabled")< [<input name="id" />]
②: Disabled(Match all uneditable elements)
<form> <input name="email" disabled="disabled" /> <input name="id" /></form>> $("input:disabled")< [<input name="email" disabled="disabled" />]
③: Checked(Match all selected elements)
<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /></form>> $("input:checked")< [<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]
④: Selected(Match all selected option elements)
<select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option></select>> $("select option:selected")< [<option value="2" selected="selected">Gardens</option>]
JQuery exercises
Reference document-jQuery API Chinese online manual