jQuery Element Selection Discussion

jon_m · May 25, 2020, 9:16pm

I just updated my earlier post:

jon_m · May 25, 2020, 9:18pm

You see you’re developing that 6th sense already! Next time you’ll spot it while you’re typing your post, before sending it…then before you even start typing etc. etc.

Pendar · May 25, 2020, 9:19pm

I owe you a beer! Thank you @jon_m

daz3d · June 9, 2020, 9:47am

there are 2 ways i can think of to achieve what you are trying to do.

create a variable in doNumberOfTimes() and on each iteration of the for loop append the text you want to display on the page using the += operator and then pass the variable to disp with your timeout setTimeout(disp(myVar), 2000)
in you disp() function you could capture the text already written into the page but you would need a container with an id such as a <div id="myDiv"> then your document.write() could be structured the following way document.write(document.getElementById("myDiv").innerHTML + "This is an alert");

John_Okoye · June 9, 2020, 1:45pm

man, remedial help needed…lol, in school now I just think they pushed the kids through whether they get the material or not…for me, I’m being held back as this material is just not .clicking just yet

John_Okoye · June 10, 2020, 2:15pm

not that one shouldn’t be humble, for a first time js student this is quite humbling…but cheerio, pip, pip, carry on…and all that

I am assuming $(document) jQuery selects the entire HTML document? I guess I should test what would happen if I omitted that expression. I’ve been reading now, so I guess I better fire up the console too…

And .ready is a function? that ‘readys’ the document for nested jQueries??? Seems like those expressions are not necessary and assumed???

Like when I open Atom and create a new document and type it populates a whole lot more like Document Type and form: ltr, etc…a lot of other stipulations that obviously serve a purpose, but not absolutely necessary…

just some observations for a first timer here…

Now in reading JS is it correct to compare this to simple sentence form. Subject - Verb - Object

In this example the subject is $(x), with ‘x’ being that selected

the verb is the .this, .that, the function?

If you could really dumb this down into an ‘Everything I needed to know about JavaScript, I learned in Primary School’…then it really wouldn’t be that daunting, lol.

Just what is the Object though? or is that to come…it seems that it is an incomplete sentence or one of those subject - verb sentences.

When the button is clicked, hide (it). S - V

ok, when the button is clicked, hide the headings. S - V - O

ok, making a little more sense…I guess with persistence, one can learn Chinese even though it is much easier just eating the food and not worrying about the culture that created it.

I’m still digesting this…

Zoltan · June 10, 2020, 7:54pm

Thank you, I’ll try to fix it

jon_m · June 11, 2020, 11:29pm

Hi Chinedu/John,

Yes… but I’ve only seen it used together with the .ready() event method:

$(document).ready()

This syntax is known as the document ready event and it means that the function placed within the parentheses of .ready() will only be executed once the HTML document has been loaded. It is commonly used when our JavaScript code is located before the <body> and within the <head> element of the document (or much more commonly, in a separate .js file with the file path referenced in the opening <script> tag. It prevents the JavaScript code from being executed too early, before the page has finished loading.

W3Schools is an excellent resource and reference when getting started with jQuery. Here’s a link to a page which explains about the document ready event (you need to scroll down). I highly recommend also using this resource as a reference for any other jQuery syntax, and also for JavaScript in general. The explanations and examples are usually very straightforward and easy to follow and understand.

https://www.w3schools.com/jquery/jquery_syntax.asp

So, .ready() is a method (a specific type of function) which doesn’t ready the document as such, but which waits until the page is “ready” (i.e. finished loading) before executing the code enclosed within it (its parameter) which will be another function.

‘x’ is the element selected… but using your grammar analogy, that would make it the Object (because the action is being performed to/on it).

That would make sense…yes… but to be honest, I’m not too sure how helpful it would be to persue this grammar analogy…

I highly recommend using the W3Schools online jQuery resources https://www.w3schools.com/

I totally get where you’re coming from, as I too feel more comfortable learning something new when I have a clear map of the terrain to orientate myself and get my bearings. However, from experience, a lot of these abstract concepts only really start to click once you’ve actually got your feet wet, and started just using them, even if at first this means having to just accept that this is what we write because that’s just how it is. Then, the underlying mechanics of how and why, gradually become clearer when you already have some exposure and experience to relate it to.

Anyway, hope some of that helps to alleviate some of the frustration you’re feeling

John_Okoye · June 12, 2020, 4:02am

You make a very good point. I was studying ESL before this covid thing and they stress the ‘communicative method’ of teaching a new language…that is by jumping in and just doing it and learning by experience RATHER than the grammatical method which is the science of breaking it down into parts and analysis.

I happen to be a grammatical method person by nature and in many areas it is best to operate in this manner, well for me at least. But when it comes to language (whether a new language like Spanish, or JSscript) it is a BIG negative…so point duly noted.

BTW, w3schools will be adopted, mucho garcias…lol

John_Okoye · June 12, 2020, 7:57am

I know I am a baby learning to crawl…but this baby wanted to buy a COMP option on OPIUM.EXCHANGE and frankly I don’t know what I am doing…don’t even know what a WRAPPED ETH is…

so I watched a small video with a guy talking in english but it was mostly chinese to me but I did pick up a few things

first, he stated programming in SOLIDITY and I’ve heard Ivan mention this before as a programming language. It look almost exactly like JS Script. Is it essentially the same thing but just JS script calling the SOLIDITY library as it seems that these keywords are ‘FINANCIAL’ functions to write the smart contract.

I know that I need to crawl back in my crib and master these basics first as I still don’t get basic js functions just yet…but I need to ‘let go’ and just start using them which is hard for me to do but I must force myself.

but is my estimation true of SOLIDITY so I can get a bigger picture view of all this?

cheers

jon_m · June 12, 2020, 2:03pm

I am too, and the communicative / “get-your-feet-wet” and “learn-by-doing” approaches often don’t come naturally to me. I strongly believe there is a place for both in learning languages, whether human or programming. I think the important thing is be aware of how you like to learn and how you learn best: start from there, but also be aware of the other method(s) so that you can use those to complement your learning, especially when your preferred method isn’t working…

jon_m · June 12, 2020, 2:39pm

Solidity is the programming language used to program smart contracts for deployment on the Ethereum blockchain. That’s why a lot of the keywords and built-in functions you have seen look financial, because they have been designed to manage ETH and perform financial transactions.

It isn’t JavaScript, nor is it a JavaScript library (like jQuery). It is a separate programming language, but it’s syntax and underlying concepts are very similar to JavaScript (if not identical in many cases). However, there are also key differences, so you have to be careful. It’s relatively straight forward and quick to pick up if you have already learnt JavaScript (I know this from personal experience).

After you have completed this JavaScript course, and feel relatively comfortable with the material, you could either:

move straight on to Solidity (which is taught in the Ethereum Smart Contract Programming 101 and 201, and Ethereum Smart Contract Security courses; or
first do the C++ Programming for Blockchain Developers, after which you will also be able to move on to the EOS programming courses, as programming on EOS is done in C++ (as opposed to Solidity on Ethereum).

I hope that clarifies a few things for you

That “letting go” can be really hard at first — but you’re already half way there just by realising that you need to in order to progress, and by being prepared to try and “let go” in the first place. Once you’ve “let go”, then you will still have your structured “grammatical” toolkit to order the things you’ve experienced “communicatively”, afterwards, when you’re reflecting on things — I personally need to do this to keep myself sane and still feel relatively in control. Again the degree to which you need to do that depends on the type of learner you are. So don’t throw the grammatical baby out with the bath water!

Good luck
Remember — you’re not doing this alone!

babie · June 23, 2020, 8:34am

what is the purpose of this $(document).ready(function().

thecil · June 23, 2020, 12:59pm

The ready event occurs when the DOM (document object model) has been loaded.

Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above.

The ready() method specifies what happens when a ready event occurs.

Here you can read more about: jQuery document.ready

Hope this gives you a clear picture of the subject.
If you have any more questions, please let us know so we can help you!

Carlos Z.

babie · June 23, 2020, 3:11pm

@thecil
Thank you. It’s clear now. When I followed @ivan we didn’t include this code so I got confused

mamba · July 2, 2020, 7:41am

What are jQuery selectors?

jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors allow you to select and manipulate HTML elements(s).
jQuery uses a format: $(selector).action() to assign an element(s) to an event.
jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.
It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $()

What is the element selector?

You can select elements by specifying the tag type inside the parentheses after the “$” sign: $(“p”) $(“h1”) $(“div”) $(“body”) $(“button")

What is the #id selector?

The jQuery “#id” selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with an “#id” attribute, write a hash character just like in css, followed by the name of the id in the given element: $(“#test")

What is the .class selector?

The jQuery “.class” selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class: $(“.text")

DanD · July 2, 2020, 12:41pm

Hi all,

I had an idea to make a very simple game to build up. It’s 3 different coloured buttons with an alert to press a button generated at random. I’m struggling to write the code that will link the randomly generated alert (the var “randomButton”) output to the following expressions. I’ve tried a few things, and

if randomButton == a;

is not the answer! Any suggestions about this or the rest of the code would be appreciated. Thanks.

<html>

  <head>
    <title>Button Game</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>
  <button style= "background-color: red"; id="redButton"> Red </button>
  <button style= "background-color: green"; id="greenButton"> Green </button>
  <button style= "background-color: blue"; id="blueButton"> Blue </button>

  <script>

let a = "Red"; let b = "Green"; let c = "Blue";

var buttonArray = [ a,b,c]

var randomButton = buttonArray [Math.floor(Math.random()* buttonArray.length)];

alert("Press the "+ randomButton+" button!" );

if randomButton == a;
$(#redButton)click. (function () {
  alert ("Well done! Press the "+ randomButton +" button!");
} if $(#greenButton, #blueButton)click. (function() {
  alert ("Wrong button! Try again!")
}


  </script>
</body>
  </html>

Malik · July 2, 2020, 4:38pm

Hi sir,
Love the enthusiasm of trying to create your own game from scratch. Looking at this code, i could find issues regarding syntax.

These are my observations –

This below syntax is incorrect. When you have a if condition, you need to provide code statements in the curly brackets for it to execute if the condition is true. Semi colon after the if statement, would not yield to anything.

What you could be doing is something else –
Ex-

    if(randomButton == a) {
      //Your code statements to execute
    }

The below Jquery Selector syntax is incorrect. When specifying the id to the selector, you need to decorate it with quotes. Also, the click() function should always be followed by a ".". This syntax is called chaining. Each selector can be “chained” by functions by the dot ".".

Your desired syntax would be – Selector + dot + click function
And code would look like –

    $("#redButton").click(function () { 
        // Your code statement
     })

Use these concepts and try to figure out how you can write the code. I will paste my working code below but please try to figure out yourself first and let me know how it goes.

My Solution (SPOILER) –

<html>

<head>
    <title>Button Game</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <button style="background-color: red" ;="" id="redButton"> Red </button>
    <button style="background-color: green" ;="" id="greenButton"> Green </button>
    <button style="background-color: blue" ;="" id="blueButton"> Blue </button>

    <script>

        let a = "Red"; let b = "Green"; let c = "Blue";

        var buttonArray = [a, b, c]

        var randomButton = buttonArray[Math.floor(Math.random() * buttonArray.length)];
        console.log(randomButton);

        alert("Press the " + randomButton + " button!");

        //When red button is clicked by user
        $("#redButton").click(function () {
            if (randomButton == a) {
                alert("Well done! You clicked the " + randomButton + " button!");
            }
            else {
                alert("Wrong button! Try again!")
            }
        })

        //When green button is clicked by user
        $("#greenButton").click(function () {
            if (randomButton == b) {
                alert("Well done! You clicked the " + randomButton + " button!");
            }
            else {
                alert("Wrong button! Try again!")
            }
        })

        //When blue button is clicked by user
        $("#blueButton").click(function () {
            if (randomButton == c) {
                alert("Well done! You clicked the " + randomButton + " button!");
            }
            else {
                alert("Wrong button! Try again!")
            }
        })
    </script>
</body>

</html>

Remember that this code can also be written in a more compact way. Feel free to explore how to make it more compact and concise.

Also feel free to reach out for any questions.

Happy Learning.

Fati · July 4, 2020, 5:42am

Are ids commonly used in jQuery when calling scripts? I heard they should be used sparingly/avoided in html, thoughts?

Malik · July 4, 2020, 4:09pm

Yes, they are pretty common. Equally common are using classnames in the jQuery Selector.
There is no such reason to avoid giving Ids to html elements. It is rather a good practice to give ids to elements in html. It becomes easier to write scripts to pick up a particular element or manipulate it.

Happy Learning.