jquery 的过滤和转移
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<script type="text/javascript">
$(function () {
//1、对选择集进行过滤
$("div").has("p").css({"color":"blue"});
$("div").eq(4).css({"fontSize":"30px"});
$("div").not(".go").css({"text-align":"center"});
$('div').filter('.go').css({"color":"red"});
//2、对选择器进行转移
$(".prev").prev().css({"text-weight":"border","color":"red"});
$(".prev").prevAll().css({"border":"1px solid black","line-height":"40px"});
$(".prev").next().css({"text-weight":"border","color":"gray"});
$(".prev").nextAll().css({"border":"1px solid yellow","line-height":"50px"});
$('div').siblings().css({"color":"red"});
})
</script>
</head>
<body>
<div class="go"><p>1</p></div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="prev">6</div>
<div>7</div>
<div><span class="span">8</span><span>9</span></div>
</body>
</html>
总结：综上代码所述，总结过滤和转移如下：
1、对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素
2、选择集转移
$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素