jQuery （一）选择器-优快云博客

本文介绍了jQuery中各种常用的选择器，包括全元素、特定元素、指定class、第一个元素、最后一个元素、id及class选择器等，并通过实例展示了如何使用这些选择器来操作DOM元素。

上一章开始了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();

转载于:https://www.cnblogs.com/sunxun/p/8830125.html