Python学习 Day39 jQuery框架常用方法07

最新推荐文章于 2021-04-09 18:03:59 发布

ShengXIABai

最新推荐文章于 2021-04-09 18:03:59 发布

阅读量106

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ShengXIABai/article/details/115529965

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

jQuery框架常用方法

一、addclass||removeclass

概述：它们两者是JQ函数库提供的，两者主要作用是可以给匹配节点添加或移除类名

样式部分

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				background: orangered;
			}
			.cur{
				background: salmon;
			}
		</style>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<button>点我~~添加类名</button>
		<button>点我~~移除类名</button>
		<button>JQ~~链式语法</button>
		<div class="box"></div>
	</body>

类名操作方法

//绑定事件
	$('button:eq(0)').click(function(){
		//给div添加类名
		$('div').addClass('cur');
	});
	$('button:eq(1)').click(function(){
		//给div移除类名
		$('div').removeClass('cur');
	});
	//链式语法：连续打点【从左到右】
	$('button:eq(2)').click(function(){
		$('div').css({'width':300}).html('水面清圆').addClass('hahaha');
	});

初始状态
在这里插入图片描述
点击添加类名按钮

点击删除类名按钮

点击链式语法按钮

二、index

概述：它是JQ函数库提供的常用方法，它的作用是可以获取到某一个匹配节点的索引值

<title></title>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<ul>
			<li>读书</li>
			<li>音乐</li>
			<li>游戏</li>
			<li class="cur">电影</li>
			<li>摄影</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	//index:获取匹配节点索引值
	console.log($('.cur').index());

在这里插入图片描述

三、each

概述：它也是JQuery函数库给我们提供的方法，它主要的作用是可以遍历全部匹配节点
回调函数中：有两个形参，分别是匹配到全部元素索引值、全部匹配到的节点

//each：主要的作用是遍历全部匹配节点
	$('li').each(function(index,element){
		//遍历每一个节点：设置样式
		$(element).css({'color':'red','border':'1px solid black','width':index * 100 +50});
	});

在这里插入图片描述

ShengXIABai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python学习 Day39 jQuery框架常用方法07

jQuery框架常用方法一、addclass||removeclass概述：它们两者是JQ函数库提供的，两者主要作用是可以给匹配节点添加或移除类名样式部分<style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: orangered; } .cur{ background:
复制链接

扫一扫