jQuery

-

jQuery

HTML:

Given the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body> 
    <h1 class="big-title">Hello</h1>
    <button>Click Me</button>
    <button>Click Me</button>
    <button>Click Me</button>
    <button>Click Me</button>
    <button>Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
    <script src="index.js" charset="UTF-8"></script>
</body>
</html>

Examples for changing styles

$("h1").css("color","red");
$("h1") selects all the h1s.
To read the current value of a css property, do something like follows:
console.log($("h1").css("font-size"));
To separate concerns and keep the styles inside the CSS, do something like:
$("h1").addClass("big-title");
where the stylesheet has the following:
.big-title {
    font-size: 10rem;
    font-family: cursive;
}
To add multiple classes, separate the classes with a space inside the same string:
$("h1").addClass("big-title margin-25");
To check if an element has a class do $("h1").hasClass("margin-25").

Changing text

$("h1").text("Later") to change the text. Because jQuery selects all matching elements, if there are multiple elements that are selected, then all are affected.
To set the innerHTML, do $("h1").html("<strong>Hi</strong>").

Manipulating attributes

Example for image:
console.log($("img").attr("src"));
Setting:
$("a").attr("href", "https://www.yahoo.com");
Given this HTML:
<h1 class="big-title margin-25">Hello</h1>
Then
$("h1").attr("class")
will print out big-title margin-25.

Adding Event Listeners

For example adding an event listener to h3:
$("h3").click(function () { 
    $("h3").css("color","red");
});
Changing the style after clicking button:
$("button").click(function() { 
    $("h1").css("color","purple");
});
Keydown:
$("input").keydown(function(evt){ 
    console.log(evt.key);
});
To register the keypress against the entire document:
$(document).keydown(function(evt)){ 
    console.log(evt.key);
});

Using the method on:

$("h1").on("mouseover",function() { 
    $("h1").css("color","purple");
});

Adding elements

$("h1").before("<button>New</button>");
$("h1").after("<button>New</button>");
$("h1").prepend("<button>New</button>"); //add new HTML element inside the tag.
$("h1").append("<button>New</button>"); //again, append inside the h1 tag.
Removing elements:
$("button").remove(); //removes all buttons

Animations

$("h1").hide(); //hides the h1
$("h1").show(); //shows the h1
$("h1").toggle(); //toggle the h1
Progressive animation:
$("h1").fadeOut();
$("h1").fadeIn();
$("h1").fadeToggle();
$("h1").slideDown();
$("h1").slideUp();
$("h1").slideToggle();
Fine grained control:
$("h1").animate({opacity: 0.5}); //can only use numeric values.
Chaining animations:
$("h1").slideUp().slideDown().animate({opacity: 0.5});

References

The Complete 2020 Web Development Bootcamp Udemy

Comments

Post a Comment

Popular posts from this blog

QTreeView and QTableView dynamic changes

-
Image
Dynamically adding items to  QTreeView  and  QTableView Create the UI as follows, with the treeview on the left hand side and the table view on the right hand side. Notes The header file contains the models and the selection models for the tree view and the table view: QStandardItemModel * treeViewModel ; QItemSelectionModel * treeViewSelectionModel ; QItemSelectionModel * tableSelectionModel ; QStandardItemModel * tableModel ; In the .cpp file, the tree view models and table view models are set as the models for the selection models. treeViewSelectionModel -> setModel ( treeViewModel ) ; tableSelectionModel -> setModel ( tableModel ) ; The following code illustrates how to dynamically add a new row to the treeview. void MainWindow :: updateTreeView ( ) { QStandardItem * newRow = new QStandardItem ( QString ( "inserted row" ) ) ; QList < QStandardItem * > newRows ; newRows . append ( newRow ) ; aut...
Read more

C++ strings and string_view

-
C-style strings C style strings should be avoided except when interfacing with C libraries. C string library functions provide no bounds checking and memory allocation support. They are represented as an array of characters. Last character of the string is the null character  \0 , so that code that uses the string knows where it ends. The space needed for a string is always one more than the number of readable characters. String Literals Strings written with quotes around them are string literals. They are stored in a read-only part of memory. Because they are stored in readonly sections, attempting to modify string literals is  undefined behavior . Example: char * str = "world" ; str [ 0 ] = 'y' ; //undefined behavior If the code respected the standard and assigned the string literal to  const char* , the compiler will catch attempts to modify string literals: const char * str = "world" ; str [ 0 ] = 'k' ; //compiler will f...
Read more