• 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    页面显示：
    在这里插入图片描述

    例题

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

    改变内所有

    的背景色：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果一

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

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

    • 1

    效果显示：
    在这里插入图片描述

    效果二

    改变内子

    元素的背景色

    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果三

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

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

    • 1

    效果显示：
    在这里插入图片描述

    效果四

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

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

    • 1

    效果显示：在这里插入图片描述

    效果五

    改变 class 为 one 的下一个

    元素的背景色

    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果六

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

    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果七

    改变id为two的元素后面的所有

    兄弟元素的背景色
    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果八

    改变第一个

    元素的背景色
    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果九

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

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

    • 1

    效果显示：在这里插入图片描述

    效果十

    显示隐藏的

    元素
    代码：

    $('div').show();

    • 1

    效果显示：
    在这里插入图片描述

    效果十一

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

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

    • 1

    效果显示：
    在这里插入图片描述

    效果十二

    改变含有文本di的

    元素的背景色
    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果十三

    改变所有可见

    元素的背景色
    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果十四

    改变最后一个

    元素的背景色
    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果十五

    改变索引值小于3的

    元素的背景色
    代码：

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

    • 1
    • 2
    • 3

    效果显示：
    在这里插入图片描述

    效果十六

    改变索引值为偶数的

    元素的背景色
    代码：

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    效果显示：
    在这里插入图片描述

    效果十七

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

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

    • 1

    效果显示：
    在这里插入图片描述

    效果十八

    改变不包含子元素（包括文本元素）的

    元素的背景色
    代码：

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    效果显示：

    在这里插入图片描述

    效果十九

    改变class不为one的

    元素的背景色
    代码：

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    效果显示：
    在这里插入图片描述

    效果二十

    改变索引值等于2的

    元素的背景色
    代码：

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

    • 1

    效果显示：
    在这里插入图片描述

    效果二十一

    改变含有class为mini元素的

    元素的背景色
    代码：

    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');
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    效果显示：
    在这里插入图片描述

    效果二十二

    改变含有子元素（包括文本元素）的

    元素的背景色
    代码：

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    效果显示：
    在这里插入图片描述

  • 相关阅读:
    Python实现猎人猎物优化算法(HPO)优化LightGBM回归模型(LGBMRegressor算法)项目实战
    传输层—TCP原理详解
    R语言使用rpart包拟合随机森林回归模型：使用predict函数和训练好的模型进行预测推理、使用plot函数可视化线图对比预测值和实际值曲线
    【电商】跨境电商「保税」业务（附支付宝、微信对接指南）
    【代码源每日一题Div1】平方计数「nlogn巧妙枚举倍数优化」
    DiffusionDet: Diffusion Model for Object Detection
    STM8应用笔记8.UART应用1
    【通信原理】第三章 随机过程——例题
    c++ vscode cmake debug for mac
    布隆过滤器（Bloom Filter）初学习
  • 原文地址：https://blog.csdn.net/rej177/article/details/126786881