jQuery第五章 jQuery函数

最新推荐文章于 2020-09-24 14:32:10 发布

Jayco-J

最新推荐文章于 2020-09-24 14:32:10 发布

阅读量172

点赞数

分类专栏： jQuery学习路线文章标签： js javascript jquery html

本文链接：https://blog.csdn.net/LvJzzZ/article/details/108310328

版权

jQuery学习路线专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript自我学习路线

jQuery函数

jQuery函数

jQuery常用函数：
val
text
attr
remove
empty
append
html
each

一、val

操作数组中DOM对象的value属性
语法格式

// 无参调用形式，读取数组中第一个DOM对象的value属性值
$(选择器).val()

// 有参调用形式，对数组中所有DOM对象的value属性值进行统一赋值
$(选择器).val(值)

二、text

操作数组中所有DOM对象的文字显示内容属性
语法格式

// 无参调用形式，读取数组中所有DOM对象的文字内容，将得到内容拼接为一个字符串返回
$(选择器).text()

// 有参调用形式，对数组中所有DOM对象的文字显示内容进行统一赋值
$(选择器).text(值)

三、attr

对val、text之外的其他属性操作
语法格式

// 获取DOM数组中第一个对象的属性值
$(选择器).attr("属性名")

// 对数组中所有DOM对象的属性设为新值
$(选择器).attr("属性名","值")

四、remove

将数组中所有DOM对象及其子对象一并删除
语法格式

$(选择器).remove()

五、empty

将数组中所有DOM对象的子对象删除
语法格式

$(选择器).empty()

六、append与appendTo

1. append

为数组中所有DOM对象添加子对象（向每个匹配元素内部的末尾处插入内容）
语法格式

$(选择器).append()

2. appendTo

将每个匹配的元素追加到指定的元素中的内部的末尾
语法格式

$(jQuery对象).appendTo(要选择的对象)

3. append与appendTo区别

append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容==且为jQuery对象==，而后面是要选择的对象

七、html

设置或返回被选元素的内容(相当于innerHTML)
语法格式

// 无参调用方法，获取DOM数组中第一个元素的内容
$(选择器).html()

// 有参调用方法，用于设置DOM数组中所有元素的内容
$(选择器).html(值)

八、each

each是对数组、JSON、DOM数组等的遍历，对每个元素调用一次函数
语法格式

$.each(要遍历的对象，function(index,element){处理程序})

jQuery 对象.each(function(index,element){处理程序})

index：数组的下标
element：数组的对象

测试用例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 在DOM对象创建好后，绑定事件
			$(function() {
				$("#btn1").click(function() {
					// val()的作用：获取DOM数组中第一个对象的value属性值
					var text = $(":text").val();
					alert(text);
				})
				$("#btn2").click(function() {
					// 设置所有text的value为新值
					$(":text").val("课程");
				})
				$("#btn3").click(function() {
					// 获取div，text()无参数，获取DOM对象的文本值，连接成一个字符串
					alert($("div").text());
				})
				$("#btn4").click(function() {
					// 设置div的文本值
					$("div").text("新的div文本值");
				})
				$("#btn5").click(function() {
					// 读取指定属性的值
					alert($("img").attr("src"));
				})
				$("#btn6").click(function() {
					// 设置指定属性的指定值
					$("img").attr("src", "img/logo2.png");
				})
				$("#btn7").click(function() {
					// 使用remove删除父和子所有的DOM对象
					$("select").remove();
				})
				$("#btn8").click(function() {
					// 使用empty删除子DOM对象
					$("select").empty();
				})
				$("#btn9").click(function() {
					// 使用append增加DOM对象
					$("#father").append("<input type='button' value='我是增加的按钮' />");
				})
				$("#btn10").click(function() {
					// 使用html()函数，获取数组中第一个DOM对象的文本值(等价于innerHTML)
					alert($("span").html()); // <b>阿信</b>
					// alert($("span").text()); // 阿信怪兽
				})
				$("#btn11").click(function() {
					// 使用html(有参数)函数，设置所有DOM对象的文本值
					$("span").html("我是新的<b>数据</b>");
				})
				$("#btn12").click(function() {
					// 循环普通数组(非DOM数组)，对每个元素调用一次函数
					var arr = [1, "lzj", true];
					$.each(arr, function(i, e) {
						alert("数组下标：" + i + "；" + "数组元素：" + e);
					})
				})
				$("#btn13").click(function() {
					// 循环JSON，对每个元素调用一次函数
					var json = {
						"name": "lzj",
						"age": "20"
					};
					$.each(json, function(i, e) {
						alert("i是key=" + i + "，e是值=" + e);
					})
				})
				$("#btn14").click(function() {
					// 循环DOM数组，对每个元素调用一次函数
					var domArray = $(":text"); // DOM数组
					$.each(domArray, function(a, b) {
						alert("a=" + a + "，b=" + b.value);
					})
				})
				$("#btn15").click(function() {
					// 循环jQuery对象，jQuery对象就是DOM数组，对每个元素调用一次函数
					$(":text").each(function(a, b) {
						alert("a=" + a + "，b=" + b.value);
					})
				})
			})
		</script>
	</head>
	<body>
		<input type="text" value="Java" /><br>
		<input type="text" value="JavaScript" /><br>
		<input type="text" value="jQuery" /><br>
		<br>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<br>
		<img src="img/logo.png" id="img1">
		<br>
		<br>
		<select>
			<option value="C">C</option>
			<option value="C#">C#</option>
			<option value="C++">C++</option>
		</select>
		<br>
		<select>
			<option value="语文">语文</option>
			<option value="数学">数学</option>
			<option value="英语">英语</option>
		</select>
		<br>
		<br>
		<div id="father">div01</div>
		<br>
		<span><b>阿信</b></span>
		<span>怪兽</span>
		<br>
		<br>
		<input type="button" value="获取第一个文本框的值" id="btn1" /><br>
		<input type="button" value="设置所有文本框的值" id="btn2" /><br>
		<input type="button" value="获取所有div的文本值" id="btn3" /><br>
		<input type="button" value="设置div的文本值" id="btn4" /><br>
		<input type="button" value="读取src属性的值" id="btn5" /><br>
		<input type="button" value="设置指定属性的值" id="btn6" /><br>
		<input type="button" value="使用remove删除父和子对象" id="btn7" /><br>
		<input type="button" value="使用empty删除子对象" id="btn8" /><br>
		<input type="button" value="使用append增加DOM对象" id="btn9" /><br>
		<input type="button" value="获取第一个DOM的文本值" id="btn10" /><br>
		<input type="button" value="设置span的所有DOM的文本值" id="btn11" /><br>
		<input type="button" value="循环普通数组" id="btn12" /><br>
		<input type="button" value="循环JSON" id="btn13" /><br>
		<input type="button" value="循环DOM数组" id="btn14" /><br>
		<input type="button" value="循环jQuery对象" id="btn15" /><br>
	</body>
</html>

Jayco-J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery第五章 jQuery函数

JavaScript自我学习路线jQuery函数一、val二、text三、attr测试用例一jQuery函数jQuery常用函数：valtextattrremoveemptyappendhtmleach一、val操作数组中DOM对象的value属性语法格式// 无参调用形式，读取数组中第一个DOM对象的value属性值$(选择器).val()// 有参调用形式，对数组中所有DOM对象的value属性值进行统一赋值$(选择器).val(值)二、text操作数
复制链接

扫一扫