[contents]
1, About jQuery
2, Basic use of jQuery
1, About jQuery
1. Introduction
jQuery encapsulates the native js code (with many additional functions)
Can let you write less code to complete js operation
Similar to the module in python, the front-end module is not called "class library"
If you are compatible with multiple browsers, you don't need to consider browser compatibility when using jQuery
jQuery also needs to import when it is used
But its files are very small (tens of kilobytes) and do not affect the network speed
The purpose of jQuery
write less do more
Let you do more with less code
2. Learning objectives
selector
Filter
Style operation
Text operation
Attribute operation
Document processing
event
Animation effect
plug-in unit
each, data, AJAX (key django part)
#How to solve the problem of multiple files repeatedly writing the code of the introduced statement
It can be added automatically by means of pycharm automatic initialization code function
to configure
edit
file and code template
"" "I don't want to download the jQuery file. Can I use it?"? ""
#2. Direct introduction of CDN service provided by jQuery (based on network direct request loading)
CDN: content distribution network
There are free and charged CDN
Front end free cdn website:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"" "your computer must have a network" ""
#jQuery basic syntax
JQuery (selector). action()
Keep the tenet of jQuery$
jQuery() === $()
#jQuery vs. js code
eg: change the text color inside the p label to red
//Native js code operation label
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
//jQuery operation label
$('p').css('color','blue')
3. How to find labels
(1) Basic selector
// id selector
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class selector
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
// tag chooser
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
"""Be sure to distinguish(a key)"""
// jQuery How objects become label objects
undefined
$('#d1')[0]
<div id="d1">...</div>
document.getElementById('d1')
<div id="d1">...</div>
// How to transfer a label object jQuery object
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]
(2) Combination selector / grouping and nesting
$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span,
div.c1, span, span, prevObject: w.fn.init(1)]
$('#d1,.c1,p') # Juxtaposition+Mixed use
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
$('div span') # Offspring
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span') # Son
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span') # Adjacent
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span') # younger brother
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
(3) Basic filter
$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first') # Eldest son
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:last') # youngest son
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') # Index
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:even') # Even index 0 included
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length:
5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:odd') # Odd index
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength:
5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:gt(2)') # Greater than index
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16:
lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:lt(2)') # Less than index
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:not("#d1")') # Remove tags that meet the criteria
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') # Select a label that contains one or more labels
w.fn.init [div, prevObject: w.fn.init(1)]
(4) Property selector
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
(5) Form filter
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') # Equivalent to the first one above
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') # Equivalent to the second one above
w.fn.init [input, prevObject: w.fn.init(1)]
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
//Form object properties
:enabled
:disabled
:checked
:selected
"""exceptional case"""
$(':checked') # It will checked and selected All of them
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected') # It won't just take selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked') # Put a restriction on yourself
w.fn.init [input, prevObject: w.fn.init(1)]
(6) Filter method
$('#d1').next() # Next at the same level
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3:
span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextUntil('.c1') # Last not included
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength:
4prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('.c1').prev() # the previous
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1,
prevObject: w.fn.init(1)]__proto__: Object(0)
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('#d3').parent() # First level parent label
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() # Son
$('#d2').siblings() # All at the same level
$('div p')
# equivalence
$('div').find('p') # find Filter out the desired tags from an area
"""The following two are equivalent"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span,
prevObject: w.fn.init(1)]__proto__: Object(0)
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
w.fn.init [span, prevObject: w.fn.init(3)]
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]