Tutorials • jQuery
jQuery - A JavaScript framework with many advantages - Part 1: The "entry level" - a first small example
1996 ("web-Stone Age"), I have begun to create the first Internet sites - a time when I dreamed of today's opportunities do not even have '.
Nearly 15 years later (ok I ne '"web grandma" am :-)) has the WWWelt changed greatly. The combination of (X) HTML, CSS (3) and JavaScript and the corresponding browser support offer almost unlimited possibilities in appearance and functionality.
A great relief and assistance are also various javascript frameworks.
Prompted a series of articles on the jQuery javascript framework
The sections in this post:
<Example> <HTML Code> <CSS Code> <jQuery Code> <Download> <other Beispiele>
What is a JavaScript framework and what advantages does the use?
Frameworks (framework structure, pitch, basic structure ...) in terms of programming or scripting languages, libraries, the basic und-/oder recurring tasks summarized in functions.
Facilitates the use of a framework and accelerates the development of their own scripts and functions, because you can draw on their pre-tested functions without "reinventing the wheel" to have.
Javascript frameworks have to usually have a single function implementation for different browsers.
This provides developers and web designers a huge relief and time saving in testing websites in different web browsers.
Why is jQuery?
In this article series I have for the jQuery JavaScript framework chosen because it has next to his performance also has a very high prevalence, this entails the following advantages.:
- There are a variety of finished, usable free plug-ins (eg image slider form-tester, table sorters, etc.) that can be used directly
- High rates also provides an ever-improving, (bug report)
- There are a lot of information and tutorials about jQuery
- jQuery is also for people without programming skills to learn quickly and easily
For starters, these are in my eyes (along with speed and functionality), the three most important aspects. In addition, all the javascript frameworks work on a similar principle. So, who is dealing with jQuery and will learn later on a different framework umsteigt be right at home.
Personally, I work according to project and task with different frameworks (eg extjs for application development and intranet solutions) but in the creation of customer sites most often associated with jQuery very high because of the spread.
To get started, first small example of jQuery
<click HTML Code> <click CSS Code> <click jQuery Code> <click download>
To give you an idea of what opportunities it can make jQuery provides a first simple example below.
The jQuery code:
$ (Document). Ready (function () { $ ('# Demo_button1'). Click (function () { $ ('Div.demo_absatz1') addClass ('brown') show ('slow')..; }); });
DEMO - execute code reset DEMO
Hello, I'm an HTML DIV with class "demo_absatz1" after the click on the DEMO button is visible.
If you click on the Demo button, I get a new CSS class You will first (brown) and will finally appear in a slow animation.
Not seen? Simply "reset DEMO" button and try again!
The code in detail
This example consists of 3 parts:
- The HTML code (eg in the file demo1.html)
- The CSS code for the design (in the file demos.css)
- The jQuery code (in de demos.js file)
Note:
You will find the examples in each of the full code so you can understand all hang together.
I am not an advocate for them to write CSS and Javascript code into the document. Outsource your web projects in the code in separate files.
The HTML code
<click Beispiel> <click CSS Code> <click jQuery Code> <click download>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir=ltr lang="de-DE"> <head> A first <title> jQueryBeispiel </ title> <link rel='stylesheet' href='/demos.css' type='text/css' media='all' /> </ Head> <body> <a id="demo_button1" class="demo_button" href="#"> DEMO - execute code </ a> <div class="demo_absatz1"> <strong> Hello, I'm an HTML DIV with the id "demo_absatz1" after the click on the DEMO button is visible. </ strong> </ p> <p> If you click on the Demo button, I get a new CSS class You will first (brown) and will finally appear in a slow animation. </ p> <p> not seen? Simply "reset DEMO" button and try again! </ P> </ Div> Click Here src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <script type='text/javascript' src='/demos.js'> </ script> </ Body> </ Html>
Consider the HTML code a little more closely:
Line 5: This line of outsourced CSS code from the file loaded demos.css. Depending on where your files are stored, you must set the "src" URL may change yet.
Within the body tags (lines 8-14), see the HTML tags to the example below.
Line 8: It starts with a "<a>" day (a link) which has been assigned id "demo_button1". This should be a unique identifier id in your HTML document. This ID is later in the jQuery code to find clearly relevant to the link.
The link has also been assigned a CSS class (class). "Demo_button" in this case. This class will be in the CSS code used to create the element.
10/Zeile line 14: Here you will find a "<div>" day (a box) of the CSS class "demo_absatz1" was assigned. This class is used in the CSS code for the design of the element and the jQuery code for identification.
Lines 11-13: Here is the text which is later shown in the box. It is formatted into 3 paragraphs (<p>). This is the pure content that is not for the CSS and jQuery code of meaning.
Line 16: Here's is very important, because once activated, the jQuery framework. In this example, I'm out of the framework via Google Libs decided to integrate. You can, of course, the current version of jQuery in your web copy, but must be the "src" URL accordingly.
Line 17: Here is the javascript file "demos.js" in which the jQuery code is loaded from my web server. Depending on where your data is stored, you must adjust the "src" URL if necessary.
The files are loaded only at the end, because jQuery actions are executed after loading the HTML and CSS code. Loading the javascript files end up saving loading time before the construction of the HTML document.
The CSS code:
<click Beispiel> <click HTML Code> <click jQuery Code> <click download>
. Demo_absatz1 { display: none; padding: 10px 20px; border: 1px solid # ccc; color: # 000; -Moz-border-radius: 15px; -Webkit-border-radius: 15px; border-radius: 15px; } . Brown { color: # fff; background-color: # 847d6b; border-top: 15px solid # 212 421; } {a.demo_button padding: 4px 4px 8px 10px; background-color: # c6c700; color: # fff; font-weight: bold; border: 1px solid # ccc; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; }
The CSS code under the microscope:
Line 1-10: Here is the class "demo_absatz1" defined. In addition to the design attributes you find a relevant entry in line 2: "display: none". This means that all elements of which this class was assigned on the screen are not visible (in the HTML code already).
Our box is also loading HTML documents invisible.
Line 11-15: The class "brown" appeared previously in the HTML document does not. It is later used to place the box in the Show more distinct.
Line 16-28: Here you will find the design attributes of the link "DEMO - execute code" which was the class "demo-button" assigned.
The individual design attributes I would like first of all does not go further. CSS novices can look up the attributes for example in www.css4you.de.
As a reminder once again of the jQuery code
<click Beispiel> <click HTML Code> <click CSS Code> <click download>
$ (Document). Ready (function () { $ ('# Demo_button1'). Click (function () { $ ('Div.demo_absatz1') addClass ('brown') show ('slow')..; }); });
Now it gets interesting: The jQuery code more accurately considered:
What each is likely to notice immediately that the code is relatively short - the equivalent jquery slogan "Write less, do More".
jQuery is Javascript. All the features of the framework are called starting with "jQuery" or the abbreviation "$".
Line 1 and 5: ". $ (Document) ready" means "If the document is loaded (all HTML elements) execute the following function ..."
In this function should be included of any jQuery code defined on elements in the HTML document refers.
Line 2 and 4: "If the HTML element with id" demo_button1 "is clicked, execute the following function ..."
"# Demo_button1" is a selector - of which there are a lot of jQuery, which I will go down in other parts of this article series in more detail.
# Is the identification of an ID
With this selector you can clearly identify an element of your HTML code.
Line 3: "... All Div boxes with the class" demo_absatz1 "get a new CSS class called" brown "and will appear slowly."
In this line, a further selector is used "div.demo_absatz1". In contrast to the previous, this is not unique, there could be assigned in our HTML document also several boxes Div class "demo_absatz1" (this is not so, but it could be :-)).
In this case, the action applies to all of these elements.
"AddClass" has found the elements of another class called "brown" to (See CSS code line 11-15) and changes the color of the box.
That's it ...
A few minor modifications ...
Effect ... and another!
Instead of "show" we use "SLIDEIN"
$ (Document). Ready (function () { $ ('# Demo_button2'). Click (function () { $ ('Div.demo_absatz2') addClass ('brown') slide down ('slow')..; }); });
DEMO - execute code reset DEMO
Hello, I'm an HTML DIV with class "demo_absatz2" after the click on the DEMO button is visible.
If you click on the Demo button, I get a new CSS class You will first (brown) and will finally appear in a slow animation.
Not seen? Simply "reset DEMO" button and try again!
Instead of "show" we are hollowing "fadeIn"
$ (Document). Ready (function () { $ ('# Demo_button3'). Click (function () { $ ('Div.demo_absatz3') addClass ('brown') fadeIn ('slow')..; }); });
DEMO - execute code reset DEMO
Hello, I'm an HTML DIV with class "demo_absatz3" after the click on the DEMO button is visible.
If you click on the Demo button, I get a new CSS class You will first (brown) and will finally appear in a slow animation.
Not seen? Simply "reset DEMO" button and try again!
"Three at a time"
In this example there are 3 hidden sections are all the same class "demo_absatz4" have.
With one click on "Run demo code" for this reason all three Open on there in the selector looks for the class.
$ (Document). Ready (function () { $ ('# Demo_button4'). Click (function () { $ ('Div.demo_absatz4') addClass ('brown') fadeIn ('slow')..; }); });
DEMO - execute code reset DEMO
Hello, I am the first HTML DIV with class "demo_absatz4" after the click on the DEMO button is visible.
If you click on the Demo button, I get a new CSS class You will first (brown) and will finally appear in a slow animation.
Not seen? Simply "reset DEMO" button and try again!
Yes where is the 2nd hidden sales??
Hello, I am the 2nd HTML DIV with class "demo_absatz4" after the click on the DEMO button is visible.
Yes where is the 3rd hidden sales??
Hello, I'm the 3rd HTML DIV with class "demo_absatz4" after the click on the DEMO button is visible.
Not seen? Simply "reset DEMO" button and try again!
Conclusion:
<click Beispiel> <click HTML Code> <click CSS Code> <click jQuery Code> <click download>
jQuery, CSS and HTML are closely linked and ...
.... that's all not that hard 
I can find a few good ideas you have with this simple jQuery example, the beginning and some are real advantages to the change WWWelt.
Download:
You can use the code from the above code sections or directly copy a zip file with all 3 files (. Html. Css and. Js) here.
hpv24_jquery_beispiel1 (219)
Give it a try!
1 vote / s, average rating: 6.00 stars from max. 6 possible stars
Loading ... 
