Learn JQuery Selectors

 

Understanding jQuery Selectors


jQuery Home

coding-zon-jquery-selectors

In this tutorial, you will learn, how to use various types of selectors in jQuery.

 What is Selector?

Selector  selects one or more HTML elements using jQuery. Once an element is selected, then we can perform various operations on that selected element.

jQuery Syntax

The purpose of  jQuery syntax is for selecting HTML elements and performing some action on the element(s).
 

Basic syntax is:  $(selector).action()

example: $("p").hide()
  •   $ sign to invoke jQuery
  •   (selector) to "query (or find)" HTML elements/Tag name
  •   action()  jQuery action to be performed on the element(s)

 

The jQuery element selector selects elements based on the element name, and performs specified action on it. 

In the above example $() is a jQuery function, takes HTML element p as a parameter which is known as a selector, and  hide()  function  hides  the  p selector, when user clicks on it.




 TopMenu

 

 

The below code example shows how selectors works.

 

In the given HTML document there are 2 elements:<h2>, <p>. 

jQuery script using p  as a selector, and performing hide action on it.

$(this): indicates the current selector.

 

Example-1

 
click.html

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide(); 
});
});
</script>
</head>
<body>
<h2> jQuery Tutorial </h2>
<p> This is a first paragraph.</p>

</body>
</html>
 
 Goto Menu
 
Example-2
Instead of  p, you can also try the h2 as a selector in the above example.
Below examples shows an alert message, when  user clicks on h2 tag element.
 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").click(function(){

alert("You clicked on h2 element"); 
});
});
</script>
</head>
<body>
 
<h2>This is a simple HTML header Element</h2>
<p>This is a first paragraph.</p>

 
</body>
</html>
 

 Go to Menu
Types of Selectors:
jQuery allows you to select different  properties of the elements as a selector, including:
   
Type -  It indicates element/tag  type : Any tag with in the webpage  example:   
          <p>, <h2>, <button>,<div> ,<a>,<ul>,<li>,<table> 
             $("p").hide() - hides all <p> elements. 
Id -      Id of the element. Id prefixed with  hash (#).
             $("#p1").hide() -     hides the element who's id  is  "p1". 

Class -  Class of the element. Class name prefixed with dot(.).
             $(".test").hide() -     hides all elements with class "test".
    Attribute - Attribute of an element
            $("[href]").hide() -     hides the element whose attribute is "href".
 
this - is keyword refers to the  current element in the context. 
         Example   
         $(this).hide() - hides the current element.  
 
 
 
 Goto Top
Type Selector 
This code example hides all the p tags in the HTML document, when the button is clicked.
 Example-1
 
button.html 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
 
<h2>This is a simple HTML header Tag</h2>
<p>This is a sample paragraph.</p> 
<p>This is a sample paragraph.</p>  
<button>Click me</button>
 
 

</body>
</html>
 
 Menu↑
  Example-2
This example hides the  img elements in the HTML document  when user clicks on the image.
button.html 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("img").click(function(){
$("this").hide();
});
});
</script>
</head>
<body>
 
<h2>This is a simple HTML header Tag</h2>
<p>This is a sample paragraph.</p> 
<p>This is a sample paragraph.</p> 
<img src="flower.jpg" alt="Beautifule Flower" width="100" height="100"> 
<button>Click me</button>
 
</body>
</html>
 
 Move ToTopmenu
Id Selector 
This example hides the p elements in the HTML document which id is "para1"  when the button is clicked.
button.html 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#para1").hide();
});
});
</script>
</head>
<body>
 
<h2>This is a simple HTML header Tag</h2>
<p id="para1">This is a sample paragraph.</p> 
<p id="para2">This is a sample paragraph.</p> 
<button>Click me</button>
 
</body>
</html>
 
 
 Menu
Class Selector 
This example hides the  all the elements when the button is clicked, which are having class 
".c1"  
button.html 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".c1").hide();

});
});
</script>
</head>
<body>
 

<h2 class="c1">This is a simple HTML header Tag</h2>
<p  class="c1">This is a sample paragraph.</p> 
<p id="para2">This is a sample paragraph.</p> 

<button>Click me</button>

 
</body>
</html>
 
 
 Menu
In the above program, there are two elements having class c1, so both h2 and p elements get affected with the hide action. 
 
 Attribute Selector 
This example hides the  elements in the HTML document, which is having attribute "href " attribute,  when the button is clicked.

button.html 
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
</script>
</head>
<body>
 

<h2 class="c1">This is a simple HTML header Tag</h2>
<p  class="c1">This is a sample paragraph.</p> 
<p id="para2">This is a sample paragraph.</p> 
<a href="http://www.google.com">Google</a> 
<button>Click me</button>

 
</body>
</html>
 

 
jQuery Home
 

































Comments











Post a Comment



















Popular posts from this blog









Using javascript pass form variables to iframe src 














Image







      Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal  view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" >     <head>         <title>Bootstrap Model with PDF Example - coding-zon</title>         <meta charset= "utf-8" >         <meta name= "viewport"  content= "width=device-width, initial-scale=1" >         <link rel= "stylesheet"  href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" >         <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.








Read more










 Creating a new PDF by Merging PDF documents using TCPDF














Image







Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF  stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs?  You can merge several documents into one. In PHP, you  have a library called TCPDF which allows you to combine one or more PDF  documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the  PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the  PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide








Read more










Import excel file into mysql in PHP 














Image







  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library  - extract it, rename the folder to library . Create index.php  file with given code in a server. Create  excelUpload.php  with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls  file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:    5.5.11 Folder Structure       Query: CREATE  TABLE  IF NOT  EXISTS  `tbl_products` (   `id` int ( 11 ) NOT  NULL  AUTO_INCREMENT,   `productname` varchar ( 100 ) DEFAULT  NULL ,   `description` varchar ( 100 ) DEFAULT  NULL ,   PRIMARY  KEY  (`id`) )     Top index.php <!DOCTYPE html>  <html>  <head>  <title> coding-zon Demo - Upload Excel to MySQL in PHP </title>  <lin








Read more