JQuery实例教程.doc
文本预览下载声明
jQuery使用
一、选择器 基本
1、#id
根据给定的ID 匹配一个元素 实例:
lt;p id=”testID”gt;testIDlt;/pgt; $(“#testID”).html();
2、Element
根据给定的元素名匹配所有元素 实例：
lt;divgt;div1lt;/divgt;
lt;divgt;div2lt;/divgt;
$(“div”);
3、.class
根据给定的类属性匹配一个元素 实例：
lt;div class=”testClass”gt;testClasslt;/divgt; $(“.testClass”);
层级关系
1、ancestor descendant 在给定的祖先元素下匹配所有的后代元素 实例：
lt;formgt;
lt;labelgt;Name:lt;/labelgt;
lt;input name=quot;namequot; /gt;
lt;fieldsetgt;
lt;labelgt;Newsletter:lt;/labelgt;
lt;input name=quot;newsletterquot; /gt;
lt;/fieldsetgt;
lt;/formgt;
lt;input name=quot;nonequot; /gt;
$(quot;form inputquot;)
结果：
[ lt;input name=quot;namequot; /gt;, lt;input name=quot;newsletterquot; /gt; ]
2、parent gt; child
在给定的父元素下匹配所有的子元素（注意与后代元素的区别） 实例：
lt;formgt;
lt;labelgt;name:lt;/labelgt;
lt;input name=”name”/gt; lt;fieldsetgt; lt;labelgt;newsletter:lt;/labelgt; lt;input name=”newsletter”/gt; lt;/fieldsetgt;
lt;/formgt;
lt;input name=”none”/gt;
Jquery代码：
$(“form gt; input”);
结果：
[lt;input name=”name” /gt;]
3、prev + next
匹配紧跟在prev元素后的next元素
实例：
lt;formgt;
lt;labelgt;name:lt;/labelgt; lt;input name=”name”/gt; lt;fieldsetgt; lt;labelgt;newsletter:lt;/labelgt; lt;input name=”newsletter”/gt;
lt;/fieldsetgt;
lt;/formgt;
lt;input name=”none”/gt;
Jquery代码：
$(“label gt; input”);
结果：
[lt;input name=”name” /gt;，lt;input name=”newsletter”/gt;]
4、prev ~siblings
匹配prev元素后的所有的siblings元素
实例：
lt;formgt;
lt;labelgt;name:lt;/labelgt;
lt;input name=”name”/gt; lt;fieldsetgt; lt;labelgt;newsletter:lt;/labelgt; lt;input name=”newsletter”/gt; lt;/fieldsetgt;
lt;/formgt;
lt;input name=”none”/gt;
Jquery代码：
$(“form ~ input”);
结果：
[lt;input name=”none”/gt;]
基本
1、first() :first
获取匹配得第一个元素
实例：
lt;ulgt;
lt;ligt;list item1lt;/ligt;
lt;ligt;list item2lt;/ligt;
lt;ligt;list item3lt;/ligt;
lt;/ulgt;
Jquery代码：
$(“li”).first();
或者
$(“li:first”);
结果：
[lt;ligt;list item1lt;/ligt;]
2、last() :last
获取匹配的最后一个元素
实例：
lt;ulgt;
lt;ligt;list item1lt;/ligt;
lt;ligt;list item2lt;/ligt; lt;ligt;list item3lt;/ligt;
lt;/ulgt;
Jquery代码：
$(“li”).last();
显示全部