Introduction
The jQuery library harnesses the power of CSS selectors to let us quickly and easily access elements in a web page.
The main function used in jQuery is: $(). Any tag name, class name, id name put inside this parenthesis will enable us to select the elements. $(p), for example, will locate all paragraphs in a webpage.
When the factory function is used this way we call it a selector. For example if we want to select all paragraphs with class name is div-block in our demo , Then we will use the code: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20selectors/ex1.js?actionable=true In the above example, p is the tag name for paragraphs and .demo-div is the class name of the blue bordered demo div on the right.
Likewise, if we want to select all tags with class name content-demo, we will write: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20selectors/ex2.js?actionable=true We can also do: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20selectors/ex3.js?actionable=true
To select all the paragraphs with the given class ID content.
If we want to select a specific tag with id name firstname then the selector will defined as: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20selectors/ex4.js?actionable=true
If we want to select multiple specific elements we can use a comma in our selector as follows: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20selectors/ex5.js?actionable=true
The above code will select the elements whose id names are firstname and secondname.There are a variety of creative ways to write selectors that allow for sophisticated access of elements in the webpage.
In the examples below all element names, class names and tag id names are interchangeable in the examples illustrated.Here are some examples: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20selectors/ex6.js?actionable=true Selects all elements matched by
$(document).ready(function(){
XT1
});
</script>
Live demo
<div class="tab-content_header live-demo-title-height"><p>We will be using a special function <span class="var-2 light">.css('background-color', 'yellow');</span>, to change the background color that is inside these elements for easy highlighting. </p></div><div id="minidivpage" class="example-live"><div class="div-block"><p class="content-demo">This is the highlight paragraph</p><p class="paragraph-6">This is the second paragraph</p><p class="content regular">This is the highlight blue paragraph</p><div class="text-block-14"><span id="firstname">John</span> <span id="secondname">Smith.</span></div></div></div>
$(document).ready(function() {
XT1
});
</script>
