====== Introduction 引言 ======
Now we mainly discuss something about web tier technology. Let's start from basic knowledge: Create a simple html file and show it on browser to customers.
我们主要是讨论前端技术，从最简单的开始说：就是随便编辑一个HTML文件，然后显示给用户看。
Then how to do we show it to customer? what's the display style? So we need to use CSS.
接着，怎么呈现给用户看，显示成什么效果，这时候就需要CSS（层叠样式表)
Another thing, maybe we need to add some actions, so we need to use Script language: Javascript. (What's the next language, which can replace javascript? "Go" or "Dart"? It seems that currently javascript is too strong.)
然后，是不是需要有些动作啊之类的呢，于是想到了脚本语言Javascript.
OKay, everything is done for us. let's think a question:
How to deal with HTML including CSS and Javascript for a browser, eg: Chrome? Why do the browser show the content in that way, not in this way? So let's introduce: Render Enginee/JS Enginee. [[web-basic#browsers_list|Browser List]]
好吧，我们这边的事情搞定了。那浏览器拿到了一个含有CSS，Javascript的HTML文件，凭什么知道怎么显示效果，执行给定的动作呢？于是引入了: Render Enginee/ JS enginee [[web-basic#browsers_list|Browser List]]
In fact, event the same HTML content show in the same browser, the display model may be different. Because we use DOCTYPE to control the display model. [[web-basic#doctype|DOCTYPE]]
What's is HTML File:
其实即使同一个HTML内容给同一个浏览器解析，都还有不同的显示模式的。这就是靠DOCTYPE控制的。 [[web-basic#doctype|DOCTYPE]]
其实HTML文件 结构很简单的：
Morgan
First Content
first Div
你看整个html文档就一个层级似的结构一层一层进去的，这就是说的DOM模型。看那个图，如果倒过来就很像一棵树，树上挂了各种元素。[[web-basic#dom|DOM]]
====== To the Question 入题 ======
It seems that we dwell too much on unrelated knowledge without jquery. This is not consistent with today's topic. So let's see how to introduce Jquery from above knowledge.
Just now, we have mentioned Javascript. And elements in an HTML file are like a tree. So we want to use javascript to do the operation on every element and add action on one element. Then first of all, how to locate one element.
In fact Javascript doesn't provide better method to locate element. We don't want to always use:
document.getElementsByName() document.getElementById()
On the other hand, selector in CSS is a better way to find element. So the author of jquery introduce this method to locate element.(Maybe someone will ask, what's the CSS Selector? I have written document but will write it) [[web-basic#css-selector|css-selector]]
说了这么多废话，压根没说到Jquery，这有悖我们今天讲的。那就看怎么会引入jquery。
刚才说到了Javascript。正是因为html文件中的元素是一个树状的，我们既然用javascript去操作元素，给他添加动作。那首先要定位到元素。
怎么定位呢？其实javascript没有提供太好的方法。我总不可能每次定位，都给他们设置相同的name或者给每个元素加个id.然后写 document.getElementsByName() document.getElementById()
而其实CSS中的selector，这种语法挺好用的，很容易帮我们定位到一个元素。于是jquery的构建者就引入了这种方式。
（肯定有人会问，那什么是CSS的selector，自己去查。我也打算写个文档，存在这个站点上。) [[web-basic#css-selector|css-selector]]
当然jquery不仅仅能用selector方式定位，而且还能用xpath之类的定位。
====== Jquerey Basic Usage ======
.addClass('className') .removeClass('className')
.toggle(function() { }, function() { }); .toggleClass('className');
.hover(function() { }, function() { });
.stopPropagation();
.preventDefault();
.live() .die() 和js的 bind(), unbind()一样。
.trigger('click')
.show()
.show('slow') //finish in 0.6s
.show('normal') //finish in 0.4s
.show('fast') //finish in 0.2s
.show(850) //finish in 850ms
hide() the same with above
.fadeIn()
.fadeIn('slow') //finish in 0.6s
.fadeIn('normal') //finish in 0.4s
.fadeIn('fast') //finish in 0.2s
.fadeIn(850) //finish in 850ms
fadeOut() the same with above
.noConflict();
(css的getter, setter方法）
.css('property1');
.css('property1', 'value1');
.css({'property1', 'value1', 'property2', 'value2'});
https://morgan0329.googlecode.com/svn/trunk/src/main/webapp/demo-jquery/jqueryBasic.html
Please Also check
http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm
====== DOM Operation ======
DOM Operation Summary:
Create a new element: $(). for example: $('Hello
');
Add/insert a new elment in this element: .append() .appendTO() .prepend() .prependTo()
Add a element near this element: .after() .insertAfter() .before() .insertBefore()
Add a new elment to wrap current element: .wrap() .wrapAll() .wrapInner()
Add/replace content/text of this element: .html() .text() .replaceAll() .wrapInner()
Remove "matched element": .empty()
Remove element and sub-element of this element: .remove()
https://morgan0329.googlecode.com/svn/trunk/src/main/webapp/demo-jquery/domOperation.html
Differences: .html() & .text() & .val() Refer to:
http://www.cnblogs.com/CZy5168/archive/2010/01/01/1637416.html
====== AJAX Operation ======
Choose Data Type:
* Html piece.
* JSON file
* Javascript file
* XML file
https://morgan0329.googlecode.com/svn/trunk/src/main/webapp/demo-jquery/ajaxOperation.html
In fact, you can check source code of jquery.1.4.2.js,
getScript(), get(), getJSON, post() call ".ajax()"
get: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
},
getScript: function( url, callback ) {
return jQuery.get(url, null, callback, "script");
},
getJSON: function( url, data, callback ) {
return jQuery.get(url, data, callback, "json");
},
post: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = {};
}
return jQuery.ajax({
type: "POST",
url: url,
data: data,
success: callback,
dataType: type
});
},
ajaxSetup: function( settings ) {
jQuery.extend( jQuery.ajaxSettings, settings );
},
====== Use Plugin ======
It is very simple:
Just add this script in html file. (Remember: jquery plugin is just extention of jquery, so please add jquery.js firstly.)
Common Plugin:
Form: http://malsup.com/jquery/form/
(There are two common function: .ajaxForm() & .ajaxSubmit()
JqueryUI: http://jqueryui.com/ source: https://jquery-ui.googlecode.com/svn/trunk
Validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jqGrid: http://archive.plugins.jquery.com/project/jqGrid
Image Related:
About Maginfication:
1 Maginfy: http://www.jnathanson.com/index.cfm?page=jquery/magnify/magnify/ (Don't know)
2 cloud-zoom: http://www.professorcloud.com/mainsite/cloud-zoom.htm/
3 jqZoom: http://www.mind-projects.it/jqzoom_v10/
4 ajax-zoom: http://www.ajax-zoom.com/
(It's very strong, but it have free version & not free version.
It is too complex. It is created for Php&.net. But it is also support Jsp)
5 zoomooz: http://janne.aukia.com/zoomooz/
disadvantage: need to add several other jquery plugin in. It is not so mature/stable.
advantage: manify this picture in animation way.
About Lightbox
FancyBox: http://fancybox.net/
Latest version: Version: 1.3.4 (2010/11/11)
Thickbox: http://jquery.com/demo/thickbox/
While Thickbox had its day, it is not maintained any longer,
so we recommend you use some alternatives.
* colorbox
* jQueryUI Dialog
* fancybox
* DOM window
* shadowbox.js
-The Management. 9.30.2009 (and Paul Irish)
BlockUI: http://jquery.malsup.com/block/#download
It is suitable for popup dialog.
jqModal: it is OK. not so complex, it also support all kinds of applications.
colorbox: it is so good. So I choose this one.
====== Create Plugin ======
How to create plugin, what do you need to pay attention to:
* Deal with all kinds of Browsers.
* Name convention: jquery.myPlugin.js
* Don't use "$". Instead, please use: jQuery.
* Share your plugin on http://plugins.jquery.com/
In jquery, we like to use :
cascade usage.
For example:
$('#morgan).hide().show();
Please please make sure. it always return a jquery object.
http://developer.yahoo.com/yui/compressor/
Please check example:
https://morgan0329.googlecode.com/svn/trunk/src/main/webapp/demo-jquery/jqueryPlugin.html
TODO: How to implement: "each"?(Check source code)
====== Deep in Jquery ======
* Jquery Source Code/Theory Analysis
* javascript cloures & memory leaks
* javascript Performance Analysis