JQuery实例教程.docVIP

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();