Apparel Software

Powered by Blogger.

JQuery Programming for Wordpress Part1

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;}




Share :

Facebook Twitter Google+ Linkedin
0 Comments "JQuery Programming for Wordpress Part1"

Back To Top