Post
Ask Question

Explain About jQuery Selector And CSS Use Jquery Element

What are jQuery selectors?

One of the most important concepts are jQuery selectors.  jQuery selector allows you to manipulate HTML elements.

Here, we have a list of jQuery selectors. jQuery selector allows you to select HTML elements in DOM, as given below.

  1. Element ID 
  2. Element TagName
  3. Element ClassName
  4. Element  Attribute 
  5. Element Attribute values and Many More
ID selector jQuery

First, we discuss about jQuery ID selector. Look at the example. 

First, we create the Web project in Visual Studio. We can create project methods given below.  
 
First, open Visual Studio. Click File menu -> New -> Project ->Open new pop up, which we choose under C# and click Web Enter Project name (My Project Name JQuery Selector).



Now, click OK again. The template pop up will open, as shown below.



Click Empty under HTML Template and choose Under Core Reference WebForm. Now, click OK and the new project is created. Now, right click on Project Solution Explorer. Select Add and choose HTML page. Now, install jQuery package, using NuGet Package Manager Console.

using Following Comment
Install-Package jQuery 
 
Now, I will explain about ID selector, using jQuery. First, we look at an example which uses jQuery ID Selector. I have pasted my HTML code with ID Selector jQuery Script. 
  1.  <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.   <script src="Scripts/jquery-3.1.1.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(document).ready(function () {  
  8.             $('#button1').click(function () {  
  9.                 alert('Jquery ALert');  
  10.             });  
  11.         });  
  12.     </script>  
  13. </head>  
  14. <body>  
  15. <input id="button1" type="button" value="Clickme"/>  
  16. </body>  
  17. </html>  
Now, lets me explain about button ID selector.

#  is the symbol for jQuery ID Selector. I created my sample code input button, where I set the name of the input box "button1". Now, I am going to explain how to add a button to jQuery element. First, we should add jQuery Reference in between <Head></Head>. I used jQuery version 3. In this script, the document is ready in the starting process to script fully loaded DOM objects. Now, we add  Reference button to script it by using Click event function. Now, run the script. Click the button, which shows an output alert box.
 

Now, we can change the button's background color, using jQuery Selector. Now, simply change to our Script by adding CSS class for background color Button.
  1. <script src="Scripts/jquery-3.1.1.js"></script>  
  2. lt;script type="text/javascript">  
  3.       $(document).ready(function (){  
  4.           $('#button1').css('background-color', 'yellow');  
  5.       });  
  6.   </script>  
Run the script. Now, the button's background color will be yellow.

 
Now, let us continue discussing about jQuery element Selector. Select the element in jQuery, using tag name selector 
 
Syntax

$(Element)
 
Examples

  1. $('td') //  Select the 'td' Elements 
  2. $(‘Div a’) // select all td Elements
  3. $(‘div a’) // select All anchor elements That are Descendants of Div Element 
  4. $(‘div,span,a’) // selects all div,span and anchor elements

Now, first we need to look up the sample code. Tag all  JQuery elements. First we look up the Td function. Now we can look up how to count td function in the HTML code. First, we need to look at the code given below.  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.   <script src="Scripts/jquery-3.1.1.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(document).ready(function () {  
  8.             alert($('td').length); // td Count script   
  9.            });  
  10.     </script>  
  11. </head>  
  12. <body>  
  13. <table border="1">  
  14.     <tr>  
  15.         <td>THENNARASU</td>  
  16.         <td>MADURAI</td>  
  17.         <td>25</td>  
  18.     </tr>  
  19.     <tr>  
  20.         <td>KARTHIK</td>  
  21.         <td>CHENNAI</td>  
  22.         <td>27</td>  
  23.     </tr>  
  24.   
  25.     <tr>  
  26.         <td>TONY</td>  
  27.         <td>ERODE</td>  
  28.         <td>27</td>  
  29.     </tr>  
  30.   
  31.     <tr>  
  32.         <td>PANDI</td>  
  33.         <td>THENI</td>  
  34.         <td>26</td>  
  35.     </tr>  
  36.     <tr>  
  37.         <td>JOSE</td>  
  38.         <td>KANIYAKUMARAI</td>  
  39.         <td>26</td>  
  40.     </tr>  
  41. </table>  
  42.     <br/>  
  43.     <br/>  
  44.     <div>  
  45.         DIV 1  
  46.         <br/>  
  47.         <a href="www.google.com">Google Search Engine</a>  
  48.     </div>  
  49.     <br /><br/>  
  50.     <div>  
  51.         DIV 1  
  52.         <br />  
  53.         <a href="www.facebook.com">facebook</a>  
  54.     </div>  
  55.   
  56. </body>  
  57. </html>  
Now, I am going to count how many Td functions are available in the script. I need to script alert($('td').length). This line counts td counter. Now, run the script and we will get the counter of td tag.

 

Now, our code will have 15 td element tags.

Now, if you want to display every row separately, then we can use this script and we can get an alert in every row. 
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.              $('table tr').each(function () {   /// tr alert box display  every  tr Row   
  4.               alert($(this).html());  
  5.             });     
  6.         });  
  7.     </script>  
Now, we are going to apply Color tr attribute, using jQuery. 
  1. <script src="Scripts/jquery-3.1.1.js"></script>  
  2. <script type="text/javascript">  
  3.        $(document).ready(function () {  
  4.                  $('tr').css('background-color', 'yellow');  // tr color  
  5.   
  6.            });  
  7.    </script>  
Now, run the script. We can see tr tag which is completely yellow, as shown below.

 
Now, all tr tags should be yellow. Now, we are going to see HTML code structure, using jQuery. Now, use the script given below. 
  1. <script src="Scripts/jquery-3.1.1.js"></script>  
  2. <script type="text/javascript">  
  3.        $(document).ready(function () {          
  4.            alert( $('table').html());  
  5.        });  
  6.    </script>  
Now, we can see HTML code after running the script given above and the output should look, as shown below.



Now, I am going to explain how to apply Color Div and Span.
  1. <script src="Scripts/jquery-3.1.1.js"></script>  
  2. <script type="text/javascript">  
  3.        $(document).ready(function () {  
  4.        
  5.           $('span,a,div').css('background-color','yellow'); //all elament change color   
  6.   
  7.         
  8.        });  
  9.    </script>  
Now, color is applied and it also includes all Span, DIV tag. The output will look, as shown below.


Now, next discussion is about how to apply color. 
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.               
  4.            $('tr:Even').css('background-color', 'gray');  
  5.            $('tr:odd').css('background-color', 'red');  
  6.         });  
  7.     </script>  
Now, the output will look, as shown below.
 

Conclusion

I hope you understood how to use Id Selector and jQuery tag element selector and how to apply CSS in the tag element. Please share your valuable feedback and comments to improve my future articles.


Similar Articles