上一章开始了jQuery的安装,这一张需要开始学习选择器了,不然不进行选择,就无法使用jQuery提供的库的功能不是。
常用的,就列举这么多吧
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery选择器</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ //################ //全元素选择器 $("#hide").click(function(){ $("*").hide(); }); //################ //元素选择器 $("#hide").click(function(){ $("p").hide(); }); //################ //元素下的指定class选择器 $("#hide_class2").click(function(){ $("p.init").hide(); }); //################ //P标签下的第一个元素选择器 $("#hide_first").click(function(){ $("p:first").hide(); }); //################ //P标签下的最后一个元素选择器 $("#hide_last").click(function(){ $("p:last").hide(); }); //################ //id元素选择器 $("#hide_id").click(function(){ $("#test").hide(); }); //################ //class元素选择器 $("#hide_class").click(function(){ $(".test2").hide(); }); $("button").click(function(){ alert($(this).parent('div').attr("id")); }); $("button").click(function(){ alert($(this).parent('div').children('#val2').attr("href")); }); }); </script> </head> <body> <button id="hide">全元素选择器进行隐藏</button> <h2>这是一个标题</h2> <p>P元素-这是一个段落。</p> <p>P这是另一个段落。</p> <button id="hide">元素选择器,选择P元素,进行隐藏</button> <p class="init">P这是另一个段落。</p> <button id="hide_class2">元素下的指定class选择器,进行隐藏</button> <p></P> <button id="hide_first">P标签下的第一个元素,进行隐藏</button> <p></P> <button id="hide_last">P标签下的最后一个元素,进行隐藏</button> <p id="test">id元素-这是一个段落。</p> <button id="hide_id">id选择器,选择id为test的所有标签,进行隐藏(id不能为复数)</button> <p class="test2">class元素-这是一个段落。</p> <p class="test2">class元素元素-这是一个段落。</p> <p class="test2">class元素元素-这是一个段落。</p> <button id="hide_class">class选择器,选择class为test2的所有标签,进行隐藏(class可以为复数)</button> <h2>这是标题</h2> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <div id = "nihao" > <a href = "" id = "val" >111</a> <button>同级获取父节点</button> </div> <div id = "nihao2" > <a href = "www.baidu.com" id = "val2" >111</a> <button>获取兄弟节点</button> </div> </body> </html>
这里来讲一个同级td的获取,和父级td的获取;
<table> <tr> <td>111</td> <td>222</td> <td>333</td> <td>444</td> <td> <a href="" id="val2">1取值</a> <a href="" id="val">取值2</a> </td> </tr> </table>
获取方法:
$(document).ready(function(){ $("#val").click(function(){ //同节点的第一个 alert($(this).siblings(':first').text()); //父节点的同节点的第一个 alert($(this).parent().siblings(':first').text()); }); });
获取同级节点的第几个节点:
var question = $(my).parent().siblings().eq(2).text();