JQUERY AND JAVASCRIPT CODING EXERCISES Coding For Beginners (TAM, JJ [TAM, JJ]) (Z-Library)
, ,
Framework
No Description
261
Views
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.
AI Reading Assistant
Whole-book reading guide from stratified index samples; jump to passages in the text
AI guide
【One-Line Pitch】
A hands-on exercise collection that teaches jQuery and core JavaScript by having you build small, self-contained browser snippets—ideal for absolute beginners who learn best by typing and tweaking working code rather than reading theory.
【Book Arc】
- **Opening (~0%–9%)**: A table-of-contents-style list of exercise titles, then straight into jQuery warm-ups—verifying the library loads, binding click/double-click events, and disabling the right-click menu.
- **Early (~9%–27%)**: Practical DOM manipulation drills: toggling form submit buttons, blinking text with fade timers, zebra-striping table rows, bolding the first word of each paragraph, and changing button text or dropdown options.
- **Middle (~27%–55%)**: Deeper jQuery traversal and effects—removing table rows, disabling links, chaining `.add()`/`.addBack()`, applying classes, inserting HTML after elements, counting elements, and animating paragraph properties.
- **Late (~55%–82%)**: A pivot to pure JavaScript exercises: displaying the current day/time and date, printing the page, computing triangle area, multiplication/division, temperature conversion, finding the largest integer, reversing strings, and capitalizing words.
- **Ending (~82%–91%)**: String and number puzzles that sharpen logic—counting vowels, trimming first/last characters, rotating the last three characters, summing two digits, and checking leap years or multiples of 3/7.
【Key Takeaways】
- **jQuery is taught through DOM chores, not theory** (Opening): every exercise pairs an HTML skeleton with a short script, so you learn selectors, events, and effects by seeing immediate visual results.
- **Event binding is the recurring backbone** (Early): click, double-click, and context-menu handlers appear repeatedly, reinforcing how jQuery attaches behavior to elements.
- **Chaining and traversal build fluency** (Middle): exercises like `.add()`, `.addBack()`, and `.find("tr:gt(0)")` teach you to compose jQuery methods rather than write one-off statements.
- **Animation and CSS manipulation are practical, not decorative** (Middle): `.animate()`, `.css()`, and `.fadeIn/fadeOut` are used to solve concrete UI tasks like blinking text or setting backgrounds.
- **Pure JavaScript exercises cover classic beginner logic** (Late): date/time formatting, arithmetic, temperature conversion, and max-of-three problems drill fundamental syntax and control flow.
- **String manipulation is a major theme** (Late–Ending): reversing, capitalizing, counting vowels, slicing, and rotating characters appear in many variations, building comfort with `split`, `slice`, `replace`, and `substring`.
- **Number puzzles reinforce modular arithmetic** (Ending): leap-year checks, digit sums, and multiples of 3/7 show how `%` and `Math.floor` solve everyday coding challenges.
- **The book is a practice workbook, not a reference** (Throughout): each entry is a self-contained recipe with HTML, JavaScript, and expected output—meant to be typed, run, and modified.
【Reading Tips】
- **Skim the opening list, then deep-read the first jQuery exercise**: the table of contents is just a menu; the real learning starts when you open your editor and reproduce the "check jQuery is loaded" example.
- **Type every snippet rather than copy-pasting**: the exercises are short enough that manual typing forces you to notice selectors, brackets, and method names.
- **Pause on traversal and chaining exercises** (Middle): these are the conceptual jump from simple event binding to fluent jQuery; if `.addBack()` or `.find("tr:gt(0)")` feels opaque, experiment with removing one method at a time.
- **Treat the JavaScript section as a separate mini-course**: after the jQuery half, the pure JS exercises switch context entirely—slow down on date formatting and string methods, which are the most reusable skills.
- **Use the expected outputs as self-tests**: run each snippet and compare; when output differs, debug before moving on.
【Coverage Limits】
The excerpts cover the full exercise sequence from jQuery basics through JavaScript string/number puzzles, but they do not include any prose explanations, chapter introductions, or theoretical background—this is a code-only workbook, and the guide reflects that.
Passage locations
Excerpt 1
书名: JQUERY AND JAVASCRIPT CODING EXERCISES Coding For Beginners (TAM, JJ [TAM, JJ]) (Z-Library) 作者: TAM, JJ [TAM, JJ] JQUERY AND JAVASCRIPT CODING EXERCISES...
View in text
Page 18
ises OUTPUT Change button text using jQuery HTML CODE <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-git.js"></script> <meta chars...
View in text
Excerpt 3
jQuery add the previous set of elements on the stack to the current set.</title> </head> <body> <div class="left"> <p><strong>Before <code>addBack()</code></...
View in text
Excerpt 4
t properties.</title> </head> <body> <p id="pid">jQuery</p> <button id="button1">Click to see the animation</button> </body> </html> CSS CODE button { displa...
View in text
Recommended for You
{{#thumbnailUrl}}
{{/thumbnailUrl}}
{{^thumbnailUrl}}
{{/thumbnailUrl}}
Loading recommended books...
Failed to load, please try again later
Tip the Site
Scan the WeChat Pay or Alipay code to tip. No login required.
WeChat Pay
Alipay