jQuery函数（四）
1.常用函数
| 函数名 | 调用方式 | 作用 |
| val | $(选择器).val() | 读取数组中第一个dom对象的value属性值 |
| $(选择器).val(值) | 对数组中所有dom对象的value属性值进行统一赋值 | |
| text | $(选择器).text() | 读取数组中所有dom对象的文字显示内容，将得到的内容拼接为一个字符串返回 |
| $(选择器).text(值) | 对数组中所有dom对象的文字显示内容进行统一赋值 | |
| attr | $(选择器).attr("属性名") | 获取dom数组中第一个对象的属性值 |
| $(选择器).attr("属性名","属性值") | 将数组中所有dom对象的属性设为新值 |
2.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
background: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
// 获取第一个文本框的值
$("#btn1").click(function(){
var obj = $(":text").val();
alert(obj)
})
// 设置所有文本框为新值
$("#btn2").click(function(){
$(":text").val("吕布");
})
// 获取div的所有文本
$("#btn3").click(function(){
alert($("div").text());
})
// 设置div的新文本
$("#btn4").click(function(){
$("div").text("hello");
})
// 读取src属性的值
$("#btn5").click(function(){
alert($("#img1").attr("src"));
})
// 设置img图片
$("#btn6").click(function(){
$("#img1").attr("src","img/jinsha.jpg");
})
})
</script>
</head>
<body>
<p>文本框val</p>
<input value="刘备"><br/>
<input value="关羽"><br/>
<input value="张飞"><br/>
<p>文本数据text</p>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div><br/>
<p>图片</p>
<img id="img1" src="img/tianfuzhen.jpg">
<p>功能按钮</p>
<button id="btn1">获取第一个文本框的值</button><br/>
<button id="btn2">设置所有文本框为新值</button><br/>
<button id="btn3">获取div的所有文本</button><br/>
<button id="btn4">设置div的新文本</button><br/>
<button id="btn5">读取src属性的值</button><br/>
<button id="btn6">设置img图片</button><br/>
</body>
</html>
3.常用函数
| 函数名 | 调用方式 | 作用 |
| remove | $(选择器).remove() | 将数组中所有dom对象及其子对象全部删除 |
| empty | $(选择器).empty() | 将数组中所有dom对象的子对象删除 |
| append | $(选择器).append("<div></div>") | 为数组中所有dom对象添加子对象 |
| html | $(选择器).html() | 获取dom数组中第一个元素的内容 |
| $(选择器).html("值") | 设置dom数组中所有元素的内容 |
4.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
background: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
// 使用remove删除所有dom对象
$("#btn1").click(function(){
$("select").remove();
})
// 使用empty删除子dom对象
$("#btn2").click(function(){
$("select").empty();
})
// 增加一个子dom对象
$("#btn3").click(function(){
$("#father").append("<button>我是新增加的按钮</button>");
})
// 获取带有html标签内容的文本
$("#btn4").click(function(){
alert($("select").html()); // 保留标签
alert($("select").text()); // 不保留标签，纯文本
})
// 设置值
$("#btn5").click(function(){
$("span").html("我是<b>杰森伯恩</b>");
})
})
</script>
</head>
<body>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select> <br/>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select> <br/>
<div id="father">我是一个div</div>
<span id="sp">我是span</span>
<button id="btn1">使用remove删除所有对象</button>
<button id="btn2">使用empty删除子dom对象</button>
<button id="btn3">增加一个子dom对象</button>
<button id="btn4">获取带有html标签内容的文本</button>
<button id="btn5">设置值</button>
</body>
</html>
5.each函数
参数：index:数组的下标 element：数组的对象
1.第一种格式：
$.each(要遍历的对象,function(index,element){
处理程序
})
2.作用：对数组、json、dom数组进行遍历，数组的每一个成员都会调用一次函数
1.数组：var arr = [1,2,3];
2.json：var json = {"name":"lisa"，"age",20}
3.dom数组：var obj = $(":text");
3.示例：注意，index和element是自定义的，写成什么都行
1.循环普通数组
$("#btn6").click(function(){
var arr = [1,2,3];
$.each(arr,function(index,element){
alert("循环变量index:" + index + "数组对象：" + element);
})
})
2.循环json
// 循环json $("#btn7").click(function(){ var arr = {"name":"json","age":23}; $.each(arr,function(key,value){ alert(key + "：" + value); }) })
3.循环dom数组
// 循环dom数组 $("#btn8").click(function(){ var arr = $(":text"); $.each(arr,function(index,element){ // 此时，element是dom对象 alert(index + "：" + element.value); }) })
3.第二种格式
jQuery对象.each(要遍历的对象,function(index,element){
处理程序
})
1.参数：index:数组的下标 element：数组的对象
2.jQuery对象就是dom数组。
3.示例
// 循环jQuery对象 $("#btn9").click(function(){ $(":text").each(function(index,element){ // 此时，element是dom对象 alert(index + "：" + element.value); }) })
浙公网安备 33010602011771号