jQuery Element Selection Discussion

Javascript Programming
#1

Feel free to discuss any thing that has to do with jQuery and how jQuery interacts with HTML elements here.

14 Likes
#2

Just messing arround with some jQuery. I used two bottons in the same page. One to display an input as an alert and a self destruct button which fills the screen with FUD. I wanted to do this to clarify the concepts when using multiple buttons on the same page. 

<form>
   <p>
       Input: <input type="text" id = "inputAlert">
       <button id="alertButton">Show Alert</button>
       <br>
       FUD Self Destruct Button: Do Not Press this.
       <button id="FUD">Button</button>
   </p>
 </form>
<script>
   $(document).ready(function(){
       $("#FUD").click(function(){
           for (i=0; i < 10000; i++){document.write("<b>FUD </b>")};
       });
   });
</script>
20 Likes
#3

This is a really easy slideUp animation with a button:

  <input type="button" id="myButton" value="No Pleaseeee!!" ><br>
  <img src="https://i.ytimg.com/vi/jYln9tIiXzg/hqdefault.jpg" id="imageX">
  <script>
     $("#myButton").click(function() {
          $("#imageX").slideUp("slow", function() {
            document.write("The End!");
          });
     });
  </script>
18 Likes
#4

For the benefit of the class who might have issue.

Question: When to use

$(document).ready(function(){

});

Answer
When your script tag is above the html elements in this case button, you are telling the page to load the script when elements are rendered or ready state.

  <script>
        $(document).ready(function(){

          $("button").click( function() {
            alert($("#text_here").val() );
          });

        });
  </script>
  <input id="text_here" type="text" value="" placeholder="keyin anything">
  <button>click me</button>
38 Likes
#5
#6

Hi guys, Ivan!
the session I have realised can be placed both in the and in the part.

Not crystal clear yet when to place in the former or the latter.

I would appreciate your view guys.

Thanks & great course Ivan!

3 Likes
#7

Hey everyone,

Here is a little program that i put together to solidify my knowledge using selectors and a little bit of code from the next lecture! test it out and see what you think. If you would like me to explain anything about it, DM me!

Put this within your head tag:

And this in your body tag:

16 Likes
#10

thank you, good point

1 Like
#11

Hi Guactoshi and thx for the example. In order to display the alert value you need to add the following code:

$(document).ready(function(){
$("#alertButton").click(function(){
alert(“You typed: " + $(”#inputAlert").val())
});

Bye! :slight_smile:

3 Likes
#12

Great example jgmusso!

2 Likes
#13

Thx for the explanation. It helped!

1 Like
#14

I had to use this “ready” functionality to even get my previous scripts to run… LOL… I found out later that I could just put my scripts at the bottom of the page and they wouldn’t need it. oh well… live and learn.

1 Like
#15

I have a question to the experts: Is Reactjs not better than jQuery?

#16

Just added code to alert display input field

<script>

   $(document).ready(function(){
       $("#alertButton").click(function(){
         alert("You wrote: " + $("#inputAlert").val());
       });

       $("#FUD").click(function(){
           for (i=0; i < 10000; i++){document.write("<b>FUD </b>")};
       });
   });
</script>
2 Likes
#17
  1. React is Model View Controller philosophy. Which would mean calling the backend (mongodb ) natively with nodejs. Jquery will need to use jsdriver for that.
  2. React virtually updates the DOM (html elements) which is faster than direct jquery/javascript update.
  3. I always use jquery datatable for pagination, it is the best out there.
  4. AngularJS4 cannot use jquery natively, react can.
  5. On blockchain lesson i think updating the elements with jquery is a basic knowledge to display the blockchain transactions. Better follow jquery at this time, as it is direct and light to run.
3 Likes
#18

Just noticed that Ivan answered this question as part of the course. I was too fast with my question :slight_smile:

#19

Hi.

I hope we don’t have to use DOM ready is function often in the future. In short, DOM has cross-browser inconsistencies and extreme time pressure etc.

#20

My thought:

Well, jquery has made developer write the code of their website faster, easier and more accessible. Jquery also allow the developer to interact with HTML classes and ID tag and has over 50 most useful plugins for front-end development.

Are anything else you guys/gals can think of?

#21

To follow up with the previous lesson of text input alert. I got lucky to get it quite fast so i decided to try to find a way for the input to do the same by pushing enter. Here’s the code:

  $('#Box').keypress(function(e) {
        if (e.keyCode == 13) {
        alert($("#Box").val());
      }
  });

The keypress speaks for itself, but keycode == 13 refers to the code of the char. In this case Enter = 13. To find out what number a certain char is you can go to
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

4 Likes
#22

One of the first things I learned in this course is how Markdown works, because that’s what these text areas are interpreted by. So I write my answers firstly in Atom and have the Markdown Preview showing, by clicking the M↓ toolbar button!

This came in very handy when quoting code elements (proof-reading your output should have alerted you to a problem), but also when taking notes on the jQuery selectors in https://www.w3schools.com/Jquery/jquery_selectors.asp, especially with the table of selectors I partly copied and summarised, because I could use the table button to show me the cool way to write a table in text for a markdown interpretor, that is also well readable in a plaintext note taker.

That was fine for my notes, but I’ve just checked that the markdown (.md) table format (as supported in Atom) does not work in this web page. (But I can still mark it as code (with three left-facing single-quotes ``` on separate “fence” lines above and below), and you’ll see the neat format.)

_jQuery Selectors_

Syntax                  |  Description
                      --|--
$("p")                  |  Selects all `<p>` elements (for example)
$("#test")              |  Selects an individual unique element with id="test" 
$(".test")              |  Selects all elements of class="test"
----------------------  |  Above are the **most** commonly used element selection methods
$("*")                  |  Selects all elements
$(this)                 |  Selects the current HTML element
$("p.intro")            |  Selects all `<p>` elements with class="intro"
$("p:first")            |  Selects the first `<p>` element
$("ul li:first")        |  Selects the first `<li>` element of the first `<ul>`
$("ul li:first-child")  |  Selects the first `<li>` element of every `<ul>`
$("[href]")             |  Selects all elements with an href attribute
$("a[target='_blank']") |  Selects all `<a>` elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")|  Selects all `<a>` elements with a target attribute value NOT equal to "_blank"
$(":button")            |  Selects all `<button>` elements and `<input>` elements of type="button"
$("tr:even")            |  Selects all even `<tr>` elements
$("tr:odd")             |  Selects all odd `<tr>` elements
5 Likes