Front-end basis -jQuery Profile

jQuery

Introduction Chapter 1 jQuery

1.1 The concept of JavaScript libraries

JavaScript development process, the process compatible browser is very complex and very time-consuming, so some of these packages came into the library operations. These libraries will bring some common code encapsulation.

Some methods commonly used to write to a separate js file, use the time to go directly to these references js file on it. (Animate.js, common.js)

Common JavaScript library - jQuery, Prototype, MooTools. JQuery is the most common of which a

jQuery is actually a js file, which encapsulates help us develop a lot of ways, is actually an enhanced version common.js, we learn jQuery, jQuery is actually a bunch of ways this js file package to learn.

Advantage of the benefits of 1.2 jQuery

jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。

1.3 jQuery version

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

国内多数网站还在使用1.x的版本

[JQuery official website] (http: // jquery.com)

JQuery 1.4 Experience

Case: display and setting content

	<input type="button" value="显示" id="btn1">
	<input type="button" value="结束" id="btn2">

    <div>请欣赏动画</div>
	<div>千呼万唤始出来</div>
	<img src="img/1.jpg" style="display:none">
	<img src="img/2.jpg" style="display:none">
        
	<script type="text/javascript" src="jquery.js"></script>
	<script>
		$(document).ready(function () {
		    $('#btn1').click(function () {
		        $('img').show(2000);
		    });

		    $('#btn2').click(function () {
		        $('div').text('下集再见');
		        $('img').hide(2000);
		    });
		});
	</script>

Summarizes the advantages:

-查找元素的方法多种多样，非常灵活
-拥有隐式迭代(自动循环遍历)特性，因此不再需要手写for循环了。
-完全没有兼容性问题。
-实现动画非常简单，而且功能更加的强大。
-代码简单、粗暴。

Top-level objects in the 1.5 jQuery

Top-level objects in jQuery is $ or jQuery

用于：
获取jQuery对象
入口函数（页面加载事件）
高级功能

Note: jQuery and JQuery in the $ keyword itself for the same object;

$ 可以认为就是 一个特殊构造函数  ； 可以使用$(选择器) 方式调用$，得到一个对象，在对象上可以调用$的实例方法
也可以使用$.方法名  调用静态方法。  比如 遍历数组对象的  $.each() 相当于for循环

In 1.6 jQuery page load event

JQuery using three steps of:

引入jQuery文件
入口函数（定义页面加载事件）
功能实现

About jQuery entry function:

// 第一种写法
$(document).ready(function() {
	
});
// 第二种写法
$().ready(function() {
	
});
// 第三种写法
$(function() {
	
});

Comparative jQuery entry function and the window.onload

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。