＜jQuery-常用方法-1＞

最新推荐文章于 2022-07-20 17:12:55 发布

好先生·

最新推荐文章于 2022-07-20 17:12:55 发布

阅读量73

点赞数

分类专栏： JavaScipt基础 jQuery基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45540964/article/details/110913300

版权

JavaScipt基础同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

jQuery基础

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		div {
			height: 80px;
			border-right: 5px solid red;
		}
		div:first-child {
			border-right: 5px solid gold;
		}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<script src="./jquery-1.12.3/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
		/*工作中常将jQuery获取的元素存储在一个变量中,
		让$方法执行一次,后面就就可以使用多次*/
		var divs=$('div');
		//size()方法获取元素的个数
		console.log(divs.length);//也具有length的属性
		console.log(divs.size());//4个div

		//设置单个样式属性
		divs.css('font-size', '50px');
		divs.css('borderBottom', '1px solid green');
		//设置多个样式属性
		divs.css({
			backgroundColor: 'pink',
			//像素单位可以省略
			width: 400
		});

		//获取样式
		//获取的是第一个元素的样式
		console.log(divs.css('border-right'));
		console.log(divs.css('borderRight'));

		//如果需要运算必须转换
		console.log(parseInt(divs.css('height'))+30);

		//绑定事件
		//会给每一个都绑定
		divs.on('click',function() {
			//this指向当前对象
			console.log(this);
			this.style.backgroundColor='';
		});

		//绑定事件简写
		divs.click(function() {
			//与on方法一样对所有事件进行绑定
			console.log(this);
		});//与上面的绑定的事件会产生并集
	</script>
</body>
</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜jQuery-常用方法-1＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div { height: 80.
复制链接

扫一扫