jQuery效果演示

拼搏现实的明天。 2023-10-05 23:33 18阅读 0赞

#### 文章目录 ####

*  jQuery选择器
 *   *  例题
     *  效果一
     *  效果二
     *  效果三
     *  效果四
     *  效果五
     *  效果六
     *  效果七
     *  效果八
     *  效果九
     *  效果十
     *  效果十一
     *  效果十二
     *  效果十三
     *  效果十四
     *  效果十五
     *  效果十六
     *  效果十七
     *  效果十八
     *  效果十九
     *  效果二十
     *  效果二十一
     *  效果二十二

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

## jQuery选择器 ##

原始网页代码：

<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 class="one">
    			<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="one">style的display为none的div</div>
    		<div class="hide">class为hide的div</div>
    		<div>包含input的type为hidden的div<input type="hidden" size="8" /></div>
    		<span id="mover" animated>正在执行动画的span元素</span>
    		<input id='txtContent' class='txt' type='text' value='zhangsan' />
    		<input type='hidden' id='d' name='id' />
    		<input type='button' id='click' value='点击我' />
    	</body>

页面显示：  
![在这里插入图片描述][68bb368cb6b44518a0d14380268881e7.png]

### 例题 ###

页面初始状态如下图所示，请使用jQuery的选择器完成以下任务，并将代码和截图在“解决方案”后面

改变`<body>`内所有`<div>` 的背景色：

$('body div').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][e570a5f22e654ecd9bad86e27a8ea652.png]

### 效果一 ###

1、改变元素为 `div` 的所有元素的背景色  
代码：

$('body div').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][b9de54864a664d4887e68af830e27956.png]

### 效果二 ###

改变`<body>`内子`<div>`元素的背景色

代码：

$('body div div').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][bae1355614b44e038db0b496297e8b40.png]

### 效果三 ###

改变所有元素的背景色  
代码：

$('div').add('span').add('input').add('body').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][47c25bcf8e85499a89475af1fa888460.png]

### 效果四 ###

改变 id 为 one 的元素的背景色  
代码：

$('.one').css('background','#bbffaa');

效果显示：![在这里插入图片描述][acde3b4d9a614c19ba9563d50ce691f2.png]

### 效果五 ###

改变 class 为 one 的下一个`<div>`元素的背景色

代码：

$('.one div').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][a6792876cb264224b273e4dfa9e06495.png]

### 效果六 ###

改变 class 为 mini 的所有元素的背景色

代码：

$('.mini').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][910505061274445ba063ff498ce72765.png]

### 效果七 ###

改变id为two的元素后面的所有`<div>`兄弟元素的背景色  
代码：

$('#two').siblings("div").css('background', '#bbffaa');

效果显示：  
![在这里插入图片描述][68fe09750e9145ee97cd2e38ebf24dcf.png]

### 效果八 ###

改变第一个`<div>`元素的背景色  
代码：

$('div#one').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][7d110635d1a2462b9f79fa330f8a05bb.png]

### 效果九 ###

改变所有`<span>`元素和id为two的元素的背景色  
代码：

$('span').add('#two').css('background','#bbffaa');

效果显示：![在这里插入图片描述][07aa77c2dfa046378c727376d92c2d93.png]

### 效果十 ###

显示隐藏的`<div>`元素  
代码：

$('div').show();

效果显示：  
![在这里插入图片描述][ad8acb1c4e70402b91e58e28e2787d65.png]

### 效果十一 ###

改变当前正在执行动画的元素的背景色  
代码：

$("#mover").animate({
         width: "90%", height: "90%"}, 1000 );

效果显示：  
![在这里插入图片描述][16d31b5aa3f1457fa1b90bb8ecdaec35.png]

### 效果十二 ###

改变含有文本di的`<div>`元素的背景色  
代码：

$("div:contains('di')").css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][b5858341298c4061b9ed7e8389ad63af.png]

### 效果十三 ###

改变所有可见`<div>`元素的背景色  
代码：

$("div").css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][0534c9bdef5b494b833f0f32a1543d4a.png]

### 效果十四 ###

改变最后一个`<div>`元素的背景色  
代码：

$("div:last").css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][37ec92e71ed943ad93956ce8677505f6.png]

### 效果十五 ###

改变索引值小于3的`<div>`元素的背景色  
代码：

for(var i=0;i<3;i++){
        
    	$("div").eq(i).css('background','#bbffaa');
    }

效果显示：  
![在这里插入图片描述][78256149c93840759cfd422a9aaaf90c.png]

### 效果十六 ###

改变索引值为偶数的`<div>`元素的背景色  
代码：

var a = $('div').length;
    for(var i=0;i<a;i++){
        
    	if(i%2==0){
        
    		$("div").eq(i).css('background','#bbffaa');
    	}
    }

效果显示：  
![在这里插入图片描述][5056e10fa5f34d90b52c59a51f73e21f.png]

### 效果十七 ###

改变所有标题元素的背景色  
代码：

$(':header').css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][daae4f4ce52544d89f38cfe49a9e1e79.png]

### 效果十八 ###

改变不包含子元素（包括文本元素）的`<div>`元素的背景色  
代码：

var a = $('div').length;
    	for(var i=0;i<a;i++){
        
    		if(!$('div').eq(i).html()){
        
    		$("div").eq(i).css('background','#bbffaa');
    	}
    }

效果显示：

![在这里插入图片描述][6727ca415f7544d48cac9c135d5038d9.png]

### 效果十九 ###

改变class不为one的`<div>`元素的背景色  
代码：

var a = $('div').length;
    	for(var i=0;i<a;i++){
        
    		if(!$("div").eq(i).hasClass("one")){
        
    		$("div").eq(i).css('background','#bbffaa');
    	}
    }

效果显示：  
![在这里插入图片描述][8186e2ca51944ac18af388b21b194ed7.png]

### 效果二十 ###

改变索引值等于2的`<div>`元素的背景色  
代码：

$("div").eq(2).css('background','#bbffaa');

效果显示：  
![在这里插入图片描述][3abab8f696554b839022fd9079b4f668.png]

### 效果二十一 ###

改变含有class为mini元素的`<div>`元素的背景色  
代码：

var a = $('div').length;
    	for(var i=0;i<a;i++){
        
    		if(!$("div").eq(i).children(".mini").length==0){
        
    		$("div").eq(i).css('background','#bbffaa');
    	}
    }

效果显示：  
![在这里插入图片描述][90ccb9481e664be39c91db68eb9ab188.png]

### 效果二十二 ###

改变含有子元素（包括文本元素）的`<div>`元素的背景色  
代码：

var a = $('div').length;
    	for(var i=0;i<a;i++){
        
    		if($('div').eq(i).html()){
        
    		$("div").eq(i).css('background','#bbffaa');
    	}
    }

效果显示：  
![在这里插入图片描述][bee38c122d684f788311cb711f26e88e.png]

[68bb368cb6b44518a0d14380268881e7.png]: https://img-blog.csdnimg.cn/68bb368cb6b44518a0d14380268881e7.png
[e570a5f22e654ecd9bad86e27a8ea652.png]: https://img-blog.csdnimg.cn/e570a5f22e654ecd9bad86e27a8ea652.png
[b9de54864a664d4887e68af830e27956.png]: https://img-blog.csdnimg.cn/b9de54864a664d4887e68af830e27956.png
[bae1355614b44e038db0b496297e8b40.png]: https://img-blog.csdnimg.cn/bae1355614b44e038db0b496297e8b40.png
[47c25bcf8e85499a89475af1fa888460.png]: https://img-blog.csdnimg.cn/47c25bcf8e85499a89475af1fa888460.png
[acde3b4d9a614c19ba9563d50ce691f2.png]: https://img-blog.csdnimg.cn/acde3b4d9a614c19ba9563d50ce691f2.png
[a6792876cb264224b273e4dfa9e06495.png]: https://img-blog.csdnimg.cn/a6792876cb264224b273e4dfa9e06495.png
[910505061274445ba063ff498ce72765.png]: https://img-blog.csdnimg.cn/910505061274445ba063ff498ce72765.png
[68fe09750e9145ee97cd2e38ebf24dcf.png]: https://img-blog.csdnimg.cn/68fe09750e9145ee97cd2e38ebf24dcf.png
[7d110635d1a2462b9f79fa330f8a05bb.png]: https://img-blog.csdnimg.cn/7d110635d1a2462b9f79fa330f8a05bb.png
[07aa77c2dfa046378c727376d92c2d93.png]: https://img-blog.csdnimg.cn/07aa77c2dfa046378c727376d92c2d93.png
[ad8acb1c4e70402b91e58e28e2787d65.png]: https://img-blog.csdnimg.cn/ad8acb1c4e70402b91e58e28e2787d65.png
[16d31b5aa3f1457fa1b90bb8ecdaec35.png]: https://img-blog.csdnimg.cn/16d31b5aa3f1457fa1b90bb8ecdaec35.png
[b5858341298c4061b9ed7e8389ad63af.png]: https://img-blog.csdnimg.cn/b5858341298c4061b9ed7e8389ad63af.png
[0534c9bdef5b494b833f0f32a1543d4a.png]: https://img-blog.csdnimg.cn/0534c9bdef5b494b833f0f32a1543d4a.png
[37ec92e71ed943ad93956ce8677505f6.png]: https://img-blog.csdnimg.cn/37ec92e71ed943ad93956ce8677505f6.png
[78256149c93840759cfd422a9aaaf90c.png]: https://img-blog.csdnimg.cn/78256149c93840759cfd422a9aaaf90c.png
[5056e10fa5f34d90b52c59a51f73e21f.png]: https://img-blog.csdnimg.cn/5056e10fa5f34d90b52c59a51f73e21f.png
[daae4f4ce52544d89f38cfe49a9e1e79.png]: https://img-blog.csdnimg.cn/daae4f4ce52544d89f38cfe49a9e1e79.png
[6727ca415f7544d48cac9c135d5038d9.png]: https://img-blog.csdnimg.cn/6727ca415f7544d48cac9c135d5038d9.png
[8186e2ca51944ac18af388b21b194ed7.png]: https://img-blog.csdnimg.cn/8186e2ca51944ac18af388b21b194ed7.png
[3abab8f696554b839022fd9079b4f668.png]: https://img-blog.csdnimg.cn/3abab8f696554b839022fd9079b4f668.png
[90ccb9481e664be39c91db68eb9ab188.png]: https://img-blog.csdnimg.cn/90ccb9481e664be39c91db68eb9ab188.png
[bee38c122d684f788311cb711f26e88e.png]: https://img-blog.csdnimg.cn/bee38c122d684f788311cb711f26e88e.png