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
    评论
HTMLCSS是前端开发中最基础和常用的技术,而jQuery则是一种流行的JavaScript库,用于构建交互式的网页应用程序。下面是一个关于如何使用HTMLCSSjQuery构建一个基本的首页的解释。 首先,我们需要使用HTML来创建页面的结构。可以通过创建一个主要的包含所有内容的div元素,并在其中添加其他div元素来划分不同的部分,如导航栏、头部、内容和页脚。可以使用HTML元素和属性来定义文本、图像和链接等内容,并使用CSS样式来设计页面的外观。 接下来,使用CSS来设置页面的样式。可以通过使用选择器来选择特定的HTML元素,然后应用各种属性来定义样式,例如字体、颜色、边框和背景。还可以使用CSS的布局属性来排列和定位各个元素,以创建所需的页面布局。 在页面的交互方面,可以使用jQuery来实现。可以通过在页面加载完成后,使用jQuery选择器选择特定的元素,并添加事件处理程序来响应用户的交互操作,例如点击、鼠标悬停或键盘输入等。使用jQuery方法和函数可以轻松地操作HTML元素的内容、样式和属性,并实现一些特殊效果,如动画和淡入淡出。 总之,通过使用HTMLCSSjQuery,我们可以构建出一个具有良好结构、美观外观和交互性的首页。而且,HTMLCSS的语法和规范相对简单易学,而jQuery的丰富功能和文档资源也使得开发过程更加高效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值