如何使用jQuery

一、什么是jQuery

1. jQuery是一个非常优秀的JavaScript库。
2. 更确切的说，jQuery是JavaScript框架，因为它定义了自己的语法。
3. jQuery的优秀特性：
   （1）轻量级，压缩版jQuery只有30多K；
   （2）出色的跨浏览器兼容性，不必考虑firefox、IE6、IE7、IE8、Safari、Opera等不同浏览器的兼容性问题；
   （3）完善的Ajax应用，使Ajax变得简单；
   （4）DOM操作简单化；
   （5）丰富的插件支持，强大的易扩展性；
   （6）一句话：Write Less，Do More。写的更少，但做的更多。
   二、引用、使用jQuery
   下载网址：http://jquery.com/
   方法1： 无须加入“type=text/javascript”
   方法2：

jQuery库的两种版本
（1）jQuery的官网地址：www.jquery.com
（2）两种版本可以选择下载：
压缩版(或Min版)：Minified and Gzipped，31K —— 推荐使用
完整未压缩版：Uncompressed Code，229K —— 适合学习和插件开发使用
jQuery对象的写法，区分大小写：
第一个字母“j”为小写，第二个字母“Q”为大写，后面的字母都为小写。
三、jQuery语法

1. 导入jQuery库
   在HTML的标签内导入，导入方式同javascript，代码为：
   
   
   

2. jQuery的简写形式：“$”美元符号例一：$(“#go”) 等同于 jQuery(“#go”)
   例二：$.post 等同于 jQuery.post

3. $()构造函数（1）$()即jQuery()函数，通常被当作jQuery的“选择器函数”。
   （2）圆括号中的为选择器，用来选取HTML元素。
   （3）$()函数的作用：对圆括号中选取的HTML元素自动循环遍历，然后组装成一个jQuery对象返回。（4）例如：$(“#pid”) 的作用相当于javascript中的document.getElementById(“pid”)，
   即获取id="pid"的HTML元素。

4. $(document).ready()文档就绪函数（1）为了防止文档结构还没有完全加载就运行jQuery代码，都应当将jQuery代码包含在一个$(document).ready()函数之中。代码如：
   $(document).ready(function(){
   //---- 这里添加jQuery代码 ----
   });

（2）可以简写为：
$(function(){
//---- 这里添加jQuery代码 ----
});

（3）$(document).ready()类似于JavaScript中的window.onload方法，但是$(document).ready()只需要确保文档的DOM结构加载完就可以执行了，而且还可以同时使用多个$(document).ready()。
5. jQuery的注释
$(document).ready(function(){
//alert(“这是一个单行注释”);
/*
这里是多行注释
第二行注释
*/
});

需要注意：Window.onload与 $(document).ready()的区别

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

链式语法：$(selector).action().action().action()…
说明：被选取的元素执行完第1个action()方法之后，紧接着执行第2个
action()方法，然后是第3个action()方法，依此类推…
这就是jQuery特色的链式操作。
例如：
$(“p”).click(function(){ //click()为鼠标点击事件
$(this).addClass(“red big”).removeClass(“big”).hide(); //连续执行3个方法
/*
$(this)为jQuery对象，表示当前元素
addClass()为添加样式类，class=”类名 添加的类名”
removeClass()为删除样式类
hide()为隐藏元素
*/
});

jQuery对象与 JS对象的区别
JS 对象:
var aObj=document.getElementById(“link”) //通过js相关对象方法获取的对象
jQuery对象:
通过jQuery包装后产生的对象
如:
var $aObj=$(“#one”).html() //获取id名为one 的对象的html.
等同于:
var aObj=document.getElementById(“one”).innerHTML;
注：jquery对象中无法应用DOM 对象的任何方法，反之亦然

jQuery对象与 dom对象的相互转换
1.jQuery对象转换为dom对象

2.dom对象转换为jQuery对象