jq基础3——样式

叁歲伎倆 2022-10-01 06:58 178阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jquery</title>
    </head>
    <body>
    	<script src="jquery.min.js"></script>
    	<script type="text/javascript">
    		$(function(){ 
    			$("#b1").click(function(){ 
    				$("#div1").addClass("pink");//增加
    			});
    			$("#b2").click(function(){ 
    				$("#div1").removeClass("pink");//删除
    			});
    			$("#b3").click(function(){ 
    				$("#div1").toggleClass("pink");//切换
    			});
    
    			$("#b4").click(function(){ 
    				$("#div1").css("background-color","pink");//设置单一样式
    			});
    			$("#b5").click(function(){ 
    				$("#div1").css({ "background-color":"pink","color":"red"});//设置多种样式
    			});
    		});
    	</script>
    	<style type="text/css">
    		.pink{ 
    			background-color: pink;
    		}
    	</style>
    	<div id="div1">hello jquery</div><br>
    	<button id="b1">增加背景色</button>
    	<button id="b2">删除背景色</button>
    	<button id="b3">切换背景色</button>
    	<br>
    	<button id="b4">设置单一样式</button>
    	<button id="b5">设置多种样式</button>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq指定的所有class添加样式

css代码： .className{ color: red; } jq代码: $(".class").addClass("classNa

秒速五厘米/ 2022年10月29日 03:14/ 0 赞/ 170 阅读

相关 jq基础3——样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

叁歲伎倆/ 2022年10月01日 06:58/ 0 赞/ 179 阅读

相关 JQ基础事件

最近终于学到了事件，也是最常用到的地方，李炎恢老师详细的介绍了各种方法，我也是把李炎恢老师所讲的总结一下学过JS肯定知道DOM2级的绑定事件方法addEventListen

旧城等待，/ 2022年08月01日 12:24/ 0 赞/ 206 阅读

相关 JQ实现效果：焦点选中样式

1、伪类：focus <!DOCTYPE html> <html> <head> <title>Char 5</title> <m

朴灿烈づ我的快乐病毒、/ 2022年06月12日 06:45/ 0 赞/ 216 阅读

相关 ajax基础——jq

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

短命女/ 2022年01月15日 14:05/ 0 赞/ 301 阅读

相关 json基础——jq

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

系统管理员/ 2022年01月15日 12:51/ 0 赞/ 227 阅读

相关 jq基础8——事件

<table> 事件 <thead> <tr> <th>事件</th> <th>简介</th> <th>实例</th> </tr>

红太狼/ 2022年01月15日 04:27/ 0 赞/ 296 阅读

相关 jq 1.3

2009-1-14,jQuery 1.3发布正式版,尽管之前版本的jQ已经让我们感受到了诸多便利，但是1.3还是给了我们额外的惊喜。大家可以参考jQuery对于这个版本发布

柔情只为你懂/ 2021年12月23日 02:09/ 0 赞/ 185 阅读

相关 jq 操作元素样式

返回css样式内容对象数组.css("样式名") function t2() { var showdiv=

短命女/ 2021年07月24日 14:35/ 0 赞/ 442 阅读

相关 jq swiper(各种轮播图样式)

具体样式教程查看地址[swiper][] 各种样式引用地址[各种样式][Link 1] 引入swiper.min.css文件 swiper.jqu

客官°小女子只卖身不卖艺/ 2021年07月24日 12:32/ 0 赞/ 669 阅读