Please enable JavaScript.
Coggle requires JavaScript to display documents.
jQuery, Advanced Javascript - Coggle Diagram
jQuery
jQuery - Events
click
dbclick
mouseenter
mouseleave
keypress and keydown
keyup
change
focus
blur
load or ready
resize
scroll
$("element").event(function(){
// code to be executed when the event occurs
});
$(document).ready(function(){
// Code to be executed
});
$("element").on({
click: function(){
//code to be executed on click
},
mouseenter: function(){
//code to be executed
},
mouseleave: function(){
//code to be executed
},
};)
$("#fullName").val()=="" ? $("#submit").hide() : $("#submit").show();
*/
jQuery - Effects
$("#hide-button").click(function(){
$("#hide-button").hide(2000);
});
$("#hide-button").click(function(){
$("#hide-button").hide(2000, function(){
});
$("#hidden-text").show();
});
hide(), show() and toggle()
Toggle
$("#toggle-tab").click(function(){
$("#tab-content").toggle();
$("#toggle-tab").toggleClass("flip");
});
$("#toggle-tab").click(function() {
$("#tab-content").slideToggle(500);
$("#toggle-tab").toggleClass("flip");
});
fade
$("#toggle-tab").click(function(){
$("#tab-content").fadeToggle();
$("#toggle-tab").toggleClass("flip");
});
jQuery - Forms
.val()
$("#name_field").val();
var contentInput = $("#name_field").val("ThuQui");
$("#options option:selected").text();
Selectbox
$("#options").change( function(){
var newValue = $("#options option:selected").text()
console.log(newValue);
});
Radio Buttons
$("input[name='gender']").change(function(){
console.log("change");
});
var()
$("input[name='gender']").change(function(){
console.log($("input[name='gender']:checked").val());
});
$("input[name='gender']").change(function(){
console.log($("input[name='gender']:checked").parent().text());
});
CheckBoxes
$("input[name='interest']").change(function(){
var selectedCheckboxes = $("input[name='interest']:checked");
$.each(selectedCheckboxes, function(index, value){
console.log($(value).parent().text() );
});
});
.empty() and .remove()
$("#empty_paragraph").hide();
$("#empty_paragraph").show();
$("#empty_paragraph").remove();
$("#empty_paragraph").empty();
jQuery - CSS Classes Manipulation
add class:
$("#add_class").click(function(){
$("#example-paragraph").addClass("styling");
});
remove_class
$("#remove_class").click(function(){
$("#example-paragraph").removeClass("styling");
});
toggle_class
.html()
var content = $("#sample_text").html();
console.log(content);
$("#sample_text").html("New content")
.attr()
$("#link-element").attr("href");
$("#link-element").attr("href","
https://udemy.com
");
S.fn.init [a#link-element]
Change the href
$("#change_image").click(function(){
$("#imagem_js").attr("src", "")
});
Callback Functions
$( "#hide" ).click(function() {
$(".exemplo").hide();
});
window.setTimeout(function(){},1000);
.text()
var text_content = $("#sample-text-only").text();
jQuery - Animate
$("#animate").click(function(){
$("#square").animate({
width: '+=20px'
},500);
$("#square").animate({
height: '+=20px'
},500);
});
jQuery syntax .....
jQuery - DOM Manipulation
Advanced Javascript