jQuery简介及入门

一、什么是jQuery？

1、jQuery是一个JavaScript库；也可以说jQuery是JavaScript框架，他还定义了自己的语法.
2、jQuery的特点

（1）兼容性比较强，不必考虑firefox、IE6、IE7、IE8、Safari、Opera等不同浏览器的兼容问题
（2）完善的Ajax应用，使Ajax变得简单
（3）DOM操作简单化
（4）丰富的插件支持，强大的易扩展性; 写的更少，但做的更多。

二、jQuery的引入

1.1、<script src=“jquery.js”></script>
无须加入“type=text/javascript”
1.2、 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>

三、开始jQuery

1、首先在head标签内导入jQuery库

2、jQuery的简写形式：“$”美元符号

例一：$("#go") 等同于 jQuery("#go")    
例二：$.post 等同于 jQuery.post    
复制代码

3、$()构造函数

（1）$()即jQuery()函数，通常被当作jQuery的“选择器函数”。      
（2）圆括号中的为选择器，用来选取HTML元素。
（3）$()函数的作用：对圆括号中选取的HTML元素自动循环遍历，然后
   组装成一个jQuery对象返回。
复制代码

4、jQuery对象的写法

区分大小写：第一个字母“j”为小写，第二个字母“Q”为大写，后面的字母都为小写.

5、为了防止文档结构还没有完全加载就运行jQuery代码，都应当将jQuery	代码包含在一个$(document).ready()函数之中
例如:
$(document).ready(function(){
//---- 这里添加jQuery代码 ----
 });
简化版写法:
$(function(){
 //---- 这里添加jQuery代码 ----
});
这两种写法就相当于JavaScript中的window.onload=function(){}
同时$(document).ready(function(){})可以多个使用
复制代码

6、jQuery注释
注释与JavaScript写法一样分为单行注释和多行注释
单行注释为 // ctrl+/
多行注释为/* */ ctrl+shift+/

四、window.onload与$(document).ready(function(){})的区别

1、执行时机

window.onload====必须在网页中所有的内容加载完毕之后才可执行(包括图片img) $(document).ready(function(){})====页面当中的DOM结构绘制加载完毕即可执行，可能与DOM元素关联的并未完全加载完

2、编写个数

window.onload====不可以编写多个 $(document).ready(function(){})====可以编写多个，并且都会执行

3、简化写法

window.onload 无简化写法 $(document).ready(function(){})可以简化为$(function(){})

五、JavaScript DOM对象与jQuery对象的区别

JavaScript通过js相关对象方法获取的对象
例如:
getElementById()、getElementsByClassName、
getElementsByTagName、getElementsByName

jQuery对象:
通过jQuery包装后产生的对象
如:
var $aObj=$(“#one”).html() //获取id名为one 的对象的html. 等同于: var aObj=document.getElementById(“one”).innerHTML;

注：jquery对象中无法应用DOM 对象的任何方法，反之亦然

六、jQuery对象与JavaScript对象之间的相互转换

1、jQuery对象转JavaScript对象
1.1、[index]方法
var $cr = $(“#cr”); var cr = $cr[0];

1.2、get[index]方法
var $cr = $(“#cr”); var cr = $cr.get(0)

2、JavaScript对象转jQuery对象
var cr = document.getElementById(“cr”); var $cr = $(cr);\

七、基本语法

1、基本语法：$(selector).action()

（1）$：jQuery的简写形式 （2）$()：jQuery选择器函数 （3）selector：jQuery选择器，用来选择和查找HTML元素 例如：$("#go") —— 选择所有 id="go" 的元素 （4）action()：执行的方法或操作，可以是事件或动画效果 例如：hide() —— 执行隐藏操作 例如： $("#go").hide() —— 选择所有id="go"的元素，然后执行隐藏操作； 也就是，隐藏所有id="go"的元素

2、链式语法：$(selector).action().action().action().....
复制代码

说明：被选取的元素执行完第1个action()方法之后，紧接着执行第2个
action()方法，然后是第3个action()方法，依此类推……
这就是jQuery特色的链式操作。