Catalog
1. jQuery Start
1.1 Entry function
Also known as preload function
<script>
// First Writing Method
$(document).ready(function(){
// Write your code here...
});
// Second Writing
$(function(){
// Write your code here...
})
</script>
JavaScript
Get in
html
Method of element
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
jQuery
Methods to get objects in
$()
1.2 jQuery
Obtain
DOM
element
$()
To get the object
(DOM
element
)
2. Selector
Selectors are designed to help us select elements, such as in
css
Selector in, modifies the style after selecting the element, and modifies the style in
Jquery
Once the element is selected by the selector in the
DOM
Operational
Most
css
Selectors can be applied to
jQuery
Selector
CSS
Selector Classification
(1)
basics
*
Number selector
Label
(
element
)
selector
Class selector
.
Class name
id
selector
#id
value
(2) Composite selector
Descendant Selectors
E F
Look for
E
Inside an element
F
element
Subset selector
E>F
Look for
E
A subset of elements
F
element
Neighbor Brother Selector
Sibling selector
Multiple selectors
(3) Pseudo-class selector
:hover
:active
:visited
:link
:fifirst-child
:last-child
:nth-child()
:not()
:nth-of-type()
(4) Pseudo Object Selector
::before
::after
::fifirst-line
::fifirst-letter
3. Styles
1.
css()
by
dom
Object Setting Style
First usage
:
css(
Property Name
,
Attribute Value
)
Only one style can be set at a time
<div class="demo">
Set a style
</div>
<script>
$('.demo').css('color','blue').css('background-color','red')
</script>
Second usage
:
css({
Property Name
:
Attribute Value
,
Property Name
:
value
....})
Set a style
4. DOM Operation
1. append()
Append child elements to the end of matched parent elements
<div class="add">append</div>
<script>
/*
1. Create a dom element
jQ: $('<a href="http://www.baidu.com">Baidu</a>')
2. Get parent element
$('.add')
3. Append with append()
Parent element object. Append (child element to append)
*/
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').append(obj)
</script>
2. appendTo()
Append child elements to parent elements
<div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>
3. prepend()
Add a child element to the beginning of a parent element
<div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)
//Result: <div class="add"><a
href="http://www.baidu.com">taobao</a>prepend</div>
</script>
4. prependTo()
The element is preceded by another set of specified element elements.
<div class="parent">Bao Jianfeng comes out of sharpening</div>
<span id="child">Plum blossom comes from bitter cold</span>
<script>
$(function(){
$('#child').prependTo($('.parent'))
// Effect: <div class="parent"> <span id="child">Plum blossom fragrance comes from bitter cold </span>Sword blade comes out from sharpening </div>
})
</script>
5. remove()
Remove matched elements
<p>Apple 01</p>
<p class="two">Apple 02</p>
<p>Apple 03</p>
<script>
//$('p').remove() // remove() method deletes all matching elements without passing parameters
$('p').remove('.two') // Remove p tag with class name equal to two
</script>
5. Attributes
1. attr()
Get or set properties
<div class="demo" title="This is a test code">attr Method </div>
<script>
// attr() Gets the value of the attribute of the matching element
var res = $('.demo').attr('title')
// attr() sets the attribute value of the matching element
$('.demo').attr('title','this is a test code') // Modify only one attribute value
$('.demo').attr({name:'code',id:'test'}) // Setting multiple properties
</script>
2. removeAttr()
Remove Attribute
<div class="demo" title="This is a test code" id='test'>attr Method </div>
<script>
$('.demo').removeAttr('id')
</script>
Note: Only one parameter is accepted
3. addClass()
Add Class Name
<div id="demo"> Day by Day</div>
<script>
$(this).addClass('active')
</script>
4. removeClass()
Removed from class name
<div id="demo" class='active'> Day by Day</div>
<script>
$(this).removeClass('active')
</script>
5. toggleClass()
Delete when a class name exists and add when it does not exist
<div id="demo"> Day by Day</div>
<script>
$('#demo').click(function(){
$(this).toggleClass('active')
</script>
6. html()
Gets or sets the content of the matching element
(
Include Tags
)
<div class="content"><span>author:Wang Zhihuan</span><br>Day by Day</div>
<script>
$(function(){
// html() Gets the content of the element as innerHTML in JavaScript
var con = $('.content').html()
// console.log(con);
// html() sets the content of the matching element
$('.content').html('go<a href="http://Jd. COM "target="_ Blank ">Jingdong</a>Online shopping")
})
</script>
7. text()
<div class="content"><span>author:Wang Zhihuan</span><br>Day by Day</div>
<script>
$(function(){
// text() Gets the text content of an element that does not contain the same tag as innerText in JavaScript
var con = $('.content').text()
// console.log(con);
// text() Sets the text content of the matching element
$('.content').text('go<a href="http://Jd. COM "target="_ Blank ">Jingdong</a>Online shopping")
})
</script>
Be careful:
text()
and
html()
The biggest difference,
text()
Only text content is processed, labels are not recognized, and
html()
Method can be identified
Label
text()
and
html()
Method cannot be used to get or set the value of a form label except
button
and
textarea
These two items.
Outside Label
8. val()
Gets or sets the value of the form label
<input type="text" id="user" value="zhangsan">
<script>
$(function(){
// val() Gets the value of the form label
var res = $('#user').val()
// console.log(res);
// val() Sets the value of the matching element
$('#user').val('Zhang San')
})
</script>
9. prop()
Set or get the attribute value of an element
10. removeProp()
Move Out Attributes
attr()
and
prop()
Application Scenarios
prop()
Methods are often used to label property values that have
true
and
false
When using, for example:
checked
,
seleted
,
readonly
,
disabled
6. Events
1.1
Mouse events
Grammar:
Event Object
(dom
element
).
Event Name
(function(){})
1.
Mouse Click Event
click()
<style>
.clk{
width: 200px;
height: 180px;
background-color: red;
}
.active{
background-color: blue;
}
</style>
<div class="clk"></div>
<script>
$(function(){
$('.clk').click(function(){
$('.clk').toggleClass('active')
})
})
</script>
2.
Mouse Move Out Event
mouseout()
3.
Mouse Skip Event
mouseover()
1.2
Form Events
1.
Focus Events
(
Get Focused Events
) focus()
2.
Loss of Focus Event
blur()
3.
Content Change Events
change()
4.
Form Submission Events
submit()
Be careful
:
Object is
form
Label
1.3
Keyboard events
1.
KeyDown
keydown()
2.
Keyboard popup event
keyup()
3.
Keyboard press events
keypress()
Keyboard code
1.4
jq
Unique event method in
1.
Event Binding Method
bind()
2.
Event unbound method
unbind()
3.
Trigger Event Method Only Once
one()
4. on()
Event binding of elements requiring event delegation
Typically created dynamically
dom
Element requires event delegation
7. Animation effects
1.1 Show and hide.
show()
display
<button>display</button>
<button>hide</button>
<div class="show">display</div>
<script>
$(function(){
// Click the display button div to display
$('button:eq(0)').click(function(){
$('.show').show(2000)
})
})
</script>
hide()
hide
<button>display</button>
<button>hide</button>
<div class="show">display</div>
<script>
$(function(){
// Click the Hide button div to disappear
$('button:eq(1)').click(function(){
$('.show').hide(2000,function(){
$(this).show(1000)
})
})
})
</script>1.2 Drop-up and Drop-down
slideUp()
Pull Up
slideDown()
drop-down
slideToggle()
If the element does not display a drop-down
Displayed
Is Pull Up
<button>Pull Up</button>
<button>drop-down</button>
<button>toggle</button>
<div class="show">div Label</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").slideUp(2000)
})
$("button:eq(1)").click(function(){
$(".show").slideDown(2000)
})
$("button:eq(2)").click(function(){
$(".show").slideToggle(2000)
})
})
</script>1.3 Fade in and out
fadeIn()
Fade in
fadeOut
Fade out
fadeToggle()
<button>Fade in</button>
<button>Fade out</button>
<button>toggle</button>
<div class="show">div Label</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").fadeIn(2000)
})
$("button:eq(1)").click(function(){
$(".show").fadeOut(2000)
})
$("button:eq(2)").click(function(){
$(".show").fadeToggle(2000)
})
})
</script>1.4 Custom Animation
animate()
<style>
.show{
width: 240px;
height: 180px;
background-color: red;
}
</style>
<body>
<div class="show">div Label</div>
<script>
$(function(){
$(".show").animate({
"margin-top":'200px',
"margin-left":'300px'
},2000)
})
</script>