JQurey
load JQuery
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
//load sequence: <head> -> <body>
//better load jQuery before </body>
$(document.ready(()=>{}));
load when document load ready
DOM
change element text
| Method |
Sample |
| .html() |
$(‘p’).html(‘content |
add new element
| Name |
note |
| append |
append element to target |
| prepend |
insert element to target after before |
Selector
getElementById('test').id;
//JS getElementById
$('div').attr('id');
//JQuery getElementById
| JQuery |
JS |
| $(‘tagName’) |
document.getElementByTagName(‘TagName’) |
| $(‘#ID’) |
document.getElementById(‘ID’) |
| $(‘.CLASS’) |
document.getElementByClassName(‘.CLASS’) |
| $(‘div#ID span’) |
<div id=’ID’> <span></span></div> |
| $(‘SELECTOR:first’) |
//first one in selection |
| $(‘SELECTOR:last’) |
//last one in selection |
| $(‘SELECTOR[attribute]’) |
//Select Element have attribute |
| $(‘SELECTOR[attribute=value]’) |
//Select Elements’ attribute value = ‘’ |
Filter
| JQuery |
Note |
| first() |
//first |
| last() |
//last |
| eq(num) |
//NUM st Clone |
| parent |
//parent |
| parents |
//parents |
| children() |
//children notes |
| find(SELECTOR) |
//find Elements |
| siblings() |
//Same layer Elements |
Get Other Tag
$('div').height();
//get default tag : height
$('#hey').attr('yourtag');
//get custom tag
Change Content
Change Tag content
document.write($('#ID').attr('wow','new Content'))
//change tag wow content -> 'new Content'
$('#ID').html();
//get Element content (keep tag)
CSS
<style>
.CLASS{
background-color:pink;
}
</style>
$('#ID').addClass('CLASS');
//add class NOT .CLASS
$('#ID').removeClass('CLASS');
//Delete class
$('#ID').toggleClass('CLASS');
//active css like switch;
$('#ID').css(PROPERTY, VALUE)
$('#ID').css({P1:V1,P2:V2})
Attribute
$('#ID').attr('attribute')
//get Attribute
$('#ID').attr('Attribute',"Value")
//Change Attribute's value
$('#ID').removeAttr('Attribute')
//remove Attribute
Variable
consist $NAME = $('#ID');
//create JQuery getElement
$NAME.hide();
//call function
$NAME.attr('TAG','Repalced Content');
//change variable content
Clone
$hello = $('#ID').clone(true);
$('body').append($hello);
//add $hello to body/ any parent node
Animation
| Animation |
note |
| FadeToggle() |
Fade out |
| FadeTo(‘slow’,0.2) |
Fade out to 20% |
| $(“#ID”).animate({left:”100px”},1000) |
move left 100px in 1000s |
| $(‘#ID’).animate({left:’100px’,top:’50px’},1000) |
move 1000px in 1000s |
Event
| Note |
JQuery |
|
| load |
$(document).ready() |
|
| load |
$() |
|
| load |
load() |
|
| |
|
Mouse Event |
| click |
$(#ID).click(function(){}); |
|
| double click |
$(#ID).dblclick(function{}); |
|
| mousedown |
|
|
| mouseup |
|
|
| mousemove |
|
|
| mouseenter |
|
|
| mouseover |
|
|
| mouseleave |
|
|
| mouseout |
|
|
| |
|
Keyboard Event |
| keydown |
$(#ID).keydown(function(e){});
//Get value : e.which |
|
| keypress |
//Press |
|
| Keyup |
//when key press end |
|
$('#ID').on("Event",function(){});
//Band event