Python development [front-end]: jQuery, python front-end jquery
JQuery is a fast and concise JavaScript framework. It is an excellent JavaScript code base after Prototype (Or JavaScript framework). The purpose of jQuery's design is "write Less, Do More", which advocates writing Less code and doing More things. It encapsulates common functional code of JavaScript and provides a simple JavaScript design mode to optimize HTML document operations, event processing, animation design, and Ajax interaction. The core features of jQuery can be summarized as: It has unique chain syntax and short and clear multi-function interfaces; it has efficient and flexible css selectors and can be expanded to CSS selectors; it has convenient plug-in extension mechanisms and rich plug-ins. JQuery is compatible with mainstream browsers, such as IE 6.0 +, FF 1.5 +, Safari 2.0 +, and Opera 9.0 +.
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
Reference:
<script src="jquery-1.12.4.js"></script>
-"" Jquery-1.12.4.js, jquery-1.12.4.min.js
Conversion Between Dom and jQuery objects
<!DOCTYPE html>S1.htmlConvert 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 URIMore...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 timeMore...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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
