一、简介

• jQuery 是一套“写的更少，做得更多”JavaScript 脚本库，非框架
• 特点： 提供了强大的功能函数、解决浏览器兼容性问题、实现丰富的UI、纠正错误的脚本知识
• 基础：HTML、CSS、JavaScript
• jQuery 库包含特性：HTML 元素选取、HTML元素操作、CSS操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities

二、使用

jQuery 官网 提供介绍、下载、API等。

• 下载
  官网下载jQuery，共有两个版本：
  Production version - 用于实际的网站中，已被精简和压缩。
  Development version - 用于测试和开发（未压缩，是可读的代码）
• 通过 CDN（内容分发网络） 引用

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-2.1.1.min.js”></script>

蛮好用的一个CDN

三、jQuery 对象

获取页面上任意一个或一组对象。

3.1 Dom 对象

JavaScript 获取

图片.png

//根据id获取单个Dom对象
var div = document.getElementById("div_one");

//根据标签名称获得Dom对象集合
var div = document.getElementsByTagName("div");

3.2 jQuery 包装集

是对Dom对象的扩充，jQuery 将所有的对象，无论是一个或一组，都封装成一个jQuery 包装集。每一个包装集都是作为一个对象一起调用的，包装集也用于属性和方法。

var jQueryObject = $("#testDiv");

3.3 Dom 和jQuery 包装集的装换

• Dom 转jQuery 包装集

var div = document.getElementById("div_one");
var domToJQueryObject = $(div);

• jQuery 包装集转 Dom

//jQuery 包装集是一个集合，通过索引器访问其中的元素
var domObject = $("#testDiv")[0];

//包装集遍历,this是Dom元素
$("#testDiv").each(function (){
    alert(this);
    $(this).html("修改内容");
});

四、jQuery 选择器详解

1. 基础选择器 Basics

2.层次选择器 Hierarchy

3.基本过滤器 Basic Filters

4. 内容过滤器 Content Filters

5.可见性过滤器 Visibility Filters

6.属性过滤器 Attribute Filters

7. 子元素过滤器 Child Filters

8.表单选择器 Forms

9.表单过滤器 Form Filters

五、管理jQuery 包装集

（一）动态创建元素
使用innerHTML直接添加元素的操作在IE6上，如果网络慢或者页面内容太大会出现终止操作的错误。

• 使用HTML DOM 创建元素
  使用document.createElement 创建Dom 元素，然后通过appendChild添加到指定对象上。

var select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);

• 使用jQuery 函数创建元素

$("<div style= \"border: solid 1px #FF0000\">动态创建的div</div>>")

//内部使用document.createElement 创建元素
$("<div />").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

//内部使用innerHTML 方法创建元素
$("<div style= \"border: solid 1px #FF0000\">动态创建的div</div>>").appendTo(testDiv);

• 将元素添加到对象上
  一定不可以在页面加载时就改变DOM 结构，必须在页面加载完成后添加或删除元素。

//传统方法
window.onload = function () { 
    testDiv.innerHTML = "<div style= \"border: solid 1px #FF0000\">动态创建的div</div>>";
}

//jQuery 使用动态$(document).ready(function) 方法
$(document).ready(
    function () {
        testDiv.innerHTML = "<div style= \"border: solid 1px #FF0000\">动态创建的div</div>>";
    }
);

//jQuery 使用$(function) 方法
$(
    function () {
        testDiv.innerHTML += "<div style= \"border: solid 1px #FF0000\">动态创建的div</div>>";
    }
);

(二)jQuery 提供的管理包装集的函数
1.过滤 Filtering

2.查找 Finding

3.串联 Chaining

六、使用jQuery 操作元素的属性和样式

通常将id、src等称为元素属性，浏览器将元素解析成DOM 对象时，元素属性存储为DOM 属性，但元素属性和DOM 属性属性是有区别的，如src会将相对路径转成绝对路径，属性class对应className等。
JavaScript 中可以直接修改获取属性。

$("img").each(function (index) {
    
    this.alt = "Flower";
    alert("index:" + index + ", id" + this.id + ", alt:" + this.alt);
});

JavaScript 中还提供getAttribute和setAttribute来操作元素属性。
在jQuery 中提供attr()包装集函数 该函数可以同时操作包装集中所有元素的属性。

注：当获得的包装集中只有一个对象，使用attr(name)获得他的元素属性，attr(key, name)会设置所有包装集中的元素属性，attr(properties)可以一次修改多个元素属性，removeAttr( name )函数删除元素属性，但是对应的DOM属性不会被删除，只会被影响。

6.1 修改CSS

修改CSS 类.png

修改CSS 样式.png

6.2 获取常用属性

1.宽和高相关 Height and Width

图片.png

2.位置相关 Positioning
另外在一些设计套弹出对象的脚本中,常常需要动态获取弹出坐标并且设置元素的位置.
但是很多的计算位置的方法存在着浏览器兼容性问题, jQuery 中为我们提供了位置相关的各个 函数:

七、事件与事件对象

参考：
jQuery API
jQuery 入门教程
jQuery 教程