jQuery：
jQuery 是一个 JavaScript 库。
======================引入====================
<script src="js/JQuery.js"></script>
jQuery 语法实例
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
- $(this).hide()
- 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
- $("p").hide()
- 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
- $(".test").hide()
- 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
- $("#test").hide()
- 演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
- 当引入放在<head></head>标签里：
- 为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
- 我们写上一个函数：
- $(document).ready(function(){
- //在里面继续写内容，这是当文档全部加载就绪，运行jQuery
- })
- selector 选择器
- 根据标签当作选择器 $("p") 选取 <p> 元素。
- 根据class找到选择器 $(".p") 选取 <p> 元素。
- 根据ID找到选择器 $("#p") 选取 <p> 元素。
- 根据css选择器 $("p").css("background-color","red"); //所有P
- 事件方法：
- $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
- $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
- $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
- $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
- $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
- ========================jQuery效果：====================
- 显示隐藏： $(selector).hide(speed,callback); //隐藏
- $(selector).show(speed,callback); //显示
- 切换：
- $(selector).toggle(speed,callback); //切换
- 淡入淡出：
- $(selector).fadeIn(speed,callback); //淡入效果
- $(selector).adeOut(speed,callback); //淡出效果
- $(selector).fadeToggle(speed,callback); //切换
- $(selector).fadeTo(speed,opacity,callback); //给定不透明度
- 滑动： $(selector).slideDown(speed,callback); //向下滑动
- $(selector).slideUp(speed,callback); //向上滑动
- $(selector).slideToggle(speed,callback); //切换
- 动画：
- $(selector).animate({params},speed,callback); //创建自定义动画
- 停止：
- $(selector).stop(stopAll,goToEnd); //在动画或效果完成前对它们进行停止。
- 回调函数：
- $(selector).hide(speed,callback); //当动画 100% 完成后，即调用 Callback 函数。
Chaining：链接
- $("#p1").css("color","red").slideUp(2000).slideDown(2000);
- ============================jQuery获取内容和属性==================
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
获取属性：attr（）
attr与css的区别 ：attr是获取或设置元素的某个属性值，css是设置或获取元素style里面的属性的
=====================添加新的元素/内容=================
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
========================删除元素/内容======================
- remove() - 删除被选元素（及其子元素） //方法也可接受一个参数，允许您对被删元素进行过滤。
- empty() - 从被选元素中删除子元素
======================对css元素进行操作===================
- addClass() - 向被选元素添加一个或多个类 //添加多个类，中间用空格隔开
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
css() 方法设置或返回被选元素的一个或多个样式属性。
返回指定的 CSS 属性的值：
css("propertyname"); //返回首个匹配元素
设置指定的 CSS 属性：
css("propertyname","value"); //将为所有匹配元素设置 值
设置多个 CSS 属性：
css({"propertyname":"value","propertyname":"value",...});
===============================处理元素和浏览器窗口的尺寸====================
- width() //方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height()
- innerWidth() //方法返回元素的宽度（包括内边距）。
- innerHeight()
- outerWidth() //方法返回元素的宽度（包括内边距和边框）。
- outerHeight()
-
outerWidth(true) 方法返回元素的宽度 （包括内边距、边框和外边距）。
- outerHeight(true) 方法返回元素的高度 （包括内边距、边框和外边距）。
====================================向上遍历DOM树============================
- parent() //返回被选元素的直接父元素。
- parents() //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
- parentsUntil() //返回介于两个给定元素之间的所有祖先元素。（不包括最后一个）
===========================向下遍历==========================
- children() //返回被选元素的所有直接子元素。
- find() //返回被选元素的后代元素，一路向下直到最后一个后代。（不包括最后一个）
============================同胞元素======================
- siblings() //返回被选元素的所有同胞元素。
- next() //返回被选元素的下一个同胞元素。
- nextAll() //返回被选元素的所有跟随的同胞元素。
- nextUntil() //返回介于两个给定参数之间的所有跟随的同胞元素。（不包括最后一个）
- prev()
- prevAll()
- prevUntil()
==============================过滤==========================
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
=================================.each（）===========================
对 jQuery 对象进行迭代，为每个匹配元素执行函数。
each() 方法规定为每个匹配元素规定运行的函数。
提示：返回 false 可用于及早停止循环。
$(selector).each(function(index,element)) function(index,element) 为每个匹配元素规定运行的函数。
index 选择器的index位置 element （当前元素，也可以使用“this”选择器）
例子：
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>