jQuery层级选择器实例代码
本文实例为大家分享了jQuery层级选择器的具体代码,供大家参考,具体内容如下
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-type"content="text/html;charset=utf-8"/> <title></title> <linkrel="stylesheet"href="imooc.css"type="text/css"> <scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>子选择器与后代选择器</h2> <divclass="left"> <divclass="aaron"> <p>div下的第一个p元素</p> </div> <divclass="aaron"> <p>div下的第一个p元素</p> </div> </div> <divclass="right"> <divclass="imooc"> <article> <p>div下的article下的p元素</p> </article> </div> <divclass="imooc"> <article> <p>div下的article下的p元素</p> </article> </div> </div> <scripttype="text/javascript"> //子选择器 //$('div>p')选择所有div元素里面的子元素P $('div>p').css("border","5pxgroovered"); </script> <scripttype="text/javascript"> //后代选择器 //$('divp')选择所有div元素里面的p元素 $('divp').css("border","9pxgroovegreen"); </script> <h2>相邻兄弟选择器与一般兄弟选择器</h2> <divclass="bottom"> <div>兄弟节点div,+~选择器不能向前选择</div> <spanclass="prev">选择器span元素</span> <div>span后第一个兄弟节点div</div> <div>兄弟节点div <divclass="small">子元素div</div> </div> <span>兄弟节点span,不可选</span> <div>兄弟节点div</div> </div> <scripttype="text/javascript"> //相邻兄弟选择器 //选取prev后面的第一个的div兄弟节点 $(".prev+div").css("border","3pxgrooveblue"); </script> <scripttype="text/javascript"> //一般相邻选择器 //选取prev后面的所有的div兄弟节点 $(".prev~div").css("border","3pxgrooveblue"); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。