jQuery Element Selection Discussion

Javascript Programming
#23

Looks interesting but I cannot get it to work?

#24

Did you change the #Box id to the id of your input?

edit: here is the html code:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <input id="Box" type="text" />
  <button id="Knop1" type="button">Personalized msg</button>
  <br><br>
  <button id="Knop2" type="button">Don't Push me!</button>
  <script>

// Knop 2 gives an alert

      $("#Knop2").click(function(){
            alert ("Oi! Push me uh? Push ya right back matey!")
          });

// Knop 1 gives an alert when clicked. The input is the alert.

      $("#Knop1").click(function(){
            alert ($("#Box").val())
      });

      $("#Box").submit(function(){
            alert ($("#Box").val())
      });

// Alert when entering after input is done.

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

    </script>
</body>
</html>
3 Likes
#25

Thank you for pointing that out!

1 Like
#26

Thanks so much Antay for sharing, I will check it out as soon as
possible!

#27

No problem, we are in this together :slight_smile: gl

#28

Thanks, I had just looked up what that was about. I was wondering why my buttons would
work using jquery if they were above the script, but not below. However regular javascript
seemed to work the other way around. This discussion shed some light on it.

#29

How you can use jQuery in order to add logic to HTML elements by specifying an id or class attribute in the tag of the HTML element.

The #id Selector
The id selector uses the # followed by the id of the html item.
$("#test")

The .class Selector
To manipulate items in a specific class of items a period character is used followed by the name of the class.
$(".test")

I don’t have a complicated web page, jet, to fully utilise these abilities.

#30

I found your post very useful.
thanks for posting
Cheers
Otto

#32

Thanks to all who have contributed to the conversation on the jQuery element selectors. I don’t have much to add other than the fact that a solid knowledge of HTML and CSS3 has helped me a lot to understand jQuery.

2 Likes
#33

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

Example

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

To find elements with a specific class, write a period character, followed by the name of the class:

$(".test")

Example

When a user clicks on a button, the elements with class="test" will be hidden:

Example

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

#34

I am using below code to make items in one part of list (class = highlight) 120% with color red on hover event.

<!doctype html> <head>

<title>New Work</title>

<script src=“jQuery.js”></script>

</head>

<body>

<ul class=“highlight”>

<li>Dog</li>

<li>Cat</li>

<li>Elephant</li>

<li>Tiger</li>

</ul>

<p>

<ul>

<li>Canary</li>

<li>Eagle</li>

</ul>

<script>

//Change CSS of element when the mouse enter event happens

$(“ul.highlight”).find(“li”).on({

mouseenter: function(){

$(this).css(‘color’,‘red’);

$(this).css(‘font-size’,‘120%’);

},

mouseleave: function(){

$(this).css(‘color’,‘black’);

$(this).css(‘font-size’,‘100%’);

},

click: function(){

$(this).css(‘background-color’,‘yellow’);

}

});

</script>

</body>

</html>

#35

So basically it shows you how you’re supposed to select stuff in your code so that you can “jQuery it” using .insertjsqueryfunction whatever.

$(“insertelement”) is used to target those elements on the page.

Putting a # in front of the name of the element will use the ID attribute of the HTML tag to target it.

Putting a . instead will target the entire class.

I’m not sure if I quite get it but from the stuff I’ve seen so far I think I understand the idea of selecting the element in the right way within the parentheses and then .jQuerying it.

2 Likes
#36

Thank you, I was confused about that.

#37

Try with this interactive…jQuery Tutorial

#38

Using jQuery, you can control elements by class or id. For example:
$( “.surprise” ).hide();
such code says that all elements of class surprise will be hidden, i.e you can find element by class or id and do what you want to do with this element.

1 Like
#39

Thank you so much, I had that exact question

#40

That’s good to know. Thanks for sharing.

#41

The best use of value for JQuery can be seen in the case of a website that propagates the data from a database. As development of sites have advanced to use tools that make the servers do most of the work, altering the code has become more and more challenging. A good example of such a challenge can be meet when using, templates for a website. In many cases the code can’t be accessed to include the CSS preferred on the element. With JQuery it makes it possible through the wide range of selectors, like a compound CSS selector from JQuery to find the element and alter it to the desired preferences. There are six types of selectors namely,
ID, CLASS, NAME, ATTRIBUTE, COMPOUND CSS, CUSTOM
https://www.tutorialrepublic.com/jquery-tutorial/jquery-selectors.php

#42

I am starting to like the succinctness of this reference.

jQuerySelectors
jQuerySelectors1132×919 105 KB

#43

Thanks, this was helpful