jQuery Element Selection Discussion


Looks interesting but I cannot get it to work?


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

edit: here is the html code:

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

// Knop 2 gives an alert

            alert ("Oi! Push me uh? Push ya right back matey!")

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

            alert ($("#Box").val())

            alert ($("#Box").val())

// Alert when entering after input is done.

      $('#Box').keypress(function(e) {
            if (e.keyCode == 13) {



Thank you for pointing that out!


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


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


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.


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.

The .class Selector
To manipulate items in a specific class of items a period character is used followed by the name of the class.

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


I found your post very useful.
thanks for posting


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.


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



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


(document).ready(function(){ ("button").click(function(){

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



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


(document).ready(function(){ ("button").click(function(){


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>



<ul class=“highlight”>












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


mouseenter: function(){




mouseleave: function(){




click: function(){








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.


Thank you, I was confused about that.


Try with this interactive…jQuery Tutorial


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.


Thank you so much, I had that exact question


That’s good to know. Thanks for sharing.