JQuery中的常用函数（一）

禾南大木呈

已于 2022-05-16 17:15:26 修改

阅读量627

点赞数

分类专栏： JQuery 文章标签： jquery javascript 前端

于 2022-05-14 21:37:10 首次发布

本文链接：https://blog.csdn.net/m0_46160024/article/details/124774484

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、each函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=1.0">
	<title>each函数</title>
	<script type="text/javascript" src="../jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<script type="text/javascript">
		// (1) 用JSON语法创建一个一维数组，
		//     存入包含姓名和薪水两个属性的object对象，再迭代输出
		// 第一步，创建一维数组并存入所要求的object对象
		var objects = [{
			'name': '张三',
			'sal': 1000
		}, {
			'name': '李四',
			'sal': 2000
		}, {
			'name': '王五',
			'sal': 3000
		}]
		// 第二步，执行迭代操作
		// each(回调函数) 以每一个匹配的元素作为上下文来执行一个函数
		$(objects).each(function (index, el) {
			console.log(index)
			console.log('name=' + el.name + ', sal=' + el.sal)
		}) // 至此，问题已经得到解决
		// 下面介绍可以解决该问题的另一个API
		// each(数组, 回调函数)
		// 调用该函数有两种方式，如下：
		// 1. jQuery.each(数组, 回调函数)
		// 2. $.each(数组, 回调函数)
		// 显然，jQuery可以使用dollar符“$”代替
		// 这里使用$来调用函数each(数组, 回调函数)
		$.each(objects, function (index, el) {
			console.log(index)
			console.log('name=' + el.name + ', sal=' + el.sal)
		})
	</script>
</body>
</html>

二、append函数与prepend函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>append函数与prepend函数</title>
	<script type="text/javascript" src="../jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<ul>
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul> 
	<hr/>	
	<div>这是子元素，要插入到父元素内</div>
	<script type="text/javascript">
		// (1) 将div元素插入到ul元素中的最后一个li元素之后
		// append(content) 向每个匹配的元素内部追加内容
		// 这个操作与对指定的元素执行appendChild方法
		// 将它们添加到文档中的情况类似
		// content可以是String、Element、jQuery（这里不展示）
		// 这里的String即为HTML语句
		$('ul').append($('div'))
		// 也可写为
		// $('ul').append('<div>这是子元素，要插入到父元素内</div>')
		// (2) 将div元素插入到ul元素中的第一个li元素之前
		// prepend(content) 向每个匹配的元素内部前置内容
		// 这是向所有匹配元素内部的开始处插入内容的最佳方式
		// 这里的content也可以是String、Element、jQuery，不再赘述
		$('ul').prepend($('div'))
		// $('ul').prepend('<div>这是子元素，要插入到父元素内</div>')
	</script>
</body>
</html>

三、after函数与before函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>after函数与before函数</title>
	<script type="text/javascript" src="../jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<ul>
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul> 
	<hr/>
	<div>这是子元素，要插入到父元素外</div>
	<script type="text/javascript">
		// (1) 将div元素插入到ul元素之后
		// afetr(content) 在每个匹配的元素之后插入内容
		// content可以是String、Element、jQuery（这里不展示）
		// 这里的String即为HTML语句
		$('ul').after($('div'))
		// $('ul').after('<div>这是子元素，要插入到父元素外</div>')
		// (2) 将div元素插入到ul元素之前
		// before(content) 在每个匹配的元素之前插入内容
		// 这里的content也可以是String、Element、jQuery，不再赘述
		$('ul').before($('div'))
		// $('ul').before('<div>这是子元素，要插入到父元素外</div>')
	</script>
</body>
</html>

四、find函数与attr函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>find函数与attr函数</title>
	<script type="text/javascript" src="../jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<form>
		<table>
			<tr>
				<td>
					<input type="text" name="username" value="张三"/>
				</td>
				<td>
					<input type="password" name="password" value="123456"/>
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		// (1) 输出form里第一个input元素的type属性
		// attr('属性') 取得第一个匹配元素的属性值
		// 通过这个方法可以方便地从第一个匹配元素中获取一个属性的值
		// 如果元素没有相应属性，则返回undefined
		console.log($('form input:first').attr('type'))
		// find(expr) 搜索所有与指定表达式匹配的元素
		console.log($('form').find('input:first')).attr('type')
		// (2) 设置form里最后一个input元素为只读输入框
		// attr(key, value) 为所有匹配的元素设置一个属性值
		$('form').find('input:last').attr('readonly', 'readonly')
	</script>
</body>
</html>