本文实例讲述了jQuery子元素过滤选择器用法。分享给大家供大家参考,具体如下:
html health eta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/title/title script src=' http : js/jquery-1。10 .1 .量滴js ' type=' text/JavaScript '/script script src=' http : js/assist。js ' type=' text/JavaScript '/script link rel='样式表type=' text/CSS ' href=' CSS/style。CSS '/脚本类型=' text/JavaScript ' $(文档)。就绪(函数(){ //选取每个父元素下的第2个子元素$('#btn1 ').单击(function(){ $(' div。一个:岁的孩子.css(“”背景,' # bbffaa ');}) //选取每个父元素下的第一个子元素$('#btn2 ').单击(function(){ $(' div。一个:的第一个孩子' .css(“”背景,' # bbffaa ');}) //选取每个父元素下的最后一个子元素$('#btn3 ').单击(function(){ $(' div。一个:的最后一个孩子' .css(“”背景,' # bbffaa ');}) //如果父元素下的仅仅只有一个子元素,那么选中这个子元素$('#btn4 ').单击(function(){ $(' div。一个:的独生女’.css(“”背景,' # bbffaa ');})});/script/head dybutton id=' reset '手动重置页面元素/button输入类型=' checkbox ' id=' isreset ' checked=' checked '/标签为=' isreset '点击下列按钮时先自动重置页面/labelh3子元素过滤选择器/h3input type='button' value='选取每个班级为一个的差异父元素下的第2个子元素.'id=' BTN 1 '/输入类型='按钮'值='选取每个班级为一个的差异父元素下的第一个子元素.'id=' BTN 2 '/输入类型='按钮'值='选取每个班级为一个的差异父元素下的最后一个子元素.'id=' BTN 3 '/输入类型='按钮'值='如果班级为一个的差异父元素下的仅仅只有一个子元素,那么选中这个子元素.'id=' BTN 4 '/br/br/div class=' one ' id=' one ' id为一班为一个的div class='mini '类为mini/div/div class=' one ' id=' two ' title=' test ' id为二班为一,标题为试验的div .div class=' mini ' title=' other ' class为迷你,标题为其他/div class=' mini ' title=' test ' class为迷你,标题为test/div/div class=' one ' div class=' mini ' class为mini/div class=' mini '类为mini/div class=' mini '类为mini/div class=' mini '/div/div class=' one ' div class=' mini ' class为mini/div class=' mini '类为mini/div class=' mini '类为mini/div class=' mini ' title=' tesst ' class为迷你,标题为tesst/div/div style=' display : none;class='none '样式的显示为没有的div/divdiv class='hide'class为隐藏的div/divdiv包含投入的类型为"隐藏"的差异输入类型='隐藏'大小=' 8 '/div span id=' Mover '正在执行动画的跨度元素跨度/正文/html效果图如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题: 《jquery选择器用法总结》 、 《jQuery操作DOM节点方法总结》 、 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery表格(table)操作技巧汇总》 及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。