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>