Python学习 Day38 jQuery常用方法03

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

ShengXIABai

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

阅读量97

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

jQuery常用方法

一、css方法

概述：CSS这个方法是JQ框架给我们提供的，它主要的作用是可以设置匹配节点行内样式

CSS方法是JQ框架提供的，给匹配节点添加行内样式
JQ支持链式语法：从左到右

样式部分

<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<div>晴空一鹤排云上，便引诗情到碧霄</div>
		<div>晴空一鹤排云上，便引诗情到碧霄</div>
		<div>晴空一鹤排云上，便引诗情到碧霄</div>
		<div>晴空一鹤排云上，便引诗情到碧霄</div>
	</body>

第一种写法（不常用）

$('div').css('color','royalblue');

参数说明：

第一个参数：匹配节点样式名字
第二个参数：匹配节点添加样式的属性值
注意：当前这种写法不常用，因为只能给元素设置一个样式

第二种写法（推荐）

$('div').css({
		color:'red',
		background:'cyan',
		fontSize:30,
		opacity:.3
	});

以后再给匹配的节点添加样式，传递JSON数据格式即可【可以连续设置多个样式】
而且属性值可以省略px单位，中间带横杠的样式变为驼峰写法

在这里插入图片描述

二、attr方法

概述：attr方法是JQ框架提供的，主要作用是可以获取或设置节点的属性

样式部分

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 300px;
				height: 300px;
			}
		</style>
		<!--引包-->
		<script type="text/javascript" src="js/jQuery.min.js"></script>
	</head>
	<body>
		<input type="text" />
		<input type="radio" />
		<input type="checkbox" />
		<img src="img/3.jpg" />
	</body>

attr方法

//获取节点属性值
	console.log($('input:eq(1)').attr('type'));
	//动态设置节点属性值
	$('input:eq(1)').attr('type','text');
	//获取节点属性值
	console.log($('img').attr('src'));
	//修改节点属性值
	$('img').attr('scr','img/2.jpg');

在这里插入图片描述

三、操作节点文本的方法

概述：原生DOM操作的时候，操作节点文本分为两种情况：

（1）操作非表单元素———使用的是innerHTML属性
（2）操作表单元素———使用的是value属性

JQ框架也给我们提供了一些操作文本的方法，也分为两种情况：

（1）操作非表单元素的文本———使用html方法
（2）操作表单元素文本———使用val方法

样式部分

<input value="请输入密码" />
		<div>晴空一鹤排云上</div>

操作节点文本

//JQ提供的val方法：可以用来获取||设置表单元素文本
	//获取表单元素文本
	console.log($('input').val());
	//修改表单元素的文本
	$('input').val('水面清圆，一一风荷举');
	//JQ提供html方法：可以用来获取||设置非表单元素文本
	console.log($('div').html());
	//重新设置
	$('div').html('便引诗情到碧霄');

在这里插入图片描述

ShengXIABai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python学习 Day38 jQuery常用方法03

jQuery常用方法一、css方法概述：CSS这个方法是JQ框架给我们提供的，它主要的作用是可以设置匹配节点行内样式CSS方法是JQ框架提供的，给匹配节点添加行内样式JQ支持链式语法：从左到右样式部分<head> <meta charset="UTF-8"> <title></title>  <script type="text/javascript" src="js/jQuery.min.j
复制链接

扫一扫