jQuery Sliding Methods
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
slideDown()slideUp()slideToggle()
Category: JavaScript
jQuery Effects – Fading
jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn()fadeOut()fadeToggle()fadeTo()
jQuery Event Methods
jQuery is tailor-made to respond to events in an HTML page.
What are Events?
All the different visitors’ actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
- moving a mouse over an element
- selecting a radio button
- clicking on an element
The term “fires/fired” is often used with events. Example: “The keypress event is fired, the moment you press a key”. Continue reading jQuery Event Methods
jQuery Selectors
jQuery selectors are one of the most important parts of the jQuery library.
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
jQuery Syntax
With jQuery you select (query) HTML elements and perform “actions” on them.
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to “query (or find)” HTML elements
- A jQuery action() to be performed on the element(s)
Examples :
$(this).hide() – hides the current element.
$("p").hide() – hides all <p> elements.
$(".test").hide() – hides all elements with class=”test”.
$("#test").hide() – hides the element with id=”test”. Continue reading jQuery Syntax
jQuery Get Started
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
- Download the jQuery library from jQuery.com
- Include jQuery from a CDN, like Google
Javascript – JSONP
JSONP is a method for sending JSON data without worrying about cross-domain issues.
JSONP does not use the XMLHttpRequest object.
JSONP uses the <script> tag instead.
JSONP Intro
JSONP stands for JSON with Padding.
Requesting a file from another domain can cause problems, due to cross-domain policy.
Requesting an external script from another domain does not have this problem.
JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object. Continue reading Javascript – JSONP
Javascript JSON HTML
JSON can very easily be translated into JavaScript.
JavaScript can be used to make HTML in your web pages.
HTML Table
Make an HTML table with data received as JSON:
Example
const dbParam = JSON.stringify({table:"customers",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
myObj = JSON.parse(this.responseText);
let text = "<table border='1'>"
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>"
document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
Javascript JSON PHP
A common use of JSON is to read data from a web server, and display the data in a web page.
This chapter will teach you how to exchange JSON data between the client and a PHP server.
The PHP File
PHP has some built-in functions to handle JSON.
Objects in PHP can be converted into JSON by using the PHP function json_encode(): Continue reading Javascript JSON PHP