JQuery

From Wiki
Jump to navigation Jump to search

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>