Ad Code

Ticker

6/recent/ticker-posts

Jquery multiple types of selectors in html

 

Jquery multiple types of selectors in html

In the Html webpage for dynamic update a particular section we can mostly use jquery or javascript. Both are the same but jQuery is easier to use as compared to javascript. JQuery has many pre-build functions of javascript which is easier to learn jquery compare to javascrpt.

There have many types of Html selector usage in jQuery:-

1. ID:-

In the Html tag, we are use id attribute for the unique identify the specific Html tag and perform javascript or jquery operations and events easier without conflict to another Html tag because id is unique in a whole web page. This is used in jQuery with # prefix for id selector.
<ul>
	<li>List item 1</li>
	<li id="list2">List item 2</li>
	<li>List item 3</li>
	<li>List item 4</li>
	<li>List item 5</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$("#list2").css("color","red");
</script>
This example is to change the text color of only id selector which value is list2 and jquery usage with #list2 as a selector to perform the action of jquery.

2. Class:-

Html also uses the class selector for jquery and CSS both. The class attribute can be duplicated in the Html webpage. The usage of class attribute for the purpose of applying the same style into every Html tag which has the same class name, and in jquery it performs the same action on every Html tag which has the same class attribute tags.
<ul>
	<li>List item 1</li>
	<li class="change-color">List item 2</li>
	<li>List item 3</li>
	<li>List item 4</li>
	<li>List item 5</li>
</ul>
<p class="change-color">change text color</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$(".change-color").css("color","red");
</script>
In this example, the class attribute change-color is two Html tags one is li and another is p tag. After running this example then change the text color of both tag text one is li and another is p because on the same class attribute. The class selector usage with dot(.) prefix.

3. Custom Attribute:-

This is based on user-defined attributes which only attribute or attribute value both types of use jquery as selectors also it is used as CSS selector. This is maybe multiple tags with the same attribute or unique it is totally based on the user-defined.
<ul>
	<li>List item 1</li>
	<li change-color>List item 2</li>
	<li>List item 3</li>
	<li>List item 4</li>
	<li>List item 5</li>
</ul>
<p change-color>change text color</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$("[change-color]").css("color","red");
</script>
In this example, use attribute as selector, it is also used based on the attribute value like this [change-color="red"] as the selector.

4. Html Tag:-

This is a simple method but you can use it to perform the action on the all selector tag then you can use or derive from the parent tags.
<ul>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
	<li>List item 4</li>
	<li>List item 5</li>
</ul>
<p>change text color</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$("li, p").css("color","red");
</script>
In this example, we are used two tags li and p in the same function as the selector. this performs both tags to change the text color.

Also, have some other selectors but it is not used as alone it is the usage with the help of the above selectors, see bellow:-
  1. :last:- This is select the last element of the selector which derived this selector for example, the bellow example to change text color only last li of the ul
    <ul>
    	<li>List item 1</li>
    	<li>List item 2</li>
    	<li>List item 3</li>
    	<li>List item 4</li>
    	<li>List item 5</li>
    </ul>
    <p>change text color</p>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    	$("li:last").css("color","red");
    </script>

  2. :first:- This is performed an action of the only first elements of the tags or selector.
    $("li:first").css("color","red");
  3. :nth-child(n):- This function usage-specific no of element to perform action like this
    $("li:nth-child(2)").css("color","red");
    This also defines the odd or even element selected of the selector, n is the positive integer number.
  4. parent() and closest():- This is to select the ancestor element of the selector and it is a jquery function. Click here for more.
Also have many functions to help the selector to perform actions and events in the Html webpage using jquery. Most commonly use jquery for every webpage nowadays. The most important thing you don't forget is to add jquery CDN to the web page or local jquery file.

Post a Comment

0 Comments

Ad Code