Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





jquery syntax :-

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

The $() factory function :- jQuery selectors start with the dollar sign and parentheses $(). and ends with a semicolon (;). the dollar sign ($) is just an alias for jQuery. The factory function $() makes use of following three building blocks while selecting elements in a given document −


<script type="text/javascript">
$(document).ready(function(){
// Some code to be executed...
alert("Hello Jquery!");
});
</script>

The $(document).ready(handler); — This statement is typically known as ready event. Where the handler is basically a function that is passed to the ready() method to be executed safely as soon as the document is ready to be manipulated i.e. when the DOM hierarchy has been fully constructed.

inside an event handler function you can write the jQuery statements to perform any action following the basic syntax, like: $(selector).action(); Where, the $(selector) basically selects the HTML elements from the DOM tree so that it can be manipulated and the action() applies some action on the selected elements such as changes the CSS property value, or sets the element's contents, etc.

File name : index.php

Tag Name     Represents a tag name available in the DOM. For example $('p') selects all paragraphs

in the document.
Tag ID     Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.
Tag Class      Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.

NOTE − The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().

Example

select all the elements with a tag name p.

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>

<body>
<div>
<p class = "myclass">My paragraph.</p>
<p id = "myid">My second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>

How to Use Selectors?

with jQuery you select (query) HTML elements and perform "actions" on them.
Syntax :- $(selector).action()

  • Using jQuery selecting HTML elements and performing some action on the elements.
  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A JQuery action() to be performed on the elements.
  • Examples:
  • $(this).hide() - hides the current element.
  • $("p").hide() - hides all

    elements.

  • $(".test").hide() - hides all elements with class="test".
  • $("#test").hide() - hides the element with id="test".

The Document Ready Event

all jQuery methods write inside a document ready function.

$(document).ready(function()
{
// all statements ....
// jQuery methods go here..
});

Tip:-

The jQuery team has also created an even shorter method for the document ready event.

$(function(){
// jQuery methods go here...
});

How to Select an Element in jQuery?

  • selects 'only one' HTML element with ID "myButton". we use hashes (#) for ids
  • $("#myButton");
  • selects all HTML elements with class "myClass", for instance: <div class='myClass'></div>
  • we used dots (.) for classes, like that of CSS
    $(".myClass");
  • selects all button HTML element, for example: <button>Click Me!</button>
    $("button");
  • selects all div element, example: <div>Me and all other div will be selected!</div>
    $("div");
  • selects all anchor link element, for example: <a href="http://codeofaninja.com/">Me and all other 'a' tags will be selected!</a>
    $("a");

Example :-

File name : index.php

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

</body>
</html>

Example :- How to implement a jquery on your html page.

File name : index.php

<html> <head> <title>The jQuery Result Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
< script > $("#myButton").click(function(){$("p").slideToggle("slow"); }); </script > </head>
<body>
<button id='myButton'>Click to Slide or Toggle</button>
<h2>THIS IS RESULT...</h2>
<p> This is some text in a paragraph. this script show or hide the paragraph. </p>

</body>
</html>

All Selector ("*")

Find every element (including head, body, etc) in the document.

File name : index.php

<!doctype html>
<html lang="en"><head><style>
h3 {
margin: 0;
}
div, span, p {
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head><body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>
var elementCount = $( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
</body>
</html>

EXAMPLE

Find every element (including head, body, etc) in the document.

File name : index.php

<head>
<style>
h3 {
margin: 0;
}
div, span, p {
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
#test {
width: auto;
height: auto;
background-color: transparent;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="test">
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</div>
<script>
var elementCount = $( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
</body>

Example

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, div!");});

$("button").click(function() {alert("Hello button!");});

$("p").click(function() {alert("Hello Paragraph!");});

$("#mahi").click(function() {alert("Hello anchor tag");});





});
</script>
</head>

<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
<button type="button">Click Me</button>
<p>hello paragraph</p>

<a href="#" id="mahi">Hello mahi </a>

</body>
</html>

How to declare a variable in jquery.

File name : index.php

var name = "mahtab";

File name : index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Document Ready Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Click Handler Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link