jQuery的选择器

最新推荐文章于 2024-01-14 11:54:30 发布

端木奇影

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量851

点赞数

分类专栏： jQuery 文章标签： jquery 选择器

本文链接：https://blog.csdn.net/qq_33756795/article/details/51308402

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML模块如下：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery1.12.3.js"></script>
		<script type="text/javascript" src="stromae.js"></script>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<div class="one" id="one">
		id为one，class为one的div
		<div class="mini">class为mini</div>
	</div>
	<div class="one" id="two" title="test">
		id为two，class为one，title为test的div
		<div class="mini" title="other">class为mini,title为other</div>
		<div class="mini" title="test">class为mini,title为test</div>
	</div>
	<div class="one">
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini"></div>
	</div>
	<div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini">class为mini</div>
		<div class="mini" title="tesst">class为mini,title为tesst</div>
	</div>
	<div style="display:none;" class="none">
		style的display为“none”的div
	</div>
	<div class="hide">class为hide的div</div>
	<div>
		<input type="hidden" size="8" />包含input的type为"hidden"的div
	</div>
	<button id="mover">正在执行动画的span元素</button>
	<div id='box'></div>
	<h1>基本过滤选择器</h1>
	</body>
</html>

CSS模块如下：

/*全局样式设置*/  
        body,h4,ul,li{  
            margin:0px;  
            padding:0px;  
            }  

/*具体设置*/
        div,span,p {
            width: 180px;
            height: 150px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 18px;
            font-family: verdana;
            word-break: break-all;
        }
        div.mini {
            overflow: auto;
            width: 55px;
            height: 55px;
            background-color: #AAAAAA;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }
#box {
    background: #98bf21;
    height: 100px;
    width: 100px;
    margin: 6px;
}

jQuer选择器：

$(function()
	//基本选择器：通过元素id、class和标签名来等来查找DOM元素。
	$('#one').css('background','red');	//改变id为one 的元素的背景色
	$('.mini').css('background','blue');	//改变class为mini 的所有元素的背景色
	$('div').css('background','green');	//改变元素名是<div>的所有元素的背景色
	$('*').css('background','yellowgreen');	//改变所欲元素的背景色
	$('span,#two').css('background',"red");	//改变所有<span>元素和id为two的元素的背景色
	//层次选择器：通过DOM元素之间的层次关系来获取特定元素
	$('body div').css('background','cornflowerblue');	//改变<body>内所有<div>的背景色
	$('body >div').css('background','darkgoldenrod');	//改变<body>内子元素<div>的背景色
	$('.one +div').css('background','cadetblue');   //改变class为one的下一个<div>同辈元素的背景色
	$('#two ~div').css('background','darkgreen');	//改变id为two的元素后面的所有<div>同辈元素的背景色
	<strong>//过滤选择器——基本过滤选择器：通过特定的过滤规则来筛选所需的DOM元素，其语法规则与CSS中的伪类选择器语法相同。</strong>
	$('div:first').css('background',"#0000A2");	//改变第一个<div>元素的背景色
	$('div:last').css('background','#316BA5');	//改变最后一个<div>元素的背景色
	$('div:not(.one)').css('background','#468847');	//改变class不为one的<div>元素的背景色
	$('div:even').css('background','#990000');	//改变索引值为偶数的<div>元素的背景色
	$('div:odd').css('background','brown');		//改变索引值为奇数的<div>元素的背景色
	$('div:eq(4)').css('background','goldenrod');	//改变索引值为4的<div>元素的背景色
	$('div:gt(4)').css('background','chartreuse');	//改变索引值大于4的<div>元素的背景色
	$('div:lt(4)').css('background','darkgreen');	//改变索引值小于4的<div>元素的背景色
	$(':header').css('background','yellowgreen');	//改变所有的标题元素，例如<h1>,<h2>,<h3>....这些元素的背景色
	$(':animated').css('color','red');		//改变当前正在执行动画的元素的背景色
	$(':focus').css('color','darkred');		//改变当前获取焦点的元素的背景色
	//内容过滤选择器：过滤规则主要体现在它所包含的子元素或文本内容上。
	$("div:contains('di')").css({'color':'red','background':'blue'});       //改变含有文本“di”的<div>元素的背景色和文本颜色
	$('div:empty').css('background','darkgoldenrod');			//改变不包含子元素（包括文本元素）的<div>空元素的背景色
	$('div:has(".mini")').css('background',"#000099");			//改变class为mini元素的<div>元素的背景色
	$('div:parent').css('background','green');
	//可见性过滤选择器：根据元素的可见和不可见状态来选择相应的元素
	$('div:visible').css({'background':'red','color':'blue'}); 	//改变所有可见的<div>元素的背景色
	$('div:hidden').show(5000);					//显示隐藏的<div>元素（show(5000)是显示元素，5000是指元素从隐藏到显示完成的时间，单位是毫秒）
	//属性过滤选择器：通过元素的属性来获取相应的元素
	$('div[title]').css('background','darkgreen');			//改变还有title属性的<div>元素的背景色
  $('div[title=test]').css('background','royalblue');		        //改变title值等于"test"的<div>元素的背景色
	$('div[title!=test]').css('background','red');			//改变title值不等于'test'的<div>元素的背景色
	$('div[title^="en"]').css('background','burlywood');	        //改变title值以'en'开始的<div>元素的背景色
	$('div[title$="en"]').css('background','red');			//改变title值以'en'结束的<div>元素的背景色
	$('div[class*=one]').css('background','greenyellow');		//改变class值为'one'的<div>元素的背景色
	$('div[title|="en"]').css('background','red');			//改变class值为'en'或以'en'为前缀的<div>元素的背景色（前缀是指类似于mi-ni这样的属性）
	$('div[title~=en]').css('background','red');			//改变属性class用空格分隔的值中包含'en'的<div>元素的背景色（类似于mi ni这样的属性）
	$('div[id][title^=t]').css('background','goldenrod');		//改变含有属性id且title值以t开头的<div>元素的背景色
	//子元素过滤选择器：根据元素之间的父辈与子辈的关系来获取相应的元素
	$('div.one :nth-child(1)').css('background','darkgoldenrod');	//改变每个class为one的<div>父元素下的第2个子元素的背景色			
	$('div.one :first-child').css('background','royalblue');	//改变每个class为one的<div>父元素下的第1个子元素的背景色
	$('div.one :last-child').css('background','darkgoldenrod');	//改变每个class为one的<div>父元素下的最后1个子元素的背景色
	$('div.one :only-child').css('background','mediumvioletred');	//如果class为one的<div>父元素下只有一个子元素，那么则改变这个子元素的背景色
});