Difference between revisions of "JQuery"
| (One intermediate revision by the same user not shown) | |||
| Line 35: | Line 35: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | == jQuery Snippets == | ||
| + | === Replace any URL with clickable link === | ||
| + | <syntaxhighlight lang="javacript"> | ||
| + | $.fn.replaceUrl = function() { | ||
| + | var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi; | ||
| + | this.each(function() { | ||
| + | $(this).html( | ||
| + | $(this).html().replace(regexp,'$1‘) | ||
| + | ); | ||
| + | }); | ||
| + | return $(this); | ||
| + | } | ||
| + | |||
| + | //usage | ||
| + | |||
| + | $('p').replaceUrl(); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | === Parse XML with jQuery === | ||
| + | <syntaxhighlight lang="javacript"> | ||
| + | function parseXml(xml) { | ||
| + | //find every Tutorial and print the author | ||
| + | $(xml).find("Tutorial").each(function() | ||
| + | { | ||
| + | $("#output").append($(this).attr("author") + ""); | ||
| + | }); | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | === Get JSON data using an AJAX request === | ||
| + | <syntaxhighlight lang="javacript"> | ||
| + | $("button").click(function(){ | ||
| + | $.getJSON("demo_ajax_json.js", function(result){ | ||
| + | $.each(result, function(i, field){ | ||
| + | $("div").append(field + " "); | ||
| + | }); | ||
| + | }); | ||
| + | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Latest revision as of 12:33, 4 June 2020
Documentation[edit]
Demo Bootstrap avec jquery[edit]
<syntaxhighlight lang="html"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </syntaxhighlight>
<syntaxhighlight lang="html">
<!doctype html>
<html lang="fr">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title> </head> <body>
Hello, world!
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body>
</html> </syntaxhighlight>
jQuery Snippets[edit]
Replace any URL with clickable link[edit]
<syntaxhighlight lang="javacript"> $.fn.replaceUrl = function() { var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,'$1‘) ); }); return $(this); }
//usage
$('p').replaceUrl(); </syntaxhighlight>
Parse XML with jQuery[edit]
<syntaxhighlight lang="javacript"> function parseXml(xml) { //find every Tutorial and print the author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); }); } </syntaxhighlight>
Get JSON data using an AJAX request[edit]
<syntaxhighlight lang="javacript"> $("button").click(function(){
$.getJSON("demo_ajax_json.js", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
}); </syntaxhighlight>