jQuery选择器分类,总结

来源：互联网发布：淘宝好评返现模板编辑：程序博客网时间：2024/06/15 00:21

（1）基本选择器
   1,根据id匹配元素
   2,根据给定的类名匹配元素
   3,根据给定的元素名匹配元素
   4,*匹配所有的元素
   5,集合元素,将每个选择器匹配到的元素合并后一起返回
<script>
  /*jquery基本选择器*/
  $(document).ready(function(){
   //1,根据id匹配元素
   var $p = $("#para");
   $p.click(function(){
    alert("this is paragraph");
   });
   //2,根据类名匹配元素
   var $span = $(".span");
   $span.css("font-size","35px");
   //3,根据给定的元素名匹配元素
   var $div = $("div");
   $div.css("background","blue");
   //4,集合元素(将选择器匹配到的所有元素合并返回)
   var $jihe = $("p,span,div");
   $jihe.click(function(){
    alert("这是集合");
   });
  });
</script>
<body>

<p id="para">这是一个p元素</p>
<span class="span">这是span元素</span>
<div>这是一个div</div>
<ul>
  <li>橘子</li>
  <li>苹果</li>
  <li>梨</li>
</ul>

</body>
（2）层次选择器
1,后代元素选择器
2,子元素选择器
3,相邻元素(紧接在前一个元素之后的选择器)
4,兄弟元素选择器
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
//后代元素选择器
//css（）方法设置多种样式 json 方法
$("#div1 ul li").css({"color":"blue","fontSize":"30px"});
//子元素选择器（只包括儿子元素）
$("#div2>span").css("background","green");
//相邻元素选择器（紧接着前一个元素的后面元素）
$("#div1 ul + div").css({"background":"red","fontSize":"35px"});
//兄弟选择器
$("span~.div").css({"background":"pink","fontSize":"50px"});

});
</script>
</head>

<body>
<div id="div1">
<ul>
<li>这是第一个li</li>
<li>这是第二个li</li>
</ul>
<div id="div2">
<span>这是第一个span</span>
<div class="div">这是第一个div</div>
</div>
</div>
</body>
（3）基本过滤选择器
   1,所有div元素中，第一个div
   2,所有div元素中,最后一个div
   3,获取索引是偶数的所有元素,索引从0开始
   4,获取索引是奇数的所有元素，索引从0开始
   5,获取索引等于index的所有元素
   6,索引大于小于 gt() lt()
   7,获取网页中所有的h标签内容
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
     /*过滤选择器*/
$(document).ready(function(){
//1,匹配所有div元素中,第一个div
$("div:first").click(function(){alert('这是first个div')});
//2,匹配所有div元素中，最后一个div
$("div:last").click(function(){alert('这是last个div')});
//3,匹配索引是偶数的div,索引是从0开始
    $("div:even").click(function(){alert('这是偶数（even）个div')});
//4,匹配索引是偶数的div,索引是从0开始
$("div:odd").click(function(){alert('这是奇数（odd）个div')});
//5,匹配索引等于0的div,索引是从0开始
    $("div:eq(0)").click(function(){alert('这是一个索引等于0 的div')});
//6,匹配索引大于1数的div,索引是从0开始
$("div:gt(1)").click(function(){alert('这是一个索引大于1 的div')});
    //7,匹配网页中所有的h标签
$(":header").css({"color":"blue","background":"green"});
    //8,匹配网页中正在执行动画效果的元素
$(":animated")
});
</script>
</head>

<body>
      <h1>这是h1标签</h1>
   <h2>这是h2标签</h2>
   <div>这是一个div</div>
   <div>这是二个div</div>
   <div>这是三个div</div>
</body>
（4）内容过滤选择器
     1,选取含有文本内容为text的元素
     2,选取含有某元素的元素
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*内容过滤选择器*/
$(document).ready(function(){
//1,选取含有文本内容为标签的元素
     $("span:contains('标签')").css("background","pink");
//2,匹配含有P元素的元素
     $("div:has(b)").css("color","red");
});
</script>
</head>

<body>
<span>我是span标签</span>
<div><b>这里是P标签</b></div>
</body>

（5）可见性过滤选择器
1,选取所有可见的元素
2,选取所有不可见的元素
<style>
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*可见性过滤选择器*/
$(document).ready(function(){
$("div:visible").css({"fontSize":"30px","background":"pink"});
$("div:hidden").show(1000);
});
</script>
</head>

<body>
      <div class="show">这是现实的div</div>
      <div class="hide">这是隐藏的div</div>
</body>
（6）属性过滤选择器
    1,选取拥有此属性的选择器
    2,选取属性值为value的元素
<style>
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("div[class]").css({"color":"red","background":"yellow"});
$("div[class=hide]").show(1000);
});
</script>
</head>

<body>
<div class="show">这是现实的div</div>
<div class="hide">这是隐藏的div</div>
</body>