WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL 1 The above website template represents the HTML/CSS previous studio project we have been working on. Today s lesson will focus on JQUERY programming language. jquery Introduction The purpose of jquery is to make it much easier to use JavaScript on your website. What You Should Already Know Before you start studying jquery, you should have a basic knowledge of: HTML CSS JavaScript If you want to study these subjects first, find the tutorials on our blog page. HTML/CSS: -http://alltsnetwork.com/b_downloads/html_css.pdf JAVASCRIPT: - http://alltsnetwork.com/b_downloads/javascript.pdf
What is jquery? jquery is a lightweight, "write less, do more" javascript library. 2 The purpose of jquery is to make it much easier to use JavaScript on our website. jquery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. The jquery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations etc. Tip: In addition, jquery has plugins for almost any task out there. Why jquery? There are lots of other JavaScript frameworks out there, but jquery seems to be the most popular, and the most extendable. Many of the biggest companies on the Web use jquery, such as: Google Microsoft IBM Netflix Will jquery work in all browsers? The jquery team knows all about cross-browser issues, and they have written this knowledge into the jquery library. jquery will run the same in all major browsers.
Back to the project. Our first task is to add a jquery chaining function to the website. With jquery, you can chain together actions/methods. Chaining allows us to run multiple jquery methods (on the same element) within a single statement. 3 To chain an action, you simply append the action to the previous action. Codes Step 1: - add an id= p1 on line 95, Open and close a p tag with view us content on line 98, in the text-editor. As show in the image above.
4 Step 2: - Styling of the above p tag from line 81 to line 88. I also restyled the span tag from line 70 to line 74. As shown in the image above. Step 3: - I added the jquery linkage to our html document on line 5, I opened a <script> tag on line 6 and closed the </script> tag on line 15. After which i added the above jquery codes from line 7 to line 11. Don t forget to hit the save button at the top-left corner of your text-editor.
5 This is what the output looks like after i had refreshed my browser. This is what the output looks like after i clicked on the view us button.
THE ABOVE JQUERY CODE EXPLANATION Firstly, i opened and closed a script tag, after which i declared my first jquery function. 6 $(document).ready(function() A $ sign: - to define/access jquery, You will notice that all jquery functions in our project, will be inside a document ready event: The $(document).ready(function() allows us to execute a function when the document is fully loaded It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows us to have our JavaScript code before the body of the document, in the head section. After which i added $("p").click(function() The $( p ).click (); the purpose of this is to assign a click event handler to the HTML content which is represented as view us in the code block above. It is also mandatory for us to pass a function to the event: $("p").click(function(). The above declared function will be executed when the user clicks on the HTML content, which was displayed in the output image above. Now what is an event? All the different visitor s actions that a web page can respond to are called events. i.e. click, dblclick, mouseover etc The next step is to define what should happen when the event fires. The following lines of code chains together the css(), slideup(), and slidedown() methods. The "p1" div element first changes to red,the font-weight becomes bold, then it slides up, and then it slides down respectively Slides-up (hides) the selected elements
Slides-down (shows) the selected elements; Which i assigned a speed limit of 1 milliseconds to respectively. 7 The second phase of the tutorial requires us to add a jquery toggle function to our website. Here i added a button tag to the play it to on line 107; As shown in the image above. I used a CSS group selector to assign the styling which we used for the previous p element for the above button element on line 81 to line 88; As shown in the image above.
8 I added the above jquery codes from line 13 to line 16. Don t forget to hit the save button at the top-left corner of your text-editor. This is what the output will look like after you must have refreshed your browser.
9 This is what the output looks like after i clicked on the we play it to button This is what the output looks like after i unclicked on the we play it to button jquery toggle () EXPLANATION OF THE JQUERY CODE ABOVE
With jquery, you can toggle between the hide() and show() methods with the toggle() method. Shown elements are hidden and hidden elements are shown. The jquery functions as declared above has been thoroughly explained in the first phase of the project; Kindly review if you are having any issues. Thanks. 10 The only difference is this. Instead of $("p").click(function(), I changed it to $("button").click(function() ; which was the element i used in wrapping the we play it to in the HTML document above on line 107. Then i added the $("blockquote").toggle() function which i used in connecting the we play it to button element to the blockquote content on line 109 of the HTML document above. Let s proceed to the final stage of the project. Here we will be adding jquery FadeToggle method to our website; which serves the same purpose as an accordion in JavaScript programming language. Kindly add the above id= div1 to your opening q tag on line 162 Id= div2 to your opening q tag on line 169, Id= div3 to your opening q tag on line 175 respectively
11 Kindly type the above jquery code from line 18 to line 22 in your text editor. Type the above CSS (styling) code in your text-editor. From line 96 to line 98. Don t forget to hit the save button at the top-left corner in the text-editor.
12 This is what the output will look like after you must have clicked on any of the above title headers i.e. Excellent, Integrity, or Professionalism. NOTE: - Don t forget to refresh your browser before clicking on either of the above title headers. The above image is the result of my final output after i unclicked on one of the above title headers i.e. Excellence, Integrity, or Professionalism.
THE ABOVE JQUERY CODE EXPLANATION. The above jquery functions have been explained in the phase 1 and phase 2 of the project; kindly review them if you are having any issues. Thanks. NOTE: - The only difference is that i declared the following fadetoggle method. i.e..fadetoggle(1000);.fadetoggle(2000); and.fadetoggle(3000); which i assigned (1,2 and 3 milliseconds) to respectively. Now, what is jquery fadetoggle() Method? 13 The jquery fadetoggle() method toggles between the fadein() and fadeout() methods. If the elements are faded out, fadetoggle() will fade them in. If the elements are faded in, fadetoggle() will fade them out. Syntax: $(selector).fadetoggle(speed,callback); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the fading completes. All-Tech Systems & Co. Excellence, Satisfaction, Integrity & Simplicity...!