JQUERY AND JAVASCRIPT CODING EXERCISES Coding For Beginners (TAM, JJ [TAM, JJ]) (Z-Library)
Author: TAM, JJ [TAM, JJ]
Web Framework
No Description
📄 File Format:
PDF
💾 File Size:
4.3 MB
46
Views
0
Downloads
0.00
Total Donations
📄 Text Preview (First 20 pages)
ℹ️
Registered users can read the full content for free
Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.
📄 Page
1
(This page has no text content)
📄 Page
2
JQUERY AND JAVASCRIPT CODING EXERCISES CODING FOR BEGINNERS JJ TAM
📄 Page
3
JQUERY CODING EXERCISES CHECK JQUERY IS LOADED SCROLL TO THE TOP DISABLE RIGHT CLICK MENU BLINK TEXT CREATE TABLE EFFECT MAKE FIRST WORD BOLD UNDERLINE ALL THE WORDS CHANGE BUTTON TEXT USING JQUERY ADD OPTIONS TO A DROP-DOWN LIST SET BACKGROUND-IMAGE DELETE ALL TABLE ROWS EXCEPT FIRST ONE DISABLE A LINK CHANGE A CSS CLASS SET THE BACKGROUND COLOR ADD THE PREVIOUS SET OF ELEMENTS ADD A SPECIFIED CLASS ADD TWO CLASSES INSERT SOME HTML COUNT EVERY ELEMENT
📄 Page
4
COUNT ALL ELEMENTS ANIMATE PARAGRAPH ELEMENT JAVASCRIPT CODING EXERCISES DISPLAY THE CURRENT DAY AND TIME PRINT THE CONTENTS DISPLAY THE CURRENT DATE FIND THE AREA OF A TRIANGLE CHECK WHETHER A GIVEN YEAR IS A LEAP YEAR CALCULATE MULTIPLICATION AND DIVISION CONVERT TEMPERATURES FIND THE LARGEST REVERSE A GIVEN STRING REPLACE EVERY CHARACTER CAPITALIZE THE FIRST LETTER CONVERT NUMBER TO HOURS AND MINUTES COUNT VOWELS IN A GIVEN STRING CREATE A NEW STRING CONCATENATE TWO STRINGS MOVE LAST THREE CHARACTER COMPUTE THE SUM
📄 Page
5
ADD TWO DIGITS CHECK WHETHER A GIVEN YEAR IS A LEAP CHECK GIVEN POSITIVE NUMBER CHECK A STRING STARTS WITH 'JAVA' CHECK TWO GIVEN INTEGER VALUES FIND A VALUE WHICH IS NEAREST TO 100
📄 Page
6
JQUERY CODING EXERCISES Check jQuery is loaded HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Test if jQuery is loaded</title> </head> <body> <p>Click me!</p> </body> </html> JAVASCRIPT CODE $("p").bind("click", function(){ $( "This is a click Event").appendTo( "body" ); }); $("p").bind("dblclick", function(){ $( "This is a double-click Event" ).appendTo( "body" ); }); OUTPUT Click me! This is a click Event
📄 Page
7
Scroll to the top of the page HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Scroll to the top of the page with jQuery</title> </head> <body> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p>
📄 Page
8
<p>jquery</p> <p>jquery</p> <p>jquery</p> <p>jquery</p> <a href='#top'>Go Top</a> </body> </html> JAVASCRIPT CODE $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; });
📄 Page
9
Disable right click menu In html page HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Disable right click menu in html page using jquery</title> </head> <body> </body> </html> JAVASCRIPT CODE $(document).bind("contextmenu",function(e){ return false; });
📄 Page
10
Disable/enable the form submit button HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Disable/enable the form submit button</title> </head> <body> <input id="accept" name="accept" type="checkbox" value="y"/>I accept<br> <input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit" /> </body> </html> JAVASCRIPT CODE $('#accept').click(function() { if ($('#submitbtn').is(':disabled')) { $('#submitbtn').removeAttr('disabled'); } else { $('#submitbtn').attr('disabled', 'disabled'); } }); OUTPUT
📄 Page
11
Blink text using jQuery HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Blink text using jQuery</title> </head> <body> <p>jQuery <span class="blink">Exercises</span> and Solution</p> </body> </html> JAVASCRIPT CODE function blink_text() { $('.blink').fadeOut(500); $('.blink').fadeIn(500); } setInterval(blink_text, 1000);
📄 Page
12
Create table effect Like Zebra Stripes HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <style type="text/css">.table_style { width: 500px; margin: 0px auto; } table{ width: 100%; border-collapse: collapse; } table tr td{ width: 50%; border: 1px solid #ff751a; padding: 5px; } table tr th{ border: 1px solid #79ff4d; padding: 5px; } .zebra{ background-color: #ff0066; } </style> <title>Create a Zebra Stripes table effect</title> </head> <body> <div class="table_style"> <table>
📄 Page
13
<tr> <th>Student Name</th> <th>Marks in Science</th> </tr> <tr> <td>James</td> <td>85.00</td> </tr> <tr> <td>David</td> <td>92.00</td> </tr> <tr> <td>Arthur</td> <td>79.00</td> </tr> <tr> <td>George</td> <td>82.00</td> </tr> </table> </div> </body> </html> JAVASCRIPT CODE $(document).ready(function(){ $("tr:odd").addClass("zebra"); }); OUTPUT
📄 Page
14
(This page has no text content)
📄 Page
15
Make first word bold HTML CODE <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Make first word bold of all elements</title> </head> <body> <p>PHP Exercises</p> <p>Python Exercises</p> <p>JavaScript Exercises</p> <p>jQuery Exercises</p> </body> </html> JAVASCRIPT CODE $('p').each(function(){ var pdata = $(this); pdata.html( pdata.text().replace(/(^\w+)/,'$1') ); }); OUTPUT PHP Exercises Python Exercises JavaScript Exercises jQuery Exercises
📄 Page
16
Underline all the words HTML CODE <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-git.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Underline all words of a text through jQuery</title> </head> <body> <p>The best way we learn anything is by practice and exercise questions</p> </body> </html> CSS CODE p span{ text-decoration: underline; } JAVASCRIPT CODE $('p').each(function() { var text_words = $(this).text().split(' '); $(this).empty().html(function() { for (i = 0; i < text_words.length; i++) { if (i === 0) { $(this).append('<span>' + text_words[i] + '</span>'); } else { $(this).append(' <span>' + text_words[i] + '</span>'); } } });
📄 Page
17
}); OUTPUT
📄 Page
18
Change button text using jQuery HTML CODE <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-git.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Change button text using jQuery.</title> </head> <body> <input type='button' value='Cancel' id='button1'> </body> </html> JAVASCRIPT CODE //Uncomment the following code and see the changes. //$("#button1").prop('value', 'Save');
📄 Page
19
Add options to a drop-down list Using jQuery HTML CODE <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-git.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Add options to a drop-down list using jQuery.</title> </head> <body> <p>List of Colors :</p> <select id='myColors'> <option value="Red">Red</option> <option value="Green">Green</option> <option value="White">White</option> <option value="Black">Black</option> </select> </body> </html> JAVASCRIPT CODE var myOptions = { val1 : 'Blue', val2 : 'Orange' }; var mySelect = $('#myColors'); $.each(myOptions, function(val, text) { mySelect.append( $('<option></option>').val(val).html(text) ); });
📄 Page
20
OUTPUT
The above is a preview of the first 20 pages. Register to read the complete e-book.