JQuery Programming for Wordpress Part1

Monday, April 24, 2017

JQuery Programming for Wordpress

Class Date : 22/04/17

jQuery Programming for Wordpress is a JavaScript Library. Jquery is the product of javascript.
jQuery Programming for Wordpress greatly simplifies JavaScript programming.
jQuery is case sensitive that easy to learn. Fa-fa-facebook is special type of icon and it should be linked with that side.

What You Should learn JQuery Programming for Wordpress

Sahifa is very good wordpress theme that contain Jquery script speak by nehal sir. Before you start studying jQuery Programming for Wordpress you should have a basic knowledge of-
HTML Script
CSS Script
JavaScript

What is jQuery Programming for Wordpress?

jQuery Programming for Wordpress is a library of JavaScript Functions. If we show as view page source we can see all code of Jquer in a theme. We can also see all Javascript source code in any website by view page source.

The jQuery Programming for Wordpress library contains the following essential features:
HTML element select
HTML element manipulation
CSS manipulation
JavaScript Effects and animations
HTML basic
Adding the jQuery Library to Your Pages
Jquery script will in inside head tag of html . Woo canvas is not good theme because maximum functionality is off by default
<script type="text/javascript" src="jquery.js"></script>

jQuery Syntax

The jQuery Programming for Wordpress syntax is important made for selecting HTML elements and perform its action.

Basic syntax of Jquery is: $(selector).action()
A $ sign to define jQuery in each line
A (selector) to "query (or find)" HTML elements
A jQuery action() implement the element(s)

Examples of Jquery code

$(this).hide() – It will hides current element
$("p").hide() – It will hides all paragraphs
jQuery Element Selectors
jQuery script programming for wordpress uses CSS selectors to select HTML elements.
$("p") selects all <p> elements.

Document Ready Function

$(document).ready(function(){
// jQuery script programming for wordpress functions go here...
});
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p> Helow Shakil if youo click me I will dispper</p>
<p> Hey Shakil if youo click me I will away</p>
<p> Helow Shakil if youo click me I will too</p></body>

</html>

Example of Slider

Example of Slider Image/Output

Example of Slider CSS Code

body
{ margin:0px; background-color:#CCC;}

.container
{ width:960px; height:750px; margin:0px auto; background-color:#FFF;}

.header
{ width:900px; height:150px; margin:10px 30px 5px 30px; background-color: #666; float:left;}

.nav
{ width:900px; height:35px; margin:0px; background-color: #999; float:left; margin:0px 30px 5px 30px;}

.slider
{ width:900px; height:350px; margin:0px; background-color: #999; float:left; margin:0px 30px 5px 30px;}

Lectra Wilcom