jQuery - සිංහලෙන්

Saturday, August 6, 2016

jQuery - සිංහලෙන් - basics

prabhath wijesinghe Saturday, August 6, 2016 Laravel 1 comment

jQuery කියන්නේ javascript library එකක්. එකෙන් අපිට ලේසියෙන්ම web site එකේ javascript handle කරන්න පුළුවන්.

The jQuery library contains the following features:

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Tip: In addition, jQuery has plugins for almost any task out there. jQuery will run exactly the same in all major browsers, including Internet Explorer 6!

Adding jQuery to Your Web Pages:

jQuery අපිට download කරන්න පුළුවන්. http://jquery.com/download/

<head>
<script src="jquery-1.12.4.min.js"></script>
</head>

එහෙම නැත්නම් CDN (Content Delivery Network) එකක් include කරන්න පුළුවන්.google හරි microsoft හරි.

google

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

Microsoft

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>

jQuery Syntax

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

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

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

Examples:

using <p> tag

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

using id's (#)

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

using css classes (.class)

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

For more:

$("*")    : Selects all elements
$(this)    : Selects the current HTML element
$("p.intro") : Selects all <p> elements with class="intro"
$("p:first") : Selects the first <p> element
$("ul li:first"): Selects the first <li> element of the first <ul>
$("ul li:first-child") : Selects the first <li> element of every <ul>
$("[href]") : Selects all elements with an href attribute
$("a[target='_blank']") : Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") : Selects all <a> elements with a target attribute value NOT equal to "_blank" Try it
$(":button") : Selects all <button> elements and <input> elements of type="button"
$("tr:even") : Selects all even <tr> elements
$("tr:odd") : Selects all odd <tr> elements

2. jQuery Event Methods

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Example:

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

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

For more example:

http://www.w3schools.com/jquery/jquery_events.asp

මේ ලිපිය ප්‍රයෝජනවත් කියලා හිතෙනවනම් මේ ලිපිය Share කරලා යාළුවන්ටත් කියන්න. Comment එකක් දාන්නත් අමතක කරන්න එපා. ජය වේවා..!!