It does not make any sense to use Jquary. Javascript is better than Jquary.

Question

It does not make any sense to use Jquary. Javascript is better. I will explain why.

Here is the code for the index.html file:

code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

All other html files are the same except that that class="selected" attribute is only set for that particular page like as an example my about.html file is like:

code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li class="selected"><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
    </div>
    <h1>About</h1>
    <p>This is the about page.</p>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Here is the app.js code. This is not my code, but its the code that is accessible for the Jquary treeshouse course:

code

//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over menu links
//for each of the anchor links the below function gets called
$("#menu a").each(function(){
  var $anchor = $(this);
  //Create an option
  var $option = $("<option></option>");

  //Deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }
  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});
//Create button
var $button = $("<button>Go</button>");
$("#menu").append($button);
//Now, we want to bind a click handler to that
//particular button.
$button.click(function(){
  //we are getting the selected value of the
  // select box and setting it to window's location
//alert($select.val());
  window.location = $select.val();
});

Here is my version of doing this whole program: Here is the index.html file:

code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
        <select>
            <option value="index.html" selected>Home</option>
            <option value="about.html">About</option>
            <option value="contact.html">Contact</option>
            <option value="support.html">Support</option>
            <option value="faqs.html">FAQs</option>
            <option value="events.html">Events</option>
        </select>
        <button onclick="myFunction()">Go</button>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>

    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

All other html files are the same except that that class="selected" attribute is only set for that particular page and equivalent option of that link is selected like as an example my about.html file is like:

code

<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li class="selected"><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
        <select>
            <option value="index.html">Home</option>
            <option value="about.html" selected>About</option>
            <option value="contact.html">Contact</option>
            <option value="support.html">Support</option>
            <option value="faqs.html">FAQs</option>
            <option value="events.html">Events</option>
        </select>
        <button onclick="myFunction()">Go</button>
    </div>
    <h1>About</h1>
    <p>This is the about page.</p>

    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Here is app.js file:

code

function myFunction() {
    window.location = document.querySelector("select").value;
}

SEE HOW MUCH EASIER it is my version of app.js file in comparison to the app.js written by the instructor and it still does the same task. The whole point of Jquary was to make development easier, but here it makes it harder. It is much easier for me to just add the <select> and <button> elements to the html document and then write this simple Javascript code than having to write that complicated Jquary code. So, my question is how come the instructor in the Jquary course did not simply add the select and button elements using the <select> and <button> tags in to the html files rather than having to create them in Jquary and appended those elements using Jquary? Why did the instructor of the Jquary course wrote all the above code in Jquary which he could in fact write all the above code in a simple clear javascript code like I wrote above?

Answer 1 · 2017-10-12T09:36:27Z

October 12, 2017 9:36am

Hi Reza,

The instructor does that to show different functions and how you can use jQuery to get you started. As you will learn jQuery will help you do a lot of things much easier than if you would have been using vanilla JavaScript.

jQuery is a library giving you a ton of easy to use functions, which can speed up development a lot. Everything you can do with jQuery you can do using vanilla JavaScript however, as jQuery is JavaScript.

If you do not like jQuery, then you're fine skipping it and using vanilla JavaScript or maybe another library instead.

I hope that helps

Jonas

Answer 2 · 2017-10-12T10:06:28Z

October 12, 2017 10:06am

1 - A great example is dom traversal back and forth, the functions for this is much simpler using jQuery as the library have the functions finished for you (Which is why one would want to use a library). If you're using vanilla JavaScript you would have to write all those functions on your own, while jQuery has those functions all nice and ready waiting for you.

2 - I did take a look at your code, but the thing is that you're going through an introductory course. The tutor wants to help you experiment with jQuery to see things you could do and how to find information using the documentation. Tutors often make examples longer just to help you as a student to grasp the idea and what you can do. Basically the focus is not on the solution itself but how you can use that technique, language, library etc to solve a problem.

3 - To show you jQuery, and a function within the library.

4 - Because the tutor is teaching an introductory jQuery course, the whole point of that course is to teach students what you can do with jQuery. While you could do something in JavaScript just as easily at this point, you need to learn the basics before going into more advanced concepts.

I hope that helps.

Jonas

Answer 3 · 2017-10-12T15:20:30Z

October 12, 2017 3:20pm

No, but during that video the tutor is focusing on helping you get an idea of how jQuery can be used.

Answer 4 · 2017-10-12T14:24:54Z

October 12, 2017 2:24pm

In your response (2) you mentioned, "the focus is not on the solution itself", you mean, ""the focus OF THAT JQUERY COURSE is not on the solution itself". Right?

Answer 5 · 2017-10-12T15:32:16Z

October 12, 2017 3:32pm

From my understanding, the context of your conversation was only on that Jquery course and you are not telling me to focus on "how I can use that technique, language, library, etc to solve a problem" LITERALLY all the time. If that is the case, then what do you mean by "No"? I am just asking: In your response (2) WHEN you mentioned, "the focus is not on the solution itself", were you talking ONLY in the context of THAT JQUERY COURSE?

Answer 6 · 2017-10-12T16:52:03Z

October 12, 2017 4:52pm

Do you mean when you wrote to me: "Basically the focus is not on the solution itself but how you can use that technique, language, library, etc to solve a problem" you were ONLY writing about that Jquery video? Right?

Welcome to the Treehouse Community

Looking to learn something new?

Reza Sorasti

Reza Sorasti

It does not make any sense to use Jquary. Javascript is better than Jquary.

code

code

code

code

code

code

6 Answers

stjarnan

stjarnan

Reza Sorasti

Reza Sorasti

stjarnan

stjarnan

Reza Sorasti

Reza Sorasti

stjarnan

stjarnan

stjarnan

stjarnan

Reza Sorasti

Reza Sorasti

Reza Sorasti

Reza Sorasti

stjarnan

stjarnan

Reza Sorasti

Reza Sorasti

stjarnan

stjarnan