jQuery入门知识点

《精通ASP.NET MVC3框架》第20章

1、jQuery文件
jquery-1.5.1.js:jquey核心库常规版
jquery-1.5.1.min.js:jquery核心库最小化版
jquery-ui.js:jquery ui库的常规版
jquery-unobtrusive-ajax.js:非唐突ajax支持库的常规版
jquery-validate.js：非唐突客户端验证的常规版
jQuery-1.5.1-vsdoc.js:对核心库的只能感知支持

添加智能感知：
@if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
}

2、选择器
（1）基本的jquery选择器
$('*'):选择文档中所有元素
$('.myclass'):选择css的class值为myclass的所有元素
$('element'):选择<element〉类型的所有元素
$('#myid'):选择ID为myid的元素

$('td,th'):选择所有的td和th元素
$('td input'):选择包含在td元素中的所有input元素

（2）属性选择器
$('[attr]'):选择有attr属性的元素，不考虑属性值
$('[attr]="value"'):选择有attr属性且其值为value的元素
$('[attr]!="value"'):选择有attr属性且其值不为value的元素
$('[attr]^="value"'):选择有attr属性且其值以value开头的元素
$('[attr]~="value"'):选择有attr属性且其值包含value的元素
$('[attr]$="value"'):选择有attr属性且其值以value结尾的元素
$('[attr]|="value"'):选择有attr属性且其值为value或以value开头或value后跟连接符（value-）的元素

组合属性选择器：$('[type][value="delete"]'):选择有type属性，且value属性值为delete的那些元素

3、过滤器
$('td:eq(8)'):过滤与选择匹配的元素数组中的第9项

（1）基本过滤器

:eq(n)-选择所选内容的第n+1项
:even :old-选择偶数或奇数元素
:first :last-选择第一个或最后一个元素
:gt(n) :lt(n)-选择索引号大于或小于n的元素
:header-选择所有标题元素
:not(selector)-选择所有与选择器不匹配的元素

过滤器需要和选择器联合，当单独使用时，默认使用了$('*')选择器，如$(':header')

使用多个过滤器：$('td:odd:eq(1)'):选择td元素，对其过滤只保留奇数项，然后选择第2项

（2）内容过滤器
:contains('text') 选择含有text或其子元素含有text的元素
:has('selector') 选择至少有一个子元素与selector匹配的元素
:empty 选择没有子元素的元素
:parent 选择至少有一个其他元素的元素
:first-child 选择它们父节点的第一个子元素
:last-child 选择它们父元素的最后一个子元素
:nth-child(n) 选择它们父元素下的第n个子元素（索引从1开始）
:only-child 选择它们父节点的唯一子元素

（3）表单过滤器
:button 选择按钮元素，以及其type为button的input元素
:checkbox 选择复选框
:checked 选择被选中的复选框和单选按钮元素
:diasbled :enabled 选择启动或禁用的项
:input 选择input元素
:password 选择口令元素
:radio 选择单选按钮
:reset 选择type为reset的元素
:selected 选择被选中的option元素
:submit 选择type为submit的input元素
:text 选择type为text的input元素

4、jquery方法

（1）简单示例

$('P SPAN').addClass('SuperBig') 对包含在<p>节点中的所有<span>节点，添加一个值为SuperBig的CSS的class
$('.SuperBig').removeClass('SuperBig') 从包含css的class为SuperBig的所有节点删除这个class
$('#option').toggle() 切换ID为options的元素的可见性
$('DIV:has(INPUT[type="checkbox"]:disabled)').prepend('<i>Hey!</i>') 在含有禁用复选框的所有div元素的顶部插入<i>标记
$('#options A').css('color','red').fadeOut() 在id为options的元素中找出所有超链接标签，将它们的文本颜色设为red，通过把它们的不透明度缓慢调节到零的方式淡出视图；

（2）等待DOM
(document).ready()函数，在DOM加载就绪之后，但在媒体（图像）可用之前，才会执行jquery代码；

（3）使用jquery的css方法
addClass('myClass') :将制定的class添加到选中元素的class属性
hasClass('myClass')：如果选中的元素具有制定的class，返回true
removeClass('myClass') ：从选中元素的class属性中删除制定的class名
toggleClass('myClass') ：如果制定的class不存在，添加，否则删除
css('property','value')：将制定的属性和值添加到选中元素的style属性

（4）使用DOM
jQuery操作DOM，可以添加、删除和修改DOM元素，甚至可以把元素从DOM的一个部门移动到另一个部分；

常见的jQuery DOM方法：
before('new') after('new') 将new原素插入在选中元素之前，或之后
insertBefor() insertAfter() 相当于before和after，但新元素与选择器的的顺序是相反的，而且这些方法会返回新创建的元素
prepend('new') append('new') 在选中的元素内部插入new元素，最为第一个子节点，或最后一个
prependTo() appendTo() 相当于prepend和append，但new元素和选择器的顺序相反，返回新创建的元素
empty() 清空选中元素的所有子节点
remove() 从dom中移除选中元素
attr('name','value') 在选中元素上将name属性的值设置为value，如果不存在name属性，则创建它
removeAttr('name') 删除选中元素的name属性

常见的jQuery DOM导航方法
children() 获取选中元素的子节点
next() 获取紧随选中元素之后的同胞元素
prev() 获取紧邻选中元素的前一个同胞元素
parent() 返回选中元素的上一级父节点
sibilings() 返回选中元素的同胞节点

5、使用jQuery事件
jQuery库含有一个很好的时间处理系统，它支持所有底层JS事件；
$('form[action$="/DeleteSummit"]').submit(function () {
var summitName = $(':hidden', this).attr('value');
return confirm('are you sure you want to delte '+summitName+' ?');
});

6、使用jQuery视觉效果

jQuery视觉效果方法：
fadeIn() 通过增加不透明度逐渐显示选中元素（淡入）
fadeOut() 通过降低不透明度逐渐隐藏选中元素（淡出）
fadeTo() 将元素淡化到指定的不透明度
fadeToggle() 通过改变不透明度逐渐显示或隐藏元素
hide() 立即隐藏选中元素
show() 立即显示选中元素
slideDowm() 以下滑到页面的动画显示元素
slideToggle() 用滑动效果显示或隐藏元素
slideUp() 以上滑到页面的动画显示元素
toggle() 立即隐藏可见元素，立即显示隐藏元素

7、jQuery UI
引用
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />