jQuery Basic Function

What is jQuery‭ ‬:

JQuery is a JavaScript library which is small, quick, with tons of features that makes things such as animation, event handling and manipulation in web browser easy to use and handle.

1-jQuery is a fast and concise JavaScript Library created by John Resig in‭ ‬2006‭ ‬with a nice motto‭ ‬-‭

2-Write less,‭ ‬do more.‭

3-jQuery simplifies HTML document traversing,‭ ‬event handling,‭ ‬animating,‭ ‬and Ajax interactions for rapid web development.

Following feature of jQuery‭ ‬:

1-DOM manipulation‭ ‬−‭ ‬The jQuery made it easy to select DOM elements,‭ ‬traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.

2-Event‭ ‬Handling‭ ‬:‭ ‬The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,

3-Ajax Support‭ ‬:

‭ jQuery support ajax technology,

4-Lightweight‭ ‬:he jQuery is very lightweight library‭ ‬-‭ ‬about‭ ‬19KB in size‭ ( ‬Minified and gzipped‭ )‬.

5-Animations‭ ‬−‭ ‬The jQuery comes with plenty of built-in animation effects.

6-Cross Browser Support‭ ‬−‭ ‬The jQuery has cross-browser support,‭ ‬and works well in IE and all.

Following function mostly used many times in jquery :

1-hide function,

2-show function,

3-toggle function,

4-slideUp function,

5-slideDown function,

6-slideToggle,

7-fadeOut function,

8-fadeIn function,

9-fadeToggle function,

10-Animate function,

1-hide function:

hide function mostly used to hide html element

function :

hide();

Demo link :

http://freeteachnology.hol.es/jqueryfunction/hide/

Code link :

https://drive.google.com/open?id=0BxmTZPVcu72fZ1VnYjFPSFlLeGs

following example used jquery hide() function ,when call any click event or html event call a function and thoese function call hide function.

Follwoing file structure :

1-header.php

2-index.php,

3-footer.php

1-header.php :

header.php file include bootstrap links well as jquery link,

Code :

<head>

<title>jQuery hide() function</title>

</head>

<body>

<a class="navbar-brand" href="#">Free Teachnology</a>

</div>

<li><a href="#">About us</a></li>

<li><a href="#">Contact us</a></li>

</ul>

</div>

</div>

</nav>

</br></br></br>

2-footer.php :

footer.php file include bootstrap css link

Code :

// $(".errorMsg").alert('close');

$(".errorMsg").slideUp(2000);

</script>

<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>

</div>

</ul>

</div>

</footer>

.footer-bottom {

margin-top:220px;

background: #E3E3E3;

border-top: 1px solid #DDDDDD;

padding-top: 10px;

padding-bottom: 10px;

}

.footer-bottom p.pull-left {

padding-top: 6px;

}

</style>

</body>

</html>

3-index.php :

index.php files link href tags bind onclick event call jquery function and following jquery code is :

Code :

$('.jqueryHide').click(function() {

// alert('hi');

$('.jqueryProfileHide').hide('2000');

});

</script>

full code is :

<?php include('header.php'); ?>

<body>

<strong>Hi..</strong> jQuery hide() fucntion.

</div>

<a href="#" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>

<strong> Code download link-</strong>

</div>

Hide

</a>

</div>

<h3>Disuza Jen</h3>

<h6>Email: disuzajen@gmail.com</h6>

<h6>Country: India</h6>

</div>

</br>

<?php include('footer.php'); ?>

$('.jqueryHide').click(function() {

// alert('hi');

$('.jqueryProfileHide').hide('2000');

});

</script>

2-show function:

show function mostly used to show html element

function :

show();

Demo link :

http://freeteachnology.hol.es/jqueryfunction/show/

Code link :

https://drive.google.com/open?id=0BxmTZPVcu72fV2NMeS1FQkZ0ZWs

following example used jquery show() function ,when call any click event or html event call a function and thoese function call hide function.

Follwoing file structure :

1-header.php

2-index.php,

3-footer.php

2-header.php :

header.php file include bootstrap links well as jquery link,

Code :

<head>

<title>jQuery show() function</title>

</head>

<body>

<a class="navbar-brand" href="#">Free Teachnology</a>

</div>

<li><a href="#">About us</a></li>

<li><a href="#">Contact us</a></li>

</ul>

</div>

</div>

</nav>

</br></br></br>

2-footer.php :

footer.php file include bootstrap css link

Code :

<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>

</div>

</ul>

</div>

</footer>

.footer-bottom {

margin-top:220px;

background: #E3E3E3;

border-top: 1px solid #DDDDDD;

padding-top: 10px;

padding-bottom: 10px;

}

.footer-bottom p.pull-left {

padding-top: 6px;

}

</style>

</body>

</html>

3-index.php :

index.php files link href tags bind onclick event call jquery function and following jquery code is :

Code :

$('.jqueryHide').click(function() {

$('.jqueryProfileHide').show('2000');

});

</script>

full code is :

<?php include('header.php'); ?>

<body>

<strong>Hi..</strong> jQuery show() fucntion.

</div>

<a href="#" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>

<strong> Code download link-</strong>

</div>

Hide

</a>

</div>

<h3>Disuza Jen</h3>

<h6>Email: disuzajen@gmail.com</h6>

<h6>Country: India</h6>

</div>

</br>

<?php include('footer.php'); ?>

$('.jqueryShow').click(function() {

// alert('hi');

$('.jqueryProfileShow ').show('2000');

});

</script>

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...

FT

Search This Blog

jQuery Basic Function

Labels

Comments

Popular posts from this blog

using PDO database connection add,update,delete,edit operation

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

GUID for globally unique identifier