diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 00000000..f86fd77f --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,64 @@ +main{ + display: grid; + grid-template-columns: 1fr 2fr; +} + +.center{ + text-align: center; + background-color: aqua; + grid-column: 2; +} + +header{ + text-align: center; + background-color: blueviolet; +} + +.left{ + background-color: rgb(230, 224, 224); + grid-column: 1; +} + +.left_list{ + color: black; +} + +.left_li{ + padding-bottom: 10px; +} + +.left_li:hover{ + cursor: pointer; +} + +.center_div{ + display: yes; + border-width: 10px; + padding-bottom:50px; +} + +img{ + max-width: 50px; +} + +.bold{ + font-weight: bold; +} + +.surpriseButton{ + display: none; + text-align: center; +} + +#container { + width: 400px; + height: 400px; + position: relative; + background: yellow; + } + #animate { + width: 50px; + height: 50px; + position: absolute; + background-color: red; + } \ No newline at end of file diff --git a/assets/images/JavaScript_logo.png b/assets/images/JavaScript_logo.png new file mode 100644 index 00000000..7b5ffab2 Binary files /dev/null and b/assets/images/JavaScript_logo.png differ diff --git a/assets/images/jquery.png b/assets/images/jquery.png new file mode 100644 index 00000000..d4a8fad8 Binary files /dev/null and b/assets/images/jquery.png differ diff --git a/assets/js/clickonlist.js b/assets/js/clickonlist.js new file mode 100644 index 00000000..cff12d54 --- /dev/null +++ b/assets/js/clickonlist.js @@ -0,0 +1,27 @@ +var ol1 = document.getElementById("left_ol1"); +var ol2 = document.getElementById("left_ol2"); +//allow user to select the data by clicking on the menu +const selectData =(e)=>{ + console.log(e.target); + //activate modal for the selected data + displayModal(e.target); +} + +const displayModal = (e) =>{ + document.querySelector(".ini").style.display="none"; + let centerDivs=document.querySelector(".center_div"); + centerDivs.style.display="none"; + for (i in centerDivs){ + if (e.index===i.index){ + centerDivs[i].syle.display="block" + } + } +} + +ol1.addEventListener("click", selectData); +ol2.addEventListener("click", selectData); + +modals_list=[]; +selector_list=document.querySelector("li"); + + diff --git a/assets/js/javascript.js b/assets/js/javascript.js new file mode 100644 index 00000000..3ffaee56 --- /dev/null +++ b/assets/js/javascript.js @@ -0,0 +1,308 @@ +//check if the document has loaded correctly +var htmlLoaded = false; +document.addEventListener("DOMContentLoaded", () => { + htmlLoaded = true; +}); +document.querySelector("#load_js").addEventListener("click", () => { + event.target.parentNode.querySelector("#loadP_js").innerText = htmlLoaded; + }); +//change HTML in one click +var buttonToclick_js=document.querySelector("#clickButton_js"); +buttonToclick_js.addEventListener("click", function () { + buttonToclick_js.innerHTML="clicked"; +}); + +//change HTML in two clicks +var buttonToDoubleClick_js=document.querySelector("#DoubleClickButton_js"); +buttonToDoubleClick_js.addEventListener("dblclick", function () { + buttonToDoubleClick_js.innerHTML="double-clicked"; +}); + +//print key on button +var buttonToKey_js=document.querySelector("#pressKey_js"); +buttonToKey_js.addEventListener("keypress", function () { + buttonToKey_js.innerHTML=event.key; +}); + +//print "moved cursor" on button +var buttonMovedCursor_js=document.querySelector("#hoverButton_js"); +buttonMovedCursor_js.addEventListener("mousemove", function () { + buttonMovedCursor_js.innerHTML="Moved cursor"; +}); + +//Change input text value +var input_js=document.querySelector("#inputText_js"); +var inputButton_js=document.querySelector("#inputButton_js"); +input_js.addEventListener("input", function () { + inputButton_js.innerHTML="I caught you"; +}); + +//Load image +var image_js=document.querySelector("#javascript_img"); +var imageLoadBtn_js=document.querySelector("#imageLoadBtn_js"); +image_js.addEventListener("load", function () { + imageLoadBtn_js.innerHTML="Image loaded"; +}); + +//Image fails to load +var imageFail_js=document.querySelector("#javascript_img_fail"); +var imageLoadBtnFail_js=document.querySelector("#imageLoadBtnFail_js"); +imageFail_js.addEventListener("error", function () { + imageLoadBtnFail_js.innerHTML="Image not loaded"; +}); + +//When a form is submitted +var form_js=document.querySelector("#form_js"); +var submit_js=document.querySelector("#submitButton_js"); +form_js.addEventListener("submit", function () { + event.preventDefault(); + submit_js.innerHTML="Submitted!"; +}); + +//When the user changes the option of a select element +var select_js=document.querySelector("#select_js"); +var selectButton_js=document.querySelector("#selectButton_js"); +select_js.addEventListener("change", function () { + selectButton_js.innerHTML="Changed!"; +}); + +//When the user moves the mouse cursor +var mouseBtn_js=document.querySelector("#mouseBtn_js"); +document.addEventListener("mousemove", function (){ + mouseBtn_js.innerHTML="Mouse moving"; +}); + +//When a checkbox is checked or unchecked +var select_js=document.querySelector("#checkbox_js"); +var checkButton_js=document.querySelector("#checkButton_js"); +checkbox_js.addEventListener("change", function () { + if (event.target.checked){ + checkButton_js.innerHTML="Checked!";} + else{ + checkButton_js.innerHTML="Unchecked!"; + } +}); + + +//When a ul list item is clicked, show the item that was clicked +var ul=document.querySelector("#uList_js"); +var children=ul; +children.addEventListener("click", function (e) { + e.target.style.color="blue"; +}); + +//Create an HTML element with any text value +var createButton_js=document.querySelector("#createButton_js"); +var div1_js=document.querySelector("#creationDiv"); +createButton_js.addEventListener("click", function () { + var newElement1_js=document.createElement("p"); + newElement1_js.innerHTML="Hello"; + div1_js.appendChild(newElement1_js); +}); + +//Remove an HTML element with any text value +var removeButton_js=document.querySelector("#removeButton_js"); +removeButton_js.addEventListener("click",function () { + var elementToRemove_js=document.querySelector("#remove_js"); + elementToRemove_js.remove(); +}); + +//Append an HTML element with any text value to a parent element +var appendButton_js=document.querySelector("#appendButton_js"); +appendButton_js.addEventListener("click",function () { + var elToAppend_js=document.createElement("p"); + elToAppend_js.innerHTML="Hello"; + Div_js=document.querySelector("#appendDiv") + Div_js.appendChild(elToAppend_js); +}); + + +//Prepend an HTML element with any text value to a parent element +prependButton_js.addEventListener("click",function () { + var elToPrepend_js=document.createElement("p"); + elToPrepend_js.innerHTML="Hello"; + prepDiv_js=document.querySelector("#prependDiv") + prepDiv_js.prepend(elToPrepend_js); + +}) + +//Create and add an HTML element with any text value after another element +var createAdd_js=document.querySelector("#createAdd_js"); +createAdd_js.addEventListener("click",function () { + var elToAdd_js=document.createElement("p"); + elToAdd_js.innerHTML="Hello"; + divAdd_js=document.querySelector("#divAdd") + divAdd_js.append(elToAdd_js); +}) +//Clone an HTML element within other element ''''''' +var cloneButton_js=document.querySelector("#cloneButton_js"); +cloneButton_js.addEventListener("click",function () { + var ElToClone_js=document.querySelector("#CloneMe_js"); + let clone=ElToClone_js.clone(true); + parentNode.append(clone); +}) + +//Add a class to an HTML item +var addClassButton_js=document.querySelector("#addClassButton_js"); +addClassButton_js.addEventListener("click", function () { + var newClassEl_js=document.querySelector("#classElement_js"); + console.log(newClassEl_js); + newClassEl_js.classList.add("bold"); +}) + +//Remove a class to an HTML item incomplete +var removeclassButton_js=document.querySelector("#removeclassButton_js"); +removeClassButton_js.addEventListener("click",function () { + var remClassEl=document.querySelector("#remClassEl_js"); + remClassEl.removeAttribute('class','bold'); +}) + + +//Toggle a class of an HTML item +var toggleClassButton_js=document.querySelector("#toggleClassButton_js"); +toggleClassButton_js.addEventListener("click",function () { + var togElement=document.querySelector("#toggleClassEl_js"); + togElement.classList.toggle("bold"); +}) + +//Add a disabled attribute to an HTML button +var attributeButton_js=document.querySelector("#attributeButton_js"); +attributeButton_js.addEventListener("click",function () { + console.log(1); + attributeButton_js.setAttribute("disabled", "true")}) + + +//Remove the disabled attribute of an HTML button +var remAttributeButton_js=document.querySelector("#remAtrributeButton_js"); +remAttributeButton_js.addEventListener("click",function () { + var buttonToFree_js=document.querySelector("#opressedButton_js"); + buttonToFree_js.removeAttribute("disabled")}) + +//Set a data-src attribute to a img element +var changeImgButton_js=document.querySelector("#changeImgButton_js"); +changeImgButton_js.addEventListener("click",function () { + console.log(1); + var imgToChange_js=document.querySelector("#imgToChange_js"); + imgToChange_js.src="assets/images/jquery.png"}) + +//Remove the data-src attribute of the img element +var srcRemButton_js=document.querySelector("#remImgButton_js"); +srcRemButton_js.addEventListener("click",function () { + var imgToRemove_js=document.querySelector("#imgToRem_js"); + imgToRemove_js.removeAttribute("src")}) + +//Hide an HTML element on click (display: none) +var hideButton_js=document.querySelector("#hideButton_js"); +hideButton_js.addEventListener("click",function () { + hideButton_js.style.display="none"}) + +//Show an HTML element on click (display: block) +var showButton_js=document.querySelector("#showButton_js"); +var surpriseButton_js=document.querySelector("#surpriseButton_js"); +showButton_js.addEventListener("click",function () { + surpriseButton_js.style.display="block"}) + +//Fade in an HTML element using jQuery ''''''''''' +var fadeInButton_js=document.querySelector("#fadeInButton_js"); +fadeInButton_js.addEventListener("click", function () { + newElement.textContent("Hello"); + classButton.setAttribute("display", "none")}) + +//Fade out an HTML element using jQuery'''''''''''''''''''''''' +var fadeOutButton_js=document.querySelector("#fadeOutButton_js"); +fadeOutButton_js.addEventListener("click", function () { + var newElement=document.createElement("p"); + newElement.textContent("Hello"); + classButton.setAttribute("display", "none")}) + +//Iterate a collection of elements and apply a change of style on them +var iterateButton_js=document.querySelector("#iterateButton_js"); +iterateButton_js.addEventListener("click", function () { + var iterableList_js=document.querySelector("#iterableList_js") + var iterableChildren_js=iterableList_js.children; + for (var i=0; i{ + element.style.fontWeight="bold"; +})}) + +//Get an item by id and change its font weight +var fontChangeButton_js=document.querySelector("#fontChangeButton_js"); +fontChangeButton_js.addEventListener("click", function () { + fontChangeButton_js.style.fontWeight="bold"; +}) + +//Get all the elements that have a certain class and the display property of none and change their font color''''' +var ColorChangeButton_js=document.querySelector("#sameClassButton_js"); +ColorChangeButton_js.addEventListener("click", function () { + }) + +//Get the options of a select element that are selected (attribute selected) +document.querySelector("#vanilla-selector-07 select").addEventListener("change", (e) => { + let $selectValue = document.querySelector("#vanilla-selector-07 select").value; + let $paragraph = document.querySelector("#vanilla-selector-07 .code-example__try p"); + $paragraph.innerText = "Selected " + $selectValue; + }); + +//Change the href attribute of the first element (You have to create several elements) +var hrefButton_js=document.querySelector("#hrefButton_js"); +hrefButton_js.addEventListener("click", function () { + var newElement=document.createElement("p"); + newElement.textContent("Hello"); + classButton.setAttribute("display", "none")}) + +//Show an alert with the value of the first input of the page (Create an input element to test this case) ''' first input?? +var alertButton_js=document.querySelector("#alertButton_js"); +alertButton_js.addEventListener("click", function () { + let value=document.querySelector("#inputEl_js").value + alert(value); + }) + +//Remove all items from a specific selector ''''all items form a specific selector?''' +var remSelButton_js=document.querySelector("#remSelButton_js"); +remSelButton_js.addEventListener("click", function () { + + }) + +//Animate an item after 2 seconds from the initial page load +var animButton_js=document.querySelector("#animButton_js"); +animButton_js.addEventListener("click", function () { + let id = null; + const elem = document.getElementById("animate"); + let pos = 0; + clearInterval(id); + id = setInterval(frame, 5); + function frame() { + if (pos == 350) { + clearInterval(id); + } else { + pos++; + elem.style.top = pos + "px"; + elem.style.left = pos + "px"; + } + } + }) \ No newline at end of file diff --git a/assets/js/jquery.js b/assets/js/jquery.js new file mode 100644 index 00000000..1062cc13 --- /dev/null +++ b/assets/js/jquery.js @@ -0,0 +1,309 @@ +//Check if document loaded successfully +var wasLoaded = false; +$(document).ready(function () { + wasLoaded = true; +}); +$("#load").click(() => { + $("#loadP", $(event.target).parent()).text(wasLoaded); +}); + +//Change HTML in one click +var buttonToclick=$("#clickButton"); +buttonToclick.on("click", function () { + this.innerHTML="clicked" +}); + +//Print "moved cursor" on button +var buttonMovedCursor=$("#hoverButton"); +buttonMovedCursor.mousemove(function () { + this.innerHTML="Moved cursor"; +}); + +//Change HTML in two clicks +var buttonToDoubleClick=$("#doubleClickButton"); +buttonToDoubleClick.on("dblclick", function () { + this.innerHTML="double-clicked" +}); + +//print key on button +var buttonToKey=$("#pressKey"); +buttonToKey.on("keypress", function () { + this.innerHTML=event.key; +}); + +//change when input text +var input=$("#inputText"); +var inputButton=$("#inputButton"); +input.on("input",function () { + console.log(1); + inputButton.html("I caught you!"); +}); + +//Load image +var image=$("#jquery_img"); +var imageLoadBtn=$("#imageLoadBtn"); +image.on("load", function () { + imageLoadBtn.html("Image loaded"); +}); + +//image fails to load +var imageFail=$("#jquery_img_fail"); +var imageLoadBtnFail=$("#imageLoadBtnFail"); +imageFail.on("error",function () { + imageLoadBtnFail.html("Image not loaded"); +}); + +//When a form is submitted +var submitButton=$("#submitButton"); +var form=$("#form"); +form.on("submit", function () { + event.preventDefault(); + submitButton.html("Submitted!"); +}); + +//When a selector is changed +var selector=$("#select"); +var selectButton=$("#selectButton"); +selector.on("change", function () { + selectButton.html("Changed!"); +}); + +//When the user moves the mouse cursor + +var mouseBtn=$("#mouseBtn"); +$(document).mousemove(function (){ + mouseBtn.html("Mouse moving"); +}); + + +//When a checkbox is checked +var checkbox=$("#checkbox"); +var checkButton=$("#checkButton"); +checkbox.change(function() { + if ($(event.target).is(":checked")) { + checkButton.html("Checked!");; + } else { + checkButton.html("Unchecked!");; + } + }); + + +//When a ul list item is clicked, show the item that was clicked +var ul=$("#uList"); +var children=ul; +children.on("click", function (e) { + e.target.style.color="blue"; +}); + + +//Create an HTML element with any text value +var createButton=$("#createButton"); +var div1=$("#creationDiv"); +createButton.on("click", function () { + var newElement1=$("

Hello

"); + div1.append(newElement1); +}); +//Remove an HTML element with any text value +var removeButton=$("#removeButton"); +removeButton.on("click",function () { + var elementToRemove=$("#remove"); + elementToRemove.remove(); +}); + +//Append an HTML element with any text value to a parent element +var appendButton=$("#appendButton"); +appendButton.on("click",function () { + var elToAppend=$("

Hello

"); + Div=$("#appendDiv"); + Div.append(elToAppend); +}); + + +//Prepend an HTML element with any text value to a parent element +var prependButton=$("#prependButton"); +prependButton.on("click",function () { + var elToPrepend=$("

Hello

"); + prepDiv=$("#prependDiv") + prepDiv.prepend(elToPrepend); + +}) + +//Create and add an HTML element with any text value after another element '''SAME''''''''' +var createAdd=$("#createAdd"); +createAdd.on("click",function () { + var elToAdd=$("

Hello

"); + divAdd=$("#divAdd"); + divAdd.append(elToAdd); +}) +//Clone an HTML element within other element NOIDEA +var cloneButton=$("#cloneButton"); +cloneButton.on("click",function () { + var ElToClone=$("#CloneMe"); + let clone=ElToClone.clone(true); + parentNode.append(clone); +}) + +//Add a class to an HTML item +var addClassButton=$("#addClassButton"); +addClassButton.on("click", function () { + var newClassEl=$("#classElement"); + newClassEl.addClass("bold"); +}) + +//Remove a class to an HTML item incomplete +var removeClassButton=$("#removeClassButton"); +removeClassButton.on("click",function () { + var remClassEl=$("#remClassEl"); + remClassEl.removeClass('bold'); +}) + + +//Toggle a class of an HTML item +var toggleClassButton=$("#toggleClassButton"); +toggleClassButton.on("click",function () { + var togElement=$("#toggleClassEl"); + togElement.toggleClass("bold"); +}) + +//Add a disabled attribute to an HTML button +var attributeButton=$("#attributeButton"); +attributeButton.on("click",function () { + attributeButton.prop("disabled", "true"); +}) + + +//Remove the disabled attribute of an HTML button +var remAttributeButton=$("#remAtrributeButton"); +remAttributeButton.on("click",function () { + var buttonToFree=$("#opressedButton"); + buttonToFree.removeAttr("disabled"); +}) + +//Set a data-src attribute to a img element +var changeImgButton=$("#changeImgButton"); +changeImgButton.on("click",function () { + console.log(1); + var imgToChange=$("#imgToChange"); + imgToChange.attr("src","assets/images/jquery.png"); +}) + +//Remove the data-src attribute of the img element +var srcRemButton=$("#remImgButton"); +srcRemButton.on("click",function () { + var imgToRemove=$("#imgToRem"); + imgToRemove.removeAttr("src"); +}) + +//Hide an HTML element on click (display: none) +var hideButton=$("#hideButton"); +hideButton.on("click",function () { + hideButton.hide(); +}) + +//Show an HTML element on click (display: block) +var showButton=$("#showButton"); +var surpriseButton=$("#surpriseButton"); +showButton.on("click",function () { + surpriseButton.show(); +}) + +//Fade in an HTML element using jQuery '''''''''''' +var fadeInButton=$("#fadeInButton"); +fadeInButton.on("click", function () { + newElement.textContent("Hello"); + classButton.setAttribute("display", "none") +}) + +//Fade out an HTML element using jQuery'''''''''''''''''''''''' +var fadeOutButton=$("#fadeOutButton"); +fadeOutButton.on("click", function () { + var newElement=$("

Hello

"); + classButton.setAttribute("display", "none") +}) + +//Iterate a collection of elements and apply a change of style on them +var iterateButton=$("#iterateButton"); +iterateButton.on("click", function () { + var iterableList=$("#iterableList"); + var iterableChildren=iterableList.children(); + iterableChildren.each(function (index, element) { + $(element).css("color","red"); + }) +}) + +//Get the parent element of a certain element and change its font weight +var ParentButton=$("#ParentButton"); +ParentButton.on("click", function () { + var parent=$("#iterableParent").parent(); + parent.css("fontWeight","bold"); + }) + +//Get the collection of children of a certain element and change its font weight'''SAME'''''' +var iterateButton2=$("#ParentButton2"); +iterateButton2.on("click", function () { + var iterableList2=$("#iterableParent2"); + var iterableChildren2=iterableList2.children(); + iterableChildren2.each(function (index, element) { + $(element).css("color","red"); + }) +}) + + +//Get all the elements that have a certain class and change their font weight +var sameClassButton=$("#sameClass"); +sameClassButton.on("click", function () { + $("button").css("fontWeight","bold"); +}) + +//Get an item by id and change its font weight +var fontChangeButton=$("#fontChangeButton"); +fontChangeButton.on("click", function () { + fontChangeButton.style.fontWeight="bold"; +}) + +//Get all the elements that have a certain class and the display property of none and change their font color''''' +var ColorChangeButton=$("#sameClassButton"); +ColorChangeButton.addEventListener("click", function () { + }) + +//Get the options of a select element that are selected (attribute selected) + + +//Change the href attribute of the first element (You have to create several elements)'''''''''' +var hrefButton=$("#hrefButton"); +hrefButton.on("click", function () { + var newElement=$("

Hello

"); + classButton.setAttribute("display", "none") +}) + +//Show an alert with the value of the first input of the page (Create an input element to test this case) ''' first input?? +var alertButton=$("#alertButton"); +alertButton.on("click", function () { + let value=$("#inputEl").value + alert(value); + }) + +//Remove all items from a specific selector ''''all items form a specific selector?''' +var remSelButton=$("#remSelButton"); +remSelButton.on("click", function () { + + }) + +//Animate an item after 2 seconds from the initial page load +var animButton=$("#animButton"); +animButton.on("click", function () { + let id = null; + const elem = $("animate"); + let pos = 0; + clearInterval(id); + id = setInterval(frame, 5); + function frame() { + if (pos == 350) { + clearInterval(id); + } else { + pos++; + elem.style.top = pos + "px"; + elem.style.left = pos + "px"; + } + } + }) \ No newline at end of file diff --git a/assets/js/variables.js b/assets/js/variables.js new file mode 100644 index 00000000..867dd3e9 --- /dev/null +++ b/assets/js/variables.js @@ -0,0 +1,2 @@ +var ol = document.getElementById("left_ol1"); +var list=document.getElementById("left_ol2"); diff --git a/index.html b/index.html new file mode 100644 index 00000000..48534dae --- /dev/null +++ b/index.html @@ -0,0 +1,733 @@ + + + + JQUERY CHEATSHEET + + + + +

WELCOME TO JQUERYPEDIA

+ +
+
+

Events

+
    +
  1. When the HTML document has been loaded and you can manipulate it with JavaScript
    2. +
  2. When an HTML item has been clicked
    3. +
  3. When an HTML item has been double clicked
    4. +
  4. When The user presses a key on the keyboard
    5. +
  5. When the user moves the mouse cursor
    6. +
  6. When the user changes a value of an text input
    7. +
  7. When an image is loaded
    8. +
  8. When an image fails to load, (if you write an incorrect image url the loading of the image will fail)
    9. +
  9. When a form is submitted
    10. +
  10. When the user changes the option of a select element
    11. +
  11. When you position the mouse over an element
    12. +
  12. When a checkbox is checked or unchecked
    13. +
  13. When a ul list item is clicked, show the item that was clicked
    14. +
+

Functions and Selectors

+
    +
  1. Create an HTML element with any text value
    2. +
  2. Remove an HTML element with any text value
    3. +
  3. Append an HTML element with any text value to a parent element
    4. +
  4. Prepend an HTML element with any text value to a parent element
    5. +
  5. Create and add an HTML element with any text value after another element
    6. +
  6. Clone an HTML element within other element
    7. +
  7. Add a class to an HTML item
    8. +
  8. Remove a class to an HTML item
    9. +
  9. Toggle a class of an HTML item
    10. +
  10. Add a disabled attribute to an HTML button
    11. +
  11. Remove the disabled attribute of an HTML button
    12. +
  12. Set a data-src attribute to a img element
    13. +
  13. Remove the data-src attribute of the img element
    14. +
  14. Hide an HTML element on click (display: none)
    15. +
  15. Show an HTML element on click (display: block)
    16. +
  16. Fade in an HTML element using jQuery
    17. +
  17. Fade out an HTML element using jQuery
    18. +
  18. Iterate a collection of elements and apply a change of style on them
    19. +
  19. Get the parent element of a certain element and change its font weight
    20. +
  20. Get the collection of children of a certain element and change its font weight
    21. +
  21. Get all the elements that have a certain class and change their font weight
    22. +
  22. Get an item by id and change its font weight
    23. +
  23. Get all the elements that have a certain class and the display property of none and change their font color
    24. +
  24. Get the options of a select element that are selected (attribute selected)
    25. +
  25. Change the href attribute of the first <a> element (You have to create several <a> elements)
    26. +
  26. Show an alert with the value of the first <input> of the page (Create an <input> element to test this case)
    27. +
  27. Remove all items from a specific selector
    28. +
  28. Animate an item after 2 seconds from the initial page load
    29. +
+
+ +
+
+ Welcome to Jquerypedia. Please, click on the items on the left menu to learn more about them. +
+
+ +
+ +
+ When the HTML document has been loaded and you can manipulate it with JavaScript +
+
JQUERY Code
+ +

+
+
+
Javascript Code
+ +

+
+
+ +
+ When an HTML item has been clicked +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ +
+
+
+ When an HTML item has been clicked twice +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+ When the user presses a key on the keyboard +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+ When the user moves the mouse cursor +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+ When the user changes a value of a text input +
JQUERY Code
+
+
+
+
+ +
+
+
Javascript Code
+
+
+
+
+ + +
+
+
+
+ When an image is loaded +
+
JQUERY Code
+

+ +
+
+
Javascript Code
+

+ +
+
+
+
+
+ When an image fails to load, (if you write an incorrect image url the loading of the image will fail) +
+
JQUERY Code
+

+ +
+
+
Javascript Code
+

+ +
+
+
+
+
+ When a form is submitted +
+
JQUERY Code
+
+ + +
+
+
+
Javascript Code
+
+ + +
+
+
+
+
+ When the user changes the option of a select element +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+ When you position the mouse over an element +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ When a checkbox is checked or unchecked +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+ When a ul list item is clicked, show the item that was clicked +
+
JQUERY Code
+
    +
  • meat
    • +
  • vegetables
    • +
  • steroids
    • +
+
+
+
Javascript Code
+
    +
  • meat
    • +
  • vegetables
    • +
  • steroids
    • +
+
+
+
+
+
+ Create an HTML element with any text value +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+ Remove an HTML element with any text value +
+
JQUERY Code
+ +

Remove me

+
+
+
Javascript Code
+ +

Remove me

+
+
+
+
+
+
+ Append an HTML element with any text value to a parent element +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Prepend an HTML element with any text value to a parent element +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Clone an HTML element within other element +
+
JQUERY Code
+ +

Clone me

+
+
+
Javascript Code
+ +

Clone me

+
+
+
+
+
+
+ Create and add an HTML element with any text value after another element +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Clone an HTML element within other element +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Add a class to an HTML item +
+
JQUERY Code
+ +

Add a class

+
+
+
Javascript Code
+ +

Add a class

+
+
+
+
+
+
+ Remove a class to an HTML item +
+
JQUERY Code
+ +

Remove my class

+
+
+
Javascript Code
+ +

Remove my class

+
+
+
+
+
+
+ Toggle a class of an HTML item +
+
JQUERY Code
+ +

Toggle my class

+
+
+
Javascript Code
+ +

Toggle my class

+
+
+
+
+
+
+ Add a disabled attribute to an HTML button +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+
+ Remove the disabled attribute of an HTML button +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+
+ Set a data-src attribute to a img element +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+
+ Remove the data-src attribute of the img element +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+
+ Hide an HTML element on click (display: none) +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+ Show an HTML element on click (display: block) +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+ Fade in an HTML element using jQuery +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Fade out an HTML element using jQuery +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Iterate a collection of elements and apply a change of style on them +
+
JQUERY Code
+ +
    +
  • HTML
    • +
  • Javascript
    • +
  • Python
    • +
+
+
+
Javascript Code
+ +
    +
  • HTML
    • +
  • Javascript
    • +
  • Python
    • +
+
+
+
+
+
+
+ Get the parent element of a certain element and change its font weight +
JQUERY Code
+ +
    +
  • HTML
    • +
  • Javascript
    • +
  • Python
    • +
+
+
+
Javascript Code
+ +
    +
  • HTML
    • +
  • Javascript
    • +
  • Python
    • +
+
+
+
+
+
+
+ Get the collection of children of a certain element and change its font weight +
JQUERY Code
+ +
    +
  • HTML
    • +
  • Javascript
    • +
  • Python
    • +
+
+
+
Javascript Code
+ +
    +
  • HTML
    • +
  • Javascript
    • +
  • Python
    • +
+
+
+
+
+
+
+ Get all the elements that have a certain class and change their font weight +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Get an item by id and change its font weight +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Get all the elements that have a certain class and the display property of none and change their font color +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Get the options of a select element that are selected (attribute selected) +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Change the href attribute of the first element (You have to create several elements) +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Show an alert with the value of the first input of the page (Create an input element to test this case) +
+
JQUERY Code
+ + +
+
+
Javascript Code
+ + +
+
+
+
+
+
+ Remove all items from a specific selector +
+
JQUERY Code
+ +
+
+
Javascript Code
+ +
+
+
+
+
+
+ Animate an item after 2 seconds from the initial page load +
+
JQUERY Code
+ +
+
+
+
+
+
Javascript Code
+ +
+
+
+
+
+
+
+
+
+ + + + + + + \ No newline at end of file