一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情。
jquery内容文本值
主要针对元素的内容还有表单的值操作
1.普通元素内容html()
html()//获取元素的内容
html("")//设置元素的内容
2.普通元素文本内容text()
text()//获取元素文本内容
text("")//设置元素文本内容
3.表单的值val()
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-3.6.0.js"></script>
<title>Document</title>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
//1.获取设置元素的内容
console.log($("div").html());
//2.获取设置元素文本内容
console.log($("div").text());
$("div").text("123");
//3.获取设置表单值
console.log($("input").val());
$("input").val("123")
</script>
</body>
</html>
jquery遍历对象each方法
遍历元素
jquery隐式迭代时对同一类元素做了相同的操作。如果想要给同一类元素左不同的操作,就需要用到遍历
一.语法
$("div").each(function(index,domEle) {xxx;})
- each()方法遍历匹配的每一个元素。主要用DOM处理。
- 里面的回调函数有两个参数:index是每一个元素的索引号;demEle是每个DOM元素对象,不是jquery对象
- 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)
接下来是代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-3.6.0.js"></script>
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
var arr=["red","green","blue"]
//1.each方法遍历元素
$("div").each(function(index,domEle){
//回调函数第一个参数一定是索引号,可以自己指定索引号名称
console.log(index);
//回调函数第二个参数一定是dom元素对象
$(domEle).css("color","blue")
})
})
</script>
</body>
</html>
Ajax
Ajax是实现局部刷新的一种技术
在局部刷新中,需要创建一个对象,代替浏览器发起请求的行为,这个对象存在内存中。代替浏览器发起请求并接受响应数据。这个对象就叫做异步请求对象。这个异步对象用于在后台与服务器交换数据。XMLHttpRequest就是我们所说的异步对象。我们通常使用javascript语法创建和使用XMLHttpRequest对象。
异步对象能够
- 在不重新加载页面的情况下更新网页
- 在页面已加载后向服务器请求数据
- 在页面已加载后从服务器接收数据
创建XMLHttpRequest对象的语法:
var xmlhttp=new XMLHttpRequest()