jQuery Element Selection Discussion

Javascript Programming
#111

Thanks for clarifying!

2 Likes
#112

Those are pretty useful selector functions. :::)))

1 Like
#114

Thank you, I was wondering about that.

1 Like
#115

Having fun and trying to learn how to us it the righ way.

1 Like
#116

Being new to all of this and just now developing a bit of an understanding of everything we have learned up to this point, I have to say that it is very amazing how jQuery brings ordinary one dimensional html, or javascript to life! Just to think, the person, or persons, who developed the language of this code structure and the drive they had to want to achieve a better user experience on the web is nothing short of inspirational!

2 Likes
#117

Hi there,
i am just working on my Syntax atm. what does () do again ?

Rob,

#118

Feel free to discuss any thing that has to do with jQuery and how jQuery interacts with HTML elements here.
Jquery can do all sorts of things such as making elements hidden, alert messages, and selector functions. I still feel overwhelmed but I am trying my best to practice a little everyday. Also, there is a specific way to learn Jquery? Or do I just dive in and hope for the best? Thank you.

#119

Yeah, the best way to learn JQuery is to keep applying it in different ways in your application. Think it as a tool that you would require to solve specific problems in your application. JQuery is best learned one function at a time. You cant just dive in completely for JQuery,

Hope this gives you a perspective.

Happy Learning! :slight_smile:

2 Likes
#120

Having trouble sometimes to select the right scr Jquery function,
for example other times src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”>, I do not know what is the difference ?, Why sometimes does not work? Where does it Ivan take it for the class examples?

Thanks,
Miguel

#121

Greetings @Mroman, what do you mean by

Can you be more elaborate on what issue you are actually facing?

Regards.

1 Like
#122

Yes, I was talking this script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
comparing vs this other srcript;
script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”>

I never understood the difference between them, why choose one over the other? Any specific criteria for the script from the library?

1 Like
#124

Well, The difference in both the libraries is just the versioning. As developers find issues or add certain new features, they create a new version of the library and publish it. Most of the underlying fundamentals and functions remain the same. If you HAVE to use a certain function which is available in the newer version, feel free to use the new version.
In the above two versions, the version changed from 3.3.1 to 3.5.1. If you notice, only the second number is changed which means these are just minor changes to the library. If suppose the version changed from 3.3.1 to 4.0.1 then you should be expecting big changes. Otherwise, it is all good.

Right now the latest version is 3.5.1

Check out their version history and documented changes below if you want to find specific changes –
https://blog.jquery.com/2020/05/04/jquery-3-5-1-released-fixing-a-regression/

Hope this clears your doubt :slight_smile:

1 Like
#125

Thanks, It makes sense now with your explanation.

1 Like
#126

I really like the idea of jQuery. Tapping into a repository of code is very practical.

1 Like
#127

My take from this exercise/reading is to find out how much more dynamic your website can become when you implement jQuery and Javascript. With a library, you will save so much time writing codes. Id and class attributes should be unique to each website which bring more opportunities to make a website dynamic. Great concept!

1 Like
#128

So this was my coding to make the assignment work:

    <form id = "demo">
                <input id="name" placeholder = "Name" type = "text"/>
                <input type = "submit"/>
              </form>

              <script>

              document.getElementById("demo").onsubmit = function(){
                let name = document.getElementById("name").value;
                alert(name)
              }
              </script>

and of course it calls the jQuery library in the page head.

1 Like
#129

hi guys, i could use some help please.
im trying to append objects to a list on an .html file from a .js file.

this is my .html file:

image
image739×313 6.89 KB

and this this is my .js file:
image

if i just copy the code from the .js to the .html it works fine.
it has to do with the .appendTo. I need a way to append to an external file in my case.
any help would be much appreciated

1 Like
#130

Hey @Joey hope you are ok.

Now could you please copy/paste your code so i can help you review it?

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957×174 11.9 KB

Carlos Z.

#131

Hi Carlos, thanks for your message.

this is my practice.HTML file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Objects</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="bakery.js"></script>
  </head>
  <body>
    <ol id = "LIST" ></ol>

  </body>
</html>

and this is my nakery.js file:

var BakerJo = [{ food: "croissant", price: 2 },
               { food:"ciabatta", price: 1 },
               { food:"bread", price: 4 },
               { food: "donut", price: 2 },
                { food:"baguette", price: 3}]

$.each(BakerJo,function (index, value){
  $("<li>").text(value.food + value.price).appendTo($("#LIST"));

});

I want to call the .js file from my .HTML and execude the code inside it.

i can do it if i do it all in the .HTML file but i want to be able to split it in several files.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Objects</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="bakery.js"></script>
  </head>
  <body>
    <ol id = "LIST" ></ol>
    <script type="text/javascript">
    var BakerJo = [{ food: "croissant", price: 2 },
                  { food:"ciabatta", price: 1 },
                  { food:"bread", price: 4 },
                  { food: "donut", price: 2 },
                  { food:"baguette", price: 3}]

    $.each(BakerJo,function (index, value){
        $("<li>").text(value.food + value.price).appendTo($("#LIST"));

      });

</script>
  </body>

i’ve googled the hell out of it but i couldnt find any solution. much appreciated.

#132

Hi @thecil,
I actualy just found out what i did wrong. this is embarassing.
i just had to put

<script type="text/javascript" src="bakery.js"></script>

inside the body and not in the head like I did.

:man_facepalming:

1 Like