宝哥软件园

jQuery层次选择器用法示例

编辑:宝哥软件园 来源:互联网 时间:2021-09-07

本文实例讲述了jQuery层次选择器用法。分享给大家供大家参考,具体如下:

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8' /title2-5/title!-引入jQuery-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 ' $(文档)。就绪(函数(){ //选择身体内的所有差异元素$('#btn1 ').单击(function(){ $(“body div”).css(“”背景,' # bbffaa ');}) //在身体内的选择元素名是差异的子元素$('#btn2 ').单击(function(){ $(“body div”).css(“”背景,' # bbffaa ');}) //选择所有班级为一个的下一个差异元素$('#btn3 ').单击(函数(){ $(').一个div ').css(“”背景,' # bbffaa ');}) //选择编号为二的元素后面的所有差异兄弟元素$('#btn4 ').单击(function(){ $('#two ~ div ').css(“”背景,' # bbffaa ');})});/script/head dyh 3层次选择器/h3button id='reset '手动重置页面元素/button输入类型=' checkbox ' id=' isreset ' checked=' checked '/标签为=' isreset '点击下列按钮时先自动重置页面/标签br/br/输入类型='按钮'值='选择身体内的所有差异元素.'id=' BTN 1 '/输入类型='按钮'值='在身体内,选择子元素是差异的id=' BTN 2 '/输入类型='按钮'值='选择所有班级为一个的下一个差异元素.'id=' BTN 3 '/输入类型='按钮'值='选择编号为二的元素后面的所有差异兄弟元素.'id='btn4'/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程序设计有所帮助。

更多资讯
游戏推荐
更多+