HTML——jQuery—css样式+html&css方法

目录

  1. css样式
  2. html&css方法

 

  1. css样式


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/jquery-3.4.1.min.js" ></script>
    	</head>
    	<body>
    		
    		<div>hello nice to meet you </div>
    		
    		<script>
    			
    			/**设置样式
    				设置一个样式
    			 * $(选择器).css(样式名, 样式值)
    			 * 
    			 * 设置多个样式
    			 * $(选择器).css({key:value, key:value....})
    			 */
    			//$("div").css("color", "plum")
    			$("div").css({
    				"background-color":"#3c5c5d",
    				"border":"2px solid blue",
    				"color":"white"
    			})
    			
    			/**
    			 * 获取样式
    			 * $(选择器).css(样式名)
    			 */
    			console.log($("div").css("color"))
    			
    		</script>
    		
    	</body>
    </html>
    

     

  2. html&css方法


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/jquery-3.4.1.min.js"></script>
    	</head>
    	<body>
    		<!-- <div>1</div>
    		<div class="x">2</div>
    		<div>3</div>
    		<div class="x">4</div> -->
    		
    		
    		<button>全选</button>
    		<button>全不选</button>
    		
    		
    		<p>
    			<span>爱好是:</span>
    			<input type="checkbox"><span>打篮球</span>
    			<input type="checkbox"><span>踢足球</span>
    			<input type="checkbox"><span>沙滩球</span>
    			<input type="checkbox"><span>棒球</span>
    		</p>
    		
    		<script>
    			
    			//$("div").remove()
    			// $("div").remove(".x")
    			
    			// 全选
    			$("button").eq(0).click(function(){
    				/**
    				 * attr是添加属性 和 移除属性来完成全选和全不选的
    				 */
    				 //$("input").attr("checked", "checked")
    				 // prop这个操作属性时 对于判定性的属性 是通过true和false来完成操作的
    				 $("input").prop("checked", true)
    			})
    			$("button").eq(1).click(function(){
    				 //$("input").removeAttr("checked")
    				  $("input").prop("checked", false)
    			})
    			
    		</script>
    	</body>
    </html>
    

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值