Main content
Computer programming
Course: Computer programming > Unit 7
Lesson 2: DOM access with jQuery- Finding elements with jQuery
- Challenge: Unicorn-ify a page with jQuery
- Debugging webpages with the browser console
- Getting info on elements with jQuery
- Challenge: Famous discoveries
- Review: DOM access with jQuery
- Project: DOM detective
- History break: How did John build jQuery?
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Review: DOM access with jQuery
To find DOM elements with jQuery, pass a valid CSS selector into the jQuery function:
$("h1"); // selects all the h1s
$("#heading"); // selects the element with id of "heading"
$(".warning"); // selects all the elements with class name of "warning"Note that the jQuery function can be named
$ or jQuery, so those are the same as: jQuery("h1");
jQuery("#heading");
jQuery(".warning"); Many people prefer
$ because it's so short. The jQuery function will always return a jQuery collection of matching elements, even if there is only one matching element -- or none! You can read more about the jQuery function in their documentation.
Once you've found DOM elements with jQuery, you can do things like set their inner contents with
text():
$("#temperature").text("89° Fahrenheit");
(See full example)You can use the same method
text() to get the inner content, by passing it 0 parameters:var heading = $("#heading").text();In the next tutorial, you'll learn many more methods to get and set properties of DOM elements.
Behind the scenes, these jQuery functions all use the DOM API that we taught in the HTML/JS course. For example, the
$ function uses methods like getElementById() and querySelectorAll(), and attr() uses the getAttribute() method. When you use the $ function, you get to use those functions in fewer lines of code, and also know that your code will work in all of jQuery's supported browsers, which is especially important when using the more recent DOM API functions.Want to join the conversation?
i noticed on the console that alot of html lines end in ==$0 does that have anything to do with the jquery function?(14 votes)
In Google Chrome, the== $0signifies the most recently selected DOM object.
You can read more about that, here: https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3#section-1(19 votes)
How did Resig make the $ the same as the string "jQuery"?(8 votes)
One of the last lines of the jQuery library iswindow.jQuery = window.$ = jQuery;windowis the current browser tab you're on, so you can leave that away in normal use.(9 votes)
I'm not understanding what they are asking for on the previous challenge. I have got to step 2. My code is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var math = $("#math-heading").text();
console.log(math);
$("#math-heading").text(math + " wow!")
</script>
It works, but I am being asked "Can you call the text() method on your math variable instead of re-finding the element?" I don't understand the instruction. What I did mimics the previous lesson, so I am not sure what is going on.(4 votes)
Your code works, but it's not what the challenge asks for. The challenge wants themathvariable to be set to$("#math-heading"). Changevar math = $("#math-heading").text();
console.log(math);
$("#math-heading").text(math + " wow!")
tovar math = $("#math-heading");
console.log(math);
math.text(math.text() + " wow!");
You had the right idea, but KA challenges want extremely specific answers.(14 votes)
- I see that in a lot of these challenges you have the id or class name of element hyphenated (ex. math-heading). I tend to use underscores (ex. math_heading) because they are easier for me to read. My question is, should I try to switch over to hyphens, or am I fine with underscores? I didn't know if it was something that professional developers all used.(4 votes)
It really just has to do with the people you are working with/for. If your company wants hyphens in CSS names then that's how you do it.
View the source of the next 10 web sites you visit. You're likely going to see more than one convention. It all comes down to preference and consistency. If a team of developers decide they like camel case instead of hyphens then that is awesome, as long as they keep it consistent.(8 votes)
Why would you want to find out what is inside an element if you can just look at the element?(3 votes)
Because JavaScript might need to know the content of an element. Say you had a program that looked at a webpage and told you how many times each word appeared in that page. You could just look at the elements and figure this out by hand, but this would take way too long.
So to answer your question, JavaScript might need to analyze the text to know how and what to do with it.(3 votes)
So in short JQuery makes JavaScript DOM API easier.(3 votes)- Yes it is. It abbreviates
document.querySelectorAll()to either$()orjQuery().(2 votes)
- So it may sound silly, but why do we have to use the link before we do jquery?(1 vote)
Since jQuery is a library, it is basically a js file. In order for the js file to be associated with the page you are using it on, you must link it to the page. Without the link, the page will not understand the code that you write using the functions from that library.
Hope this clears it up!(6 votes)
- would
var life = $(something).text()
console.log(life)
return the inner content of "something" or the inner HTML
In other words is
the inner content or inner HTML.text(2 votes)- It returns text only. $(something).html() also returns the html tags. You can easily try it out: Just console.log($(something).html()) and console.log($(something).text())(2 votes)
How come there are 2 ways to write code in jQuery (jQuery + $)?(2 votes)
"jQuery" is the formal name for the package, while "$" is a convenience variable to make it a little quicker to write code. $ is a legal variable name in Javascript, so you can redefine it as anything if you want.(1 vote)
- my console.log() not showing up in chrome inspect. Why?(2 votes)
- Make sure you're checking the console tab :)(1 vote)